Mimika is a facial wellness app designed to help users tone facial muscles, reduce signs of aging, and improve skin appearance naturally. The product offers guided face yoga routines, massage techniques, and personalized skincare programs.
For this product, I created a workspace in Figma for designers and project managers and built a design system to enable fast development of ready-to-ship product variants.
Year
2025
Category
Wellness
Platform
The Challenge
The primary traffic comes through the web, where rapid A/B testing is essential. To accelerate development for both designers and developers, 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.
Center
1.5
Round
Plan Name
3 MONTHS PLAN
Currency
USD
Old Price
64.99
New Price
29.99
👀 Discounts
Period
day
Period Price
0.33
3 MONTHS PLAN
$64.99
$29.99
$
0
33
per
day
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.
Mimika
Mimika
Youth
Youth
Button
Caption
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, which often differ visually but not structurally. To synchronize these processes between design and development teams, I implemented color and typography tokens in both Figma and code.
Mimika
Sub
Background
Mimika/Eggshell
Content Primary
Mimika/Charcoal
Content Secondary
Mimika/Sage
Feature
Background
Mimika/Peach
Background Alternate
Mimika/Rose
Content Primary
Mimika/Charcoal
Content Secondary
Mimika/Sage
"tokens": {
"--main-background": "#FFFFFF",
"--main-content-primary": "#302C28",
"--main-content-secondary": "#817B70",
"--sub-background": "#F6F4F0",
"--sub-content-primary": "#302C28",
"--sub-content-secondary": "#817B70",
"--feature-background": "#FEEEDC",
"--feature-background-alternate": "#FAECEA",
"--feature-content-primary": "#302C28",
"--feature-content-secondary": "#817B70",
"--accent-primary": "#356B61",
"--accent-secondary": "#A7BEBA",
"--accent-tertiary": "#ED827B",
"--accent-content": "#FFFFFF",
}
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.
❖ Answer Bar
Text
Sub/Background
Sub/Content Primary
Accent/Primary
Acent/Content
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.
Builder
The primary focus of A/B tests is the product onboarding. To enable rapid design and prototyping, 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.
Summary
Through my efforts, a comprehensive design system was developed. It can be used by the entire team — from content managers and project managers to designers and developers. 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.