Here is how we created a brand new design system in 3 months that increased conversions by 14%.
Meesho’s exponential growth led to a massive amount of design debt.
A number of unique problems were being solved in parallel, and each project contributed to the user experience in its own way. Despite the success of each project, it added an ever-increasing level of inconsistency to the overall experience.
Secondly, Meesho’s design system was lacking a uniform and codified framework, which resulted in a great deal of back and forth with designers. This problem cascaded into the development phase, where we had different codes for the same thing.
Here’s how we tackled these challenges!
The Objectives
- Find a typeface that works across all platforms and devices.
- Find a unique visual language for the app, keeping a good balance between density and contrast.
- Build a design system that can support existing and upcoming projects. This also meant building a UI library on production.
Our goal was to redesign the entire app in three months and ship it..
The Decisions
As we started our work on the design system, our aim was to bring all designs into the ambit of a common language. The system was supposed to be based on the existing designs at Meesho. But we quickly realised that the app needed a fresh look because there were obvious usability and readability issues with its content.
We examined several popular shopping applications, along with a few other popular apps, on a density-contrast chart in order to determine what visual language would best suit us. Most e-commerce platforms fall into a similar zone, high contrast and high density. But we were clear that this might not always work for Meesho, owing to its unique position in the market. At its core, Meesho is a platform that helps entrepreneurs find products to sell, but it also gives them the ability to connect with other entrepreneurs and discover meaning through gamified journeys.
As a result, it was important that the design system accommodate all potentials; hence, the starting visual language needed to support such capabilities.
We ultimately used medium-contrast and medium-density UI elements to achieve these goals.
Next, we wanted to choose a typeface that would give our app its own unique look, while ensuring legibility on a small scale.
We chose Inter because of its amazing legibility on all scales. The problem with Inter was that it did not provide a unique brand value to the application.
Eventually, we analysed 17 typefaces, looking at their uniqueness, legibility, visual appeal, and weight distribution.
Finally, we wanted to clean our colour palette and increase its contrast. With over 100 shades of colors, except for the brand color, none of the colors had a usage guideline, resulting in inconsistent color usage. Furthermore, the contrast test failed for most colors.
By reducing the palette of colors and creating clear usage guidelines, we decided to simplify things.
The final colour palette was reduced to 24 shades, and we increased the contrast ratio to better fit our goal.
To determine which font would work best for us, we picked a couple of key screens from the App, redesigned them based on contrast and density, and tested them with all fonts we had shortlisted.
We chose Mier based on extensive discussions with the design team and the stakeholders in the company, as it provided a fresh visual appeal while maintaining legibility on smaller screens.
The Team and Approach
The next step was to build a UI kit that would eventually become the foundation of the Meesho. It was possible to accomplish this in two ways: build the entire UI kit, then redesign the screens, or run both simultaneously.
Since we had a lot of hidden use cases in production that we could not see, we chose the second approach, which involved key stakeholders for each parallel process.
- Varun headed the core design team, managing stakeholder relations from all divisions within the company.
- Arjun was in charge of the UI kit.
- Gauri was responsible for providing end-to-end delivery of the screen and adding visual details.
- I was working on the initial designs for most of the flows and managing the scope of the screens.
We were able to make it work well for the most part. The development team kept coming up with use cases that we were initially unaware of. Our flexibility enabled us to quickly address these challenges.
The Workflow
As the previous UI kit was on Sketch, the first step was to import that into Figma, which we had recently shifted to and which would prove crucial to the success of our redesign. Once we had the library in Figma, we were able to leverage its unique features for our elements.
For ease of navigation, we chose one large file for all screens, rather than having to manage multiple files. In retrospect, this was a very bad decision, something I will explain later.
Working with Figma also meant that we could offer instant updates to the development team without having to jump on every call.
In order to make it easier for everyone to locate the flow they’re looking for, we added an index to the top of the page. This allowed us to understand the entire app, and to fill in the missing pieces.
Moreover, we conducted daily scrum meetings. In these meetings, we would discuss the remaining scope, as well as the immediate requirements, which has proven to be very useful for keeping us on track.
The Process
To be specific, our design system is based on atomic principles, where typography, colour, iconography, illustration, and iconography are the atoms of design.
Additionally, atoms define rules such as density and contrast. Then, there are molecules that use atoms to form functional elements such as buttons, text fields, and control units. As a final building block, we use components, such as bottom sheets, dialogue boxes, cards, and navigation blocks.
Since this is an industry standard, we didn’t want to innovate too much. Continuing on this philosophy, we want to add layers to it going forward.
The Challenges and Lessons Learned
- We did not have design files for all existing flows in the app, so as a default new requirements constantly cropped up. The final designs were delivered on time despite these demands. It would’ve been beneficial to include the development team early in the project in order to identify such situations and better estimate timelines.
- For quite some time, we used a test font provided by the font foundry, but later the licensed font caused problems with alignment. This is because the test font had a limited character set, and it didn’t consider extra spacing that was introduced by the special character in the final font.
- Figma was new to the team, so it presented some challenges when implementing components. Over time, we were able to make all the components that suited Figma’s structure. For those who were new to Figma, an initial training session would have been helpful.
- Due to the single file structure, execution slowed down, as the file size became large and difficult to load and navigate. The challenge was particularly tough for developers since they had other memory-consuming applications running. The project would have been better if we had spent more time on the initial organisation.
The Impact
With this new design system, we were able to accelerate design velocity, make a major impact on our business, and catapult design culture to a whole new level.
So, What’s Next?
With this redesign, Meesho users will have an experience that is unique and refreshing, and we will continue to develop and maintain it.
As we move forward, we will be developing guidelines for visual communication, animation, and content.
Our team is also working on documentation, which enables existing and new designers to better understand our design system and is something we aim to release with the next iteration.
Watch this space!
Our team is always on the lookout for great minds to help us create brilliant experiences for our users. You can apply now for a position that matches your skills and experience!
