Overview
When I joined the mobile team the was very little documentation on guidelines or clear standards when designing user interfaces for mobile. This became an issue when the business needs started scaling and the need for consistency across all product houses.
I was tasked with building a design system. At first, I was faced with the amount of inconsistency that the app had over the years. I had to first do an audit across all the product houses.
The process
Research and Auditing
With research and audit, we found that this was a hair-raising project. A lot of the components did not follow standards or patterns.
We needed to align all the components to Material which is a part design system and framework for the Android platform. We found a lot of legacy components which would need refactoring.
Ideation process
We had to put on our thinking caps and brainstorm our approach to building this design system.
What we did
- Workshops
- Research
- User testing (The designer and Developer)
- Research
- User testing (The designer and Developer)
The approach
I took inspiration from Brad frost Atom's design approach. We looking at every single component from an atomic phase
Results
Design System: Setting Foundations
The foundation of a design system is your spacing and grid system typography and colour system
Iconography
We needed to align the default Material iconography with the custom Iconography designed externally by the agency for the Discovery brand CI.
This was challenging because already the legacy components were using default iconography. We had to rename all the iconography with the legacy naming convention so this replaced the legacy icons.
Components & templates
Design systems are complex and we had only scratched the surface of components that have been built for Discovery. As the requirements come in some components we were required to adjust to fit the business case for scalability, efficiency and consistency.
Results and learnings
We finally had a central place where designers and developers will find information and documentation. The design system was a shift in the process that was happily received. We all worked together to agree on a set of tools and rules that would help us work more effectively. The design system improved the turnaround time for projects and allowed us to consistently deliver high-quality designs.
