Atherstack 6: Mobile App Design System
Designing for consistency and scalability
Product design
During my internship at Ather Energy, I laid the foundation for an all-new design system incorporating design tokens, style guides and a component library. This work was instrumental in designing and developing their redesigned mobile app, unveiled earlier this year, which is used by nearly 1,50,000 lakh riders & was deemed India's Best Design Project in 2024 by India's Best Design Awards.
The Problem
The old Ather App had several inconsistencies across the app, like the usage of different hex codes for the same elements in different screens, various components that served the same purpose and the style guide was not being followed as it should have been. There were also UI inconsistencies between Android & iOS apps. These problems have been visualised below:
No single source of truth, leading to a large variation of colours.
Lack of a component library, meant there were different components serving the same purpose
The Root of The Problem
Lack of proper communication between Designers & Developers...
The Solution (in simple terms)
Get the developers and designers to speak the same language!
The Solution (using jargon)
Build a design system with a component library and token based design styles that is available and comprehensible to both designers and developers
The Token System
Design tokens contain UI data like colours, fonts, spacing, animations, assets, etc. for styling and building interfaces. Instead of hard-coding static values, a design token contains multiple formats, allowing front-end developers to use the same variable, whether they’re building for iOS or Android.
Each Primitive value (i.e. hex codes, pixel values, etc.) are assigned a nickname based on system nomenclature, this is then referenced by a token determined by the final use case.
Since personalisation was a key feature of the new app, I conducted several iterations of the token system, discussing them in meetings with both the design and development teams. This collaborative process ensured that the system could be implemented effectively and would support the easy addition of new features in the future.
Colour Tokens
As shown in the images above, the colour tokens were meticulously categorised by specific use cases, including backgrounds, general usage, icons, surfaces, text, semantic purposes, and most notably, specific scooter colours.
The scooter colour tokens were particularly pivotal, enabling a new level of customisation in the mobile app. By referencing various primitive values, these tokens allowed the app's colours to dynamically match the colour of the scooter owned by the user, providing a personalised experience and showcasing the need for a complex token system.
Radius & Spacing Tokens
Similar to the colour tokens, there were also tokens for corner radius, spacing, and padding. The team was using a 4-point grid system, but inconsistencies were prevalent in the values used across the old app.
By introducing tokens with simple T-shirt size nomenclature, we ensured scalability and consistency in design. These tokens allowed designers to easily select the appropriate token for a specific use case, automatically applying the correct value as defined by the design system. This approach streamlined the design process and maintained a cohesive visual standard across the app.
Ather Component Library v1
As part of the design system project, I was also responsible for creating the initial version of Ather's Component Library. This library addressed the issue of inconsistent component designs across the app and streamlined the process of re-skinning screens for the new app release.
Given that the design language was not yet finalised, we anticipated future updates to these components. To facilitate easy updates, all components were designed using tokens rather than primitive values. This approach allowed for centralised updates from the source, ensuring consistency across the entire app.
Learnings
Collaboration Skills: Gained valuable experience working closely with a large team of designers and front-end and full-stack developers, enhancing my ability to collaborate effectively.
Leadership and Responsibility: Being entrusted with laying the foundation for a new design system was a unique and rewarding challenge, teaching me the importance of leadership and responsibility.
Advanced Figma Proficiency: Deepened my skills in Figma, mastering tools like auto-layout, variables, and style guides, which expanded my design toolkit.
Understanding Design Systems: Learned the intricacies of implementing design tokens and creating a cohesive design system through hands-on collaboration with developers, gaining insights into system-wide design thinking.
Personal and Professional Growth: Overall, this experience significantly contributed to my growth as a designer, providing valuable lessons in design practice and collaboration.
