Problem Statement
MD3 is the most advanced framework provided by Google for building Android apps. It is set to replace MD2, offering a new set of components and tokens while extending the coverage of well-established design patterns, such as the Text Field component.
MD3 also promises to enhance the user experience and usher in a new era for Android apps. However, many established companies are still not ready to switch to the new framework. This is because they have neither defined a proper token strategy nor developed the capability to implement it effectively.
The following case study is an example of a design system project, and it doesn´t reflect exactly the Pepper workflow I was part of during my past experience. I intentionally omitted some details that should not reduce your ability to evaluate my skills in the matter of Design System Design.
The challenge
However, the need for the company to streamline development work is a significant incentive to take the first step toward change. We wished to adopt the MD3 framework straightforwardly, but a quick and complete transition was not feasible. So, we decided to align with the product team’s pipeline to ship new MD3 components to production.
MD3 provides a set of tools to facilitate adaptation.
I will omit details about the new color method in MD3, as it is outside the scope of this case study (here is the link). However, adopting or merging the new token structure directly with the current system was not an option because the generated palette did not match the Pepper Brand due to the color method (HTC).
My Role
• Collect Android app screens.
• Study the MD3 token system and component documentation.
• Provide component specifications using our tokens.
• Assign the current design system tokens to the new components.
Studing MD3
However, the first step is to study MD3 and list the differences compared to MD2, the current baseline framework on which the Pepper Android design system is built.
Having worked as an App Designer at Pepper for the previous two years, I was very familiar with the Android app and its tokens.
Assigning the Pepper Android Tokens:
I reviewed the MD3 component documentation and reassigned the tokens to align the visual appearance and cover all scenarios.
I used the UI kit for Figma provided by Google but modified the naming convention to match Pepper’s design system and reorganized the component structure accordingly.
The result
The new component sets were successfully implemented on both the new and existing Android app screens. The MD3 components were able to cover more scenarios, enhancing the user experience and streamlining the work for both developers and designers.
Learnings
Enhance consistency
Aligning tokens with MD3 components enhances visual consistency and user experience across both new and existing app screens.
Improve workflow
Streamlining component integration with MD3 simplifies development and design workflows, boosting efficiency and adaptability
