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

Progressive Web Applications – 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 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.

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.

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 interfacesexpresstestapprove 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.

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.

Branding and Marketing

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.

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

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 – Dashboard, Admin contracts and Providers

Low res wireframes – Dashboard, Admin contracts and Providers

Low res wireframes – Accept a Service Request, Provider

Low res wireframes – Request a Service


silverdesk inc