Transforming the Maritime Industry: The Blue Pass App Powered by FlutterFlow

9 months ago   •   5 min read

By Amman Waseem


The Ministry of Energy and Infrastructure in the UAE, in collaboration with Marihub, has launched the ‘Blue Pass’ transformational project to have a unified database of maritime companies and commercial ships operating in the ports and the territorial waters of the UAE.

The Blue Pass application was built in 1 month by a team of 2 builders (1 Designer & 1 Product Manager) in FlutterFlow. Development of the project began March 20th 2023 and the project launched on May 6th 2023. The team continues to develop on FlutterFlow as they expand its capabilities in the UAE region.

Project Details:

Mohamed AboElezz, Growth Product Manager - Marihub, started building on FlutterFlow due to the tight delivery timeline.

"We had six weeks to build the app and website, and our whole team was busy working on important features for the Marihub Marketplace..so I decided to build it myself using FlutterFlow...with the help of a Designer."

The incentive behind building BluePass is to connect marine companies that frequent the ports in the UAE with marine suppliers and service providers in the country. The app serves three types of users (UAE stakeholders, Marine Suppliers, Service Providers) with different pages, navigation components and functionalities presented to each. It uses Firebase for database hosting and cloud functions.

Service providers offer exclusive deals and discounts on their services and Blue Pass easily allows ship owners and operators to access these benefits through the platform. Both parties can earn points whenever they complete deals.

The application also features a tier system that allows both parties to unlock a higher status as they execute deals. Once the providers reach the Gold or Platinum tier, they become eligible to receive incentives from strategic partners in the UAE, such as government entities and ports.

After upskilling Marihub's product designer in a few days, This project was started on March 20th 2023 and launched on May 6th 2023, only 6 weeks after Mohamed started building with his team.



Challenges

The company was looking for an easy way to create one application that allows multiple users to create accounts, view different UI dashboards, and yet contribute to the same database.

According to Mohamed, "It was very easy with FlutterFlow. We ended up creating two dashboards, service creation and browsing pages, two side navigation bars for desktop and two bottom navigation bars for mobile and a separate admin portal with different features."

The team also created a redirect page that navigates members automatically to their respective portal based on their profile data. Finally, the team created a separate app on FlutterFlow for the public website which is capable of linking to the BluePass app.

A second challenge Mohamed's team faced was to figure out the criteria and mechanism of verifying that an offer was claimed by a ship owner/operator and that the claim was met or delivered by the service provider without having to manage transactions through the platform. In order to prevent manual management, the team utilized FlutterFlow's barcode scanner widget to allow shipowners to generate a random number for the service deal which can then be verified by the service provider through their own portal.  



Why FlutterFlow?

"FlutterFlow empowers me as a product manager to quickly act on ideas that would otherwise be moved to the bottom of my backlog due to complexity or lack of resources. In pure PM terms, Flutterflow multiplies our team’s velocity x10.

Also, Flutterflow have a very short release cycle. I’ve been following your release notes and the rate at which you introduce new features and the problems you address with these features assured me that this is a tool that I can trust for the long term.

What’s more, is how clean the product looks, how easy it is to find and fix bugs and streamline our deployment process. I can’t think of a better way to ship solutions. You can tell, I am a big fan! :D"

- Mohamed, Growth Product Manager:

Application Features


Since the application has multiple user types, there are variations in user-specific features. Here are a few highlights:  

  1. Authentication & Dashboard View - 3 different types of dashboard experiences based on authentication  & user type


2. Service Providers can create, edit, activate and deactivate services, add multiple offers to each service that are only accessible by companies based on their current tiers.


3. Ship owners can claim services/offers, generate a code and send it to the service provider to validate their claim.


4. Service providers can verify claim codes to confirm that a deal was completed.


5. Ship owners can select individual vessels and link them to deals.


6. Strategic partners can enlist incentives for members (similar to services, but available to all members), based on their current tier, members can claim an incentive and generate a card with a barcode to present to officials when claiming an incentive.

Results & Metrics:


Over 50 service providers and over 30 ship owner/operator companies are currently on the platform. Since its launch the app has received massive media attention due to the maritime industry it serves.

Check out in the Khaleej Times, Gulf Today, and WAM News.

Hassan Mohammed Al Mansouri, Under-Secretary of Infrastructure and Transport Affairs at the Ministry of Energy and Infrastructure, said: “The UAE Blue Pass project will enable our partners to access all maritime services through a unified digital portal and smart app, allowing ship operators and workers in maritime companies to obtain their needs seamlessly at the touch of a button."

Mohamed & his team are choosing to continue to develop on FlutterFlow to build out the number of service providers and maritime companies that are serviced by Blue Pass.

If you would like to find out more about how your agency or business can create transformational digital experiences faster than ever, start by building your first app at FlutterFlow.io.

Spread the word