ICING Project - Design System Consolidation
Enabling a merge in product and tech!
Background
In 2021, Takeaway.com merged with JustEat. It started with unifying the brands and the brand identity, but suddenly the company announced a merge in product and tech, and that caused an overhaul in everything.
The biggest challenge was to unify 20 different products operating in different markets across the globe.
Role
I was a Design System Designer for Takeaway and was responsible for ensuring the consistency of Takeaway's customer-facing products.
Project Goal:
Our team's goal for the project was to merge Takeaway's design system called SNACKS with JustEat's design UI library called PIE. This merge would enable the company to introduce a unified look and feel across all products, increase design and development velocity, and reduce the time spent reinventing the wheel on solutions.
Design Process
Here's a summery of the stages we went through to merge SNACKS and PIE:
• Explore — Inspiration and improvements, wireframing, prototyping
• Discover — UI Audit, research
• Define & Design — Defining the user needs, and component specifications, and designing the component
• Documentation, Handover & QA — Guidelines, code and quality assurance
How did it start?
Once we had the new brand identity we knew a redesign was necessary. At this point, we had research insight collected from the user interviews and we knew what was not working, but before jumping to update our design system, we had to convince the stakeholders that consistency was the key.
Once the merge of brands started, I kicked off the project by auditing the components in the customer-facing products in Germany and the Netherlands. This included the website, iOS and Android applications.
My main goal for this audit was to identify the inconsistencies, component usage frequencies, snowflakes, and areas for improvement.
In the meantime, all of a sudden, stakeholders decided to merge product and tech, and the overhaul started. Things were happening at a very high speed, and we were given a tight deadline to present a new design with our vision to the stakeholders in only 2 days.
I worked hand in hand with our product owner to make this happen.
There wasn't much time to spare, so I instantly went through the research results broke down the pain points in the user journey, and came up with a hypothetical solution for each problem.
After marking the hypothetical solutions, I ran a quick competitive analysis to mark the best practices and understand how competitors deal with these pain points.
With all the considerations, I started designing a wireflow to visualize my ideas to address the pain points and potentially improve other parts.
I validated the wireflow with our product owner and now it was time to apply the new brand guidelines and make a high fidelity prototype to present to stakeholders.
You can take a look at the final prototype here.
The prototype was presented to the stakeholders, and we got a green light ✅
The process
Now it was time to actually jump back on the main goal to update our system to enable the merge for the costumer facing-products.
I made a report of the UI Audit and presented a summery to the team.
I listed the most used components, the inconsistencies that exist, and the frequency of usage in different parts of the funnel and provided all the screenshots of each component.
We were all on the same page that it is a disaster.
After days of exploration, it is decided that we'll adapt the UI and style from PIE (JustEat's Design UI Library) and adapt the functionality and code from SNACKS (Takeaway's Design System).
It was time to map the components to understand what's there and what's missing.
We didn't have access to any shared tools between teams, the only shared tool we had was Google Suite and we did mostly everything on Google Sheets.
To have a better understanding of the gap between these two libraries, I made a sheet and listed every component that existed in SNACKS.
The main questions to ask were "does the component exist in PIE?", "does it match the requirements?" and "what are the missing requirements?". Along the way I figured that there are naming conflicts between the libraries, so I listed those as well, and provided screenshots of both libraries.
With this structure we were able to see all the information at one place and discuss each component. We set up meetings on a weekly basis to go through this list, prioritize them, discuss the component definition, tech constrains and make migration decisions.
Once we got through the list and figured out what's the full picture, it was time to map all the components one by one and understand what needs to be done for each of them.
I mapped every screenshot I had from the costumer facing products with an equivalent variant in PIE, listed the actions to align and any extra notes or explanation.
As I was mapping the components, the designer from PIE paired with our dev team to update our tokens and apply the new brand guidelines.
We had a solid foundation to start updating the designs. After rounds of discussions we prioritized the components based on the most used components and the least technical effort.
Me and the designer from PIE started discussing what needs to be done, then divided and conquered.
We defined the process as designing the component, writing documentation, dev validation, handover and QA.
You can see a snap of the design and documentation below.
Once the design and documentation was ready, we did peer reviews to make sure everything is right in place, and after the reviews we passed it to the developers to review and make sure it's development ready.
After the development phase, we had three rounds of QA, one round of review by the PIE designer, one round of review by me and one last round by our product owner, we wanted to make sure that we're delivering quality craft.
What Happened after?
As we progressed with updating the components, the designers were migrating from Sketch to Figma. I was supporting the designers to get comfortable with Figma, guiding them on how to use the components in their designs, keeping track of their needs for improvements in the future, setting drop-in sessions for them to join and ask any questions, and specific design crit sessions to make sure any new design or improvements follows the design system and brand guidelines.
We delivered 54 components in a timeframe of 3 months, this foundation enabled the company to have a unified brand, look and feel within every costumer facing product and lead to OneWeb and OneApp project which was unifying the website and applications through all the markets and 22 countries.