Mottu
App Redesign
Mottu, a motorcycle rental and logistics startup, relied on its app as the cornerstone of client interactions and product management. However, its outdated visual identity and inefficient practices among teams led to inconsistent designs, limited components, and costly rework.
Tackling Inefficiency with Strategic Design
Faced with mounting challenges, we set out to modernize Mottu’s app through a strategic redesign. By addressing inefficiencies, we established consistent design standards, streamlined workflows, and rebuilt trust in the platform—transforming it into a cohesive, scalable solution that supports the company’s growth.
Given the substantial technical debt, how could we effectively tackle these issues in one strategic move?
High-Level Goals
Analyze and propose a solution for the purchase funnel, which have been causing substantial financial losses for the company.
Redesign the flow to gain insights into why potential clients were not signing up for the plans.
Use this project as an opportunity to advocate for the development of a Design System. The Mottu - App Redesign is closely connected to the Mottu Engine case study.
We are Losing Clients
When I first joined Mottu, I was shocked by the state of our Figma file, which I jokingly labeled "The Worst Figma I've Ever Seen" (you can find out why in the Mottu - Mottu Engine case study). As I wrapped up the Design System audit and started doing some UX audits, a particular chart caught my attention:
Let's break it up
The 77% drop in the purchase funnel was concerning.
Below, I’ve highlighted the screens that were responsible for this result. Here, we faced several challenges, with the most prominent being overwhelming users with too many choices all at once: Pick-up Location, Motorcycle, Plan, alongside intimidating price numbers. This led me to prioritize this issue and propose the first redesigned flow for our app.
Additionally, we didn't have any way to track which option was causing our potential new clients to abandon signing up for a plan.
Presenting users with too many choices simultaneously made it challenging to pinpoint why they were abandoning the screen. Was it because their desired motorcycle wasn't available, or because they lacked a nearby payment location? We needed to devise a way to optimize user choices by understanding these patterns. This required a complete Modular App that we could easily adapt for the numerous A/B tests needed to answer these questions. I dedicated some time to developing a new visual identity for the app, aligning it more closely with Mottu's social branding and physical space, "Mottu City.”
I quickly noticed an unused Typography Style on the app, the "Barlow Bold Italic" giving a somewhat "Brutalist" approach to communication. Drawing from my experience with Renault's strategy to "visually demonstrate the value of the product being purchased," the redesigned screens took on a new look:
This modular approach allowed us to rearrange pages and their contents to better understand and optimize the user purchasing journey. The construction of components also followed the Atomic and Modular design principles, ensuring consistency and reusability throughout the app. Here are some of my favorite redesigned screens using the new components from the Mottu Engine ((you can read more about this on the Mottu Engine - Design System case study).
Major Achievements
Understanding the client: the redesigned flow not only increased the amount of data we could gather for our Business Intelligence through split flows on different screens, but also made A/B testing much easier.
Modular Design: the concept of modularity was applied to the entire app, enabling us to customize the experience for two key user segments - Delivery Men and Transportation.
A great success: since implementation, we've seen a significant increase in new clients, from 700 per week to around 1400. However, due to other initiatives like new plans and pick-up locations, it's challenging to isolate the exact impact of the flow changes. What we can definitively say is that the purchase rate from the beginning to the end of the flow has improved from 4.53% to 9.47%.