Build a design system from scratch for an eCommerce app
Overview
About
We created a new native Android and iOS app to offer greater technical flexibility, replacing the old React Native version. The app was redesigned to better reflect Cherryz’s updated brand positioning and to enable a customisable feed for personalised content, enhancing the shopping experience.
Challenge
Solution
I led the creation of a new Figma-based Design System, building reusable components and design tokens to simplify collaboration with the engineering team, ensure consistency, and enhance development efficiency. This approach also enabled the smooth implementation of features like Dark Mode and seasonal themes.
Impact
The design system helped the development team work more efficiently by providing ready-to-use components, making the app more consistent and user-friendly. The use of design tokens also made it easy to implement Dark Mode and seasonal theme changes, offering greater flexibility for marketing events and improving the overall user experience.
Role
I was the UX/UI Designer responsible for designing the app interface, building the Design System, and collaborating with the Head of Product and Android/iOS developers.
Timeframe
December 2022 - May 2023
Cherryz is an eCommerce platform offering affordable everyday essentials. The new native app was a pivotal shift, focusing on personalisation and flexibility. Click here to explore more about the brand and the app transformation.
The home screen now features a dynamic grid layout, empowering the marketing team to highlight seasonal promotions and varied content.
This design aligns with Cherryz’s refreshed brand identity, ensuring a cohesive user experience across all touchpoints.
For the MVP, we prioritised essential features and I worked closely with developers to refine each page for seamless functionality.
86% of purchases come from browsing our feed
A major update was the home screen’s grid, allowing the marketing team to customise and promote different types of content. This grid served as the foundation for our core components and visual guidelines, including updated colours, font sizes, and border radii applied consistently throughout the app.
Users now enjoy a tailored shopping experience, while marketing teams can adapt the app content in real time.
Reusable Components for Consistency
I developed a comprehensive Design System in Figma, organising components into categories and adding them to a shared library. This approach ensured visual consistency and faster design updates, especially during seasonal campaigns.
Design Tokens for Flexibility and Speed
Design tokens were a cornerstone of the new system:
Semantic Tokens Focused on Purpose: Instead of naming elements by appearance (e.g.,
pink500), I used semantic names likebuttonBackgroundto make the system intuitive for teams.
Efficient Development with Token Studio: The Token Studio plugin allowed real-time synchronisation of design changes with GitHub repositories, ensuring seamless collaboration and alignment between teams.
Tokens made updates faster, enabled effortless theming (e.g., Dark Mode), and ensured accessibility by supporting adaptive design changes.
I created a dedicated Dark Mode palette using design tokens, enabling a smooth rollout. The system’s flexibility allowed changes in a single place to ripple through the entire design, making updates efficient.
Results & Achievement
Improved User Engagement and Retention: The redesign focused on enhancing user experience, with a customisable home feed that allows the marketing team to adapt content more efficiently. Although we cannot definitively attribute revenue changes, we observed an uptick in engagement and a slight increase in revenue per customer across cohorts. This could indicate that the design changes are contributing to higher user satisfaction and repeat purchases.
Dark Mode: Dark Mode not only reduced eye strain for users but also positioned Cherryz as a modern, user-centric platform.The design system enabled faster, more efficient development by providing ready-to-use components
Our app is now more user-friendly and visually cohesive, thanks to a unified design
The token-based system facilitated quick, seamless Dark Mode integration.
Overall, the design system makes us more productive, improves our products, saves costs, and speeds up development.