Meet the client
Mobiot, a Dutch-based hardware group is disrupting the market of GPS tracking with an innovative GPS tracker that they make in-house. Five years of battery life, 100% waterproof tracker, coverage across all Europe, easy and quick assembly of the device that allows users to recover stolen possessions quickly and easily.
Features
Geofence-limited device movement
Company admins can create custom-sized geofence areas within which devices are allowed to move. As soon as one of the devices leaves the area, the company staff is notified. This can apply to delivering companies, construction machinery rental or car rental companies.
Track from anywhere
Right at your fingertips, trace your devices from anywhere at any time. See location live or check history of locations in any given date range to personalise your experience for your needs.
Activate Panic Mode
Admins can activate the Panic mode which triggers the tracker to send the location more frequently and allows the notified authorities to recollect stolen company possession even quicker.
Tracker History
See full history of your tracker’s movement, filter through it based on date input and can better understand exactly how the tracker has moved during a certain time period.
Custom Maps Component
Our custom Flutter Google Maps integration enables users to see their priced possession on a custom Map view. With custom Map markers users can easily distinguish between different types of vehicles, while being one simple click away from seeing satellite map view for easier understanding of exact location of the tracker.
Design process
The project took 16 weeks to finish and had 6 stages overall. Our work included analyse of ideal users, their needs, pain points and defining the problem clearly. In the next steps we ideated multiple solutions and created detailed design. This structured approach led to a user-centric, refined design ready for implementation.
User Journey Mapping
This step allows us to dig deep into the app structure, including all the needed features and possibilities for the user. It is such an important part of design as it gives us a perspective on the product’s complexity. It lets us organise and prepare for the following steps.
Meet the wireframes
We use sketching to brainstorm the possible solutions to ensure best possible user experience. Low-fidelity wireframes present early-stage of visual representations of the product’s layout. They are often created with minimal detail, using basic shapes and placeholders to represent different elements like text, images, buttons, and navigation menus. This step allows us to map out the core structure and functionality without getting bogged down in aesthetics.
UI Design
This involves organizing the structure and positioning of elements on the screen (layout), choosing fonts, sizes, and spacing to enhance readability and hierarchy (typography), selecting colors that align with the brand and improve usability (color scheme), and using images, icons, and graphics to support content and enhance visual appeal.
Backend
Custom Backend Integration
The client had their own custom backend where they stored all the tracker data. Our goal was to integrate the existing backend with a new mobile app ecosystem to make it scalable, fast, and reliable.
Integration
Google Maps Integration
As the user experience is centred around maps and visualising trackers’ location at any given moment, providing high-quality map components was key. To achieve great user experience we integrated Google Maps and elevated it with custom map markers, geo-fence feature, and other custom elements, which we successfully integrated into our FlutterFlow project.
Solution
The company already had a great hardware innovation backed by a business model that can be scaled by millions that is run by a successful Dutch-based hardware group. Now, with the mobile app and a B2B Portal, they can scale their solution to millions.
Jump on a call with our CEO to discuss your idea in more detail 🧡🐙!
