Cashrewards – Design System
Project Outline
In 2015, “Cashrewards”, which launched an online cashback startup business based in Sydney, Australia, has achieved steady growth for many years since its launch, achieving the industry’s No. 1 share in Australia, listed on the ASX in Australia. Starting with their website, they continuously launched new products such as browser add-ons, iOS apps, Android apps, and in-store services, requiring fast-paced design and development. At the beginning of joining the company in 2018, all design files were managed individually, and they were changed due to the coming and going of designers and developers. We migrated our in-house design tool from Sketch to Figma and successfully shared work across the team, including designers, developers and product managers. It was our first experience building a design system from scratch, so I spent a lot of time researching and was in charge of a series of tasks, from building the foundation to building a component library. I created a bridge between five product designers working on different projects.
My role
UI Designer (Design System Lead)
Tools
Figma, Tailwind CSS, Story Book…etc
The Cashrewards Design System
As products and devices continue to diversify in recent years, designs managed individually on a product basis in the past are now being used not only by designers but also by board members, development teams, operation teams, marketing purposes, etc., as it requires a high degree of consistency and documentation so that it can be easily understood and shared. The demand for a design system that systematically connects design and code is increasing, making it an indispensable system for accelerating product development.
Approach
The first and foremost purpose is to help our in-house designers, developers, and those who work with them. Focusing on the following three points, we decided to proceed with constructing the design system.
1. Maintenance
Ongoing maintenance and support of updatable systems.
2. Collaboration
Work collaboratively with other departments to build a better system.
3. Transparency
Everything should be as meaningful, transparent and understandable as possible.
Building the foundation
The first thing we started with was to analyse the foundation items that form the basis of the design system, created a style, and then shared it as a company-wide UI library. Decided on base units, spaces, grids, colour palettes, typography, etc., created a library in Figma, and published it.
Component library
Built component packages for each module and product, and applied them to flow files. The workspace was centralized in Figma’s cloud, and the scattered work files were organized.
Handover to collaborators
Easily create designs using a shared style and component library by selecting and arranging from the side menu.
Multiple designers can work simultaneously using Figma’s branch function as needed.
Result
When joining the company, there needed to be more consistency in the design. However, due to an established style and a reusable component library, it has been changed to a system that can be maintained and operated. Designs can be referenced, updated, and versioned like a Git repository.
Other projects
