Mottu
Mottu Engine
At Mottu, inconsistent design practices and a lack of standards across teams created technical debt and frequent rework, harming efficiency and increasing costs. With the app central to client interactions, I led a comprehensive redesign to modernize its visual identity, resolve inefficiencies, and establish a unified design system.
Fixing Mottu’s Digital Foundation
Mottu is a startup for motorcycle rental and logistic services. Our visual identity felt outdated and lacked appeal. Throughout the app's lifecycle, developers, designers and PMs had adopted several inefficient practices, despite the app being crucial for client interactions and product management. This led to a shortage of components, inconsistent design standards, frequent rework, and significant financial losses.
Given the substantial technical debt, how could we effectively tackle these issues in one strategic move?
High-Level Goals
Enhance the app's visual appeal and usability, benefiting our clients and increasing the perceived value of our products.
Introduce Design System practices to benefit Designers and Developers, as well as Stakeholders that designed screens.
Use these practices and components to redesign the entire app.
The Worst Figma I've Ever Seen
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". After conducting a thorough audit, in the image you can find the most critical results.After conducting a thorough audit, I identified the critical issues, summarized in the image.
Additionally, there were:
16527 Unnamed Vectors;
1627 Unnamed Lines;
14402 Unnamed Groups;
1581 Unnamed Frames;
6173 Unnamed Rectangles;
1260 Unnamed Icons;
2930 Unnamed Ellipses
An uncountable number of unnamed Text Fields.
This involved addressing over 100,000 scattered elements in the project, all lacking components, autolayout, and libraries. It became evident that starting from scratch would be more straightforward than fixing these issues. Presenting this data to the stakeholders convinced them of the necessity of adopting a Design System approach.
One-man Design System Team
In my experience, convincing stakeholders to invest time and resources in a Design System can be the toughest challenge. Fortunately, all stakeholders this time were tech-savvy individuals who understood the value it would bring. Upon presenting the audit results, they embraced the idea, and I immediately began developing our Design System. I swiftly established the Design Tokens using Figma's cutting-edge features, including Variables, Variants, and Themes, and had to refactor the entire Design System a few times to accommodate new updates.
Within about three months, I had created most of the components needed for the app. After this initial phase, new components were rare and easy to create, thanks to the Atomic Design approach I adopted. To speed up the documentation of components, I used Nathan Curtis’ Eightshape Specs. This required meticulous use of the variables I had set up in every applicable situation. The result is as follows:
When I presented this proposal to the development team, they were thrilled and fully supportive. They were aware of some existing bad code practices causing issues and were eager to start fresh. We collectively named it the "Mottu Engine," which would serve as the core of our entire technology development, much like how an engine is the heart of our motorcycles. Gradually, we began refactoring all the screens in our app (you can read more in the Mottu - App Redesign case study).
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.
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%.