Cases
Boostmi
Intro
While at Boostmi, I had the opportunity to leverage a wide range of skills, which encouraged me to operate with agility, adaptability, and a continuous learning mindset, enabling me to acquire numerous new techniques, tools and best practices.
Overview
Boostmi is a company with great ambitions for what roadside assistance should be. End to end, from the drivers, providers and different companies that manage fleets of providers.
When I met the Boostmi team they had a lot of great ideas, with some mobile apps, web apps, and the basics of a brand.
First steps
We initiated our design strategy by identifying various user segments and tailoring our approach to meet their specific needs.
With an understanding of diverse personas and interactions, we began outlining the foundational elements of our platform.
Different Users
The challenge was to understand and map every goal, translate them into a system of flows that interact simply and smoothly :
The service requests
Drivers
Boosters – Peer to peer
Professional providers
Dispatchers
Admins
Business clients
The Platform
The Software as a Service, etc
On the management side I designed 2 Web applications: Admin and Dispatcher. From conception we decided the PWAs should be able to scale to SaaS and potentially become ‘white-label‘, so other companies would be able to rebrandthem.
With those 2 complementing each other Boostmi could:
Follow and manage any service request.
Follow and manage any provider.
Follow and manage any user.
Follow and manage any payment and invoice.
Manage reports, etc.
Progressive Web Applications – PWA
Scalability
As part of the process I sketched and tried many approaches to build different layouts restricting myself and team to the basics UI elements.
After several tries and plenty improvements. It worked! We were able stretch our basic components: palette and icons to build apps that felt unique BUT under the umbrella of a main brand.
Design, Build, Test, Improve
We prioritized user-centric design for the Boostmi Platform to meet diverse user needs.
We meticulously mapped out user personas and interactions, the User Tested the different journeys to improve it.
Our design system ensured seamless experiences across platforms, fostering flexibility and scalability.
Mobile Apps
Boostmi App
Drivers will request services using the Boostmi App.
Provider App
P2P providers (Boosters) and professional providers will using the Boostmi Provider App.
End to End
Our design process focus around on
How to onboard our different users.
How to offer our services and the little nuances that can affect a roadside assistance.
Request confidential information in the proper amount.
How to explain the validation process for future providers.
How to add and manage vehicles and payments.
Using a main design system each mobile had to feel native in its own environment. It should feel from Apple in iOS and it should feel material in Android. But always branded as Boostmi.
With those elements we started talking about the User Experience we had to create across the different flows to make it easy to use.
Using a basic design system with the following goals:
Allow the team to quickly create interfaces, express, test, approve or dismiss new ideas
A design system should feel as Boostmi across the different digital presence: mobile, web, iOS, Android, web site, PWA, social and marketing assets.
At the same the design system should allow us to easily differentiate among each other the different mobile apps, web apps, input, output reports, etc.
We had to think ahead, make the as system flexible to make it eventually a white-label.
Our design system
Atomic Design
With a basic but flexible approach, we started wireframing and converting our flows into ideas, ideas into wireframes, wireframes into discussions, later on they became ATOMIC.
I used the atomic design principles to define our Atoms, Molecules, and Organisms to build consistency and cohesivity across the broad spectrum of flows.
PWA Navigation and icons (atoms)
Our baby 👶 Atomic Design System let us put together our first interfaces and the dev team started to build.
PWA Navigation for different users. And custom branded icons.
Atoms, molecules and organisms – Atomic Design
First basic colours and Schemes
Quick tryouts, basic elements and components worked to build and experiment different features and flows.
As a product designer, one motivation lies in crafting assets that maintain a cohesive brand identity across all touchpoints within the company. This involves ensuring that products, visuals, and printed materials align seamlessly with Boostmi's brand guidelines. Additionally, your my extended to creating various marketing assets such as souvenirs, presentations, pitches, and emails, all of which contribute to reinforcing the company's brand consistency and message.
I designed and built a multi language, responsive website (boostmi.com) using Webflow. Including 3 main sections “For Drivers”, “For Business” and “Blog”
Using the no-code approach of Webflow was a super experience, designing and building let designers obtain and stretch to the maximum the web as a technology.
Branding and Marketing
Web design and integration – Webflow
Agile Development
In designing Boostmi, we adopted an agile development methodology, enabling us to respond promptly to changing business and partners requirements and stakeholder expectations. This approach facilitated rapid quality assurance, allowing for swift iterations and ongoing enhancements to the platform.
Optimise for Angular
To optimize the development of apps running on web and native iOS and Android platforms, we capitalized on the team's robust knowledge of AngularJS. By leveraging their expertise in AngularJS, we built scalable, high-performance interfaces that prioritize usability and maintainability, ensuring a seamless user experience across devices.
Collaborative Process
Our design process was characterized by close collaboration among designers, developers, and stakeholders. By fostering a collaborative environment, we ensured alignment on project objectives, facilitated efficient iteration cycles, and leveraged the diverse expertise of each team member to achieve optimal outcomes.
Bookmark – Print
Presentation Assets - Customizable presentations as a system.
Souvenirs – brand gear
Results
The intensive work at Boostmi as a lead product designer yielded tangible results. We achieved comprehensive user flows, validated through rigorous testing and real user feedback, leading to iterative improvements. By showcasing our apps and platform to investors, we provided transparent insights into our products' capabilities and potential, reinforcing confidence in our offerings.
Low res wireframes – Dashboard, Admin contracts and Providers
Low res wireframes – Accept a Service Request, Provider
Low res wireframes – Request a Service
silverdesk inc