Accelerate design and development process 3 times with token-based design system.
Beat Technology, based in Norway, delivers a white-label platform tailored for iOS, Android, and Web, focusing on distributing audio and e-book content and their client base comprises some of the most prominent publishing houses globally. Established Design System, Figma libraries and GitHub repository for design settings, streamlining white-label setup and improving efficiency.
Client
Beat Technology AS
Domain
SaaS
Work
Research • Design System • Wireframes • UI • Prototyping
Intro & Task
I began my journey at Beat in 2017, right when the company shifted from being a music streaming service to a white-label audiobooks platform.
Tasked with redesigning Fabel, our first major product, I revamped the app's information architecture, making it more user-friendly, simple, visually consistent and streamlined.
This effort paid off spectacularly within a year, as Fabel not only topped the Norwegian App Store's Book category but was also hailed as Norway's leading audio streaming service, outperforming rivals like Storytell and Ebok.no, according to Dagbladet magazine.
After two years of rapid growing, as our customer base expanded, we encountered scaling challenges. To resolve these issues, we concentrated on harmonizing our design and development strategies.
Framework
Before jumping into the solution development I wanted to connect developers problems to business goals. I decided to use the Lean UX framework to guide team through the design process.
1
Think
Developers feedback
In the first phase, I held a series of meetings with developers to determine problems and what would speed up the process of onboarding a new client.
Identified Problem
With very tight deadlines to onboard a new customer and different parts of the system (e.g. different service monetisation model) it is difficult to maintain consistency at the development level.
Solution
Build token-based design system with a clear area for customisation .
Unify all components thought the system.
Customers feedback
It was not always possible to keep the design simple and aesthetically pleasing by following customer requests for customisation of the appearance
Identified Problem
With very tight deadlines to onboard a new customer and different parts of the system (e.g. different service monetisation model) it is difficult to maintain consistency at the development level.
Solution
Clearly defined customisation, such as: logo, brand colours and brand fonts.
Certain Business Goals
Speed Up New Customer Onboarding
Create a token-based design framework designed to speed up the development process for new clients on the platform.
Harmonise Design Strategy
Revise and improve design approach for colour, typography, sizing and spacing, breakpoints and grids, naming and components.
Improve Clients Brand Presence
Maintain a consistent brand presence in visual communication both in the app and on the website.
2
Create
Token-Based Design System
After evaluating various options, I chose the Tokens Studio plugin for Figma to develop our design system. This plugin enables the creation of tokens in Figma and their storage on platforms like GitHub, GitLab, Azure DevOps, etc. We utilized GitHub for storing these tokens and ensuring their synchronization with the development environments our developers use.
Started from basics. Colour
We've pinpointed five key colors for the platform, each assigned to a specific action. From the primary color, I've developed a spectrum of 9 shades, extending from 100 (Light) to 900 (Dark), with the central color marked as 500.
Colour Tokens Naming
To make easier to use tokens among different themes and element states I decided to use the following naming system for colour tokens.
Colour Token Example
This is what it looks like in practice from design and developer side.
Typography
While our design system extended across three platforms - Web, iOS, and Android - we maintained a slightly varied yet cohesive approach to typography.
To strike a balance between showcasing the brand's identity and ensuring usability in our designs, we opted to use brand-specific fonts for headlines and chose fonts with greater readability for the main text.
Icons
Every icon has been meticulously revised and, where necessary, redrawn to ensure greater consistency.
Components based on tokens
All components for mobile and web platforms have been recreated using design tokens to achieve more consistency across different platforms.
3
Achieved Goals
The overall process has been sped up and simplified.
Developers just need clone repository with core components and parse new tokens.
The design process appears as follows:
Duplicate the general file containing screens along with the foundation library.
Configure the document with new colors, fonts, logo and icons, then publish the library.
Swap the foundation library with the newly created one.
New customer onboarding was accelerated
Create a token-based design system speed up the design development process for new clients on the platform up to 3 times.
Enhanced consistency across the product.
Revise and improve design approach for colour, typography, sizing and spacing, breakpoints and grids, naming and components.
Clients Brand Presence has been standardised
Maintain a consistent brand presence in visual communication both in the app and on the website.
