At Boostmi I got the chance to use the broadest skills, push me to move quick, learn plenty new tricks and practices.
The challenge
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.
The challenge was to understand and map every goal, each participant as users and business, and translate them into a system of flows that interact simply and smoothly between each other.
First steps
Having a knowledge of the different personas and interactions, we start defining the building blocks of our platform:
- The service requests
- Drivers
- Boosters – Peer to peer
- Professional providers
- Dispatchers
- Admins
- Business clients
- The Platform
- The Software as a Service, etc
Our design system
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.
As part of the process I sketched and tried many approaches to build different layouts restricting myself 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.
I quickly tried the UI basics, they worked to build and experiment with different ideasWith 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.
Atoms, molecules and organisms – Atomic DesignI 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.
Atoms and moleculesCustom Icons
Mobile Apps
We have 2:
Drivers will request services using the Boostmi App.
Boostmi AppP2P providers (Boosters) and professional providers will using the Boostmi Provider App.
Provider AppOur 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.
Progressive Web Application – PWA
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 rebrand them.
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.
Branding and Marketing
As a designer I’m driven to create things that feel right. In Boostmi that includes products, visuals, or prints.
I use my skills to create several marketing assets/system like souvenirs, presentations, pitches, and emails.
Bookmark – Print Pitches and presentation – design and assetsI designed and built a multi language, responsive website (boostmi.com) using Webflow. Including 3 main sections “For Drivers”, “For Business” and “Blog”
Web design and integration – WebflowUsing 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.
Souvenir – brand gearEverything is easier with a solid Design System 😉
Results
As a result we had different well rounded user flows end to end. We had the chance to run user tests and make improvements from feedback of real user’s data.
We were able to show, test and gather feedback from our apps and whole platform. Investors were able to see the ins and outs in detail from all the sides.
Emails – marketing campaign