Using Mimika โ a product focused on facial massage and skincare routines โ as an example, Iโd like to showcase the design system I developed.
Year
2025
Category
Wellness
My Role
Design System Designer
Platforms
iOS, Android, Web
01
Challenge
The primary traffic into the product and mobile app comes through the web onboarding. To validate product hypotheses, we need to launch A/B tests quickly. Although test variations may differ in content and visual style, their structure remains the same.
02
Approach
I created an easy-to-use workspace in Figma that can be used by the entire team โ from content and project managers to designers โ and built a design system to enable fast development of ready-to-ship product variants.
03
Results
The structured system of tokens and components has significantly reduced the time needed to build new onboarding flows for testing and to adapt existing ones for other products. The hierarchical library system keeps all design files consistently up to date.
I designed a modular design system followng several key rules:
Consistency
All elements of the design system must be consistent across every product and have clearly defined construction rules.
Flexibility
Complex components must be easily customizable through Figmaโs functionality so that even non-design team members can adjust them effortlessly.
Adaptivity
Transferring components from one product to another should be possible in a single click, automatically adapting to the visual specifics of each product.
Tokenization
As mentioned earlier, the primary focus of the design system is not only the unification of existing products but also the ability of rapid designing of new variations for A/B tests. Mimika, as a primary web product, offers multiple programs for different categories of users.
In order to unify the design system across all web products, we need to create color and typography tokens that correspond to each variation.
Mimika
Youth
Family
Head
Merriweather
Inter
Body
Inter
Inter
Size
XS
12
12
S
14
14
Line Height
XS
16
16
S
20
20
The structure of the web products remains consistent, and the typographic tokens defining sizes are unified.
However, since the visual style varies between products, the typeface tokens are unique to each one.
Mimika
A/B Test #1234
Sub
Background
Mimika/Eggshell
464646
Content Primary
Mimika/Charcoal
F5F5F5
Content Secondary
Mimika/Sage
C1C1C1
Feature
Background
Mimika/Peach
E5E7E9
Background Alternate
Mimika/Rose
CBFF5B
Content Primary
Mimika/Charcoal
19191C
Content Secondary
Mimika/Sage
4F535E
Color tokens are organized on two levels:
At the primitive level, a base palette of typically 8-10 colors defines the productโs identity. At a higher level, these base palettes are linked semantically. For A/B testing of new programs, first-level colors are not assigned.
To synchronize these processes between design and development teams, I implemented color and typography tokens in both Figma and code.
โ Answer Bar
Text
Sub/Background
Sub/Content Primary
Accent/Primary
Acent/Content
Naming
The tokens are named semantically rather than componently, allowing them to be used freely across any of the teamโs web products without being tied to specific states of elements.
Tokens
โ Components
โ Icons
Builder
Hierarchy
The design system features a nested structure: the Builder is made out of components (buttons, input fields, paywall elements, etc.) and icons, which in turn inherit properties from typography and color tokens.
Components
All components โ from icons to complex elements โ follow a single set of documentation that I authored.
24 ร 24
Create a frame
Leave a clear space of 1.5โ2 pts
Create a vector with an outline
Add round endpoints
Round
๔
and corners roundings
To create a filled option convert it into Outline
โฅ
โ
O
and add a fill inside the icon
Simple elements (icons, switches, checkboxes, etc.) are wrapped into more complex components, which in turn form parts of complete structural units.
Pop Up Title
Pop up message goes here.
Button
Caption
Button
Caption
The Builder
The primary focus of A/B tests is the product onboarding. To enable rapid design, I built an onboarding constructor with extensive customization options, allowing the team to generate tailored onboarding variations for any product in just a few clicks.
The Builder covers all the screens for rapid prototyping โ onboarding question screens, payment options for paywalls, loaders, etc.
The Builder offers extensive customization options โ not only tokens can be switched to match the product or the variant, but component variations within screens can also be adjusted. Together, this enables the creation of onboarding flows for A/B testing in any configuration imaginable.