Client
Perla Helsa
Role
UI/UX Designer
Industry
E-commerce
Design system
E-commerce
SaaS
Bootstrap 5
Web
Design System for Perla Helsa
Building a design system for an e-commerce platform from scratch
46%
faster page assembly after system launch
+12.3%
sales increase after new features shipped
50+
components built across 4 breakpoints
Overview
Perla Helsa is a Ukrainian wellness brand that develops science-backed dietary supplements and vitamins. The company focuses on creating high-quality, bioavailable formulations for beauty, immunity, energy, and overall health, combining evidence-based nutrition with premium ingredients and modern e-commerce experiences.
The problem
Perla Helsa had no design system. The product had grown organically — with inconsistent color shades, multiple font variations, and no shared component library. Every new page or feature required designers and developers to reinvent the wheel, slowing delivery and creating visual inconsistency across the store.
My Role
I led the design system end-to-end — from audit to implementation. Worked closely with developers on the Bootstrap 5 migration and mentored a junior designer throughout the process.
Process
How I built it 1. Audit first. Started by cataloguing every color, font size, and UI pattern used across the existing product. The inconsistency was significant — dozens of color variations, no naming convention, no reuse. 2. Styles → primitives → components. Built the system in layers: color and typography tokens first, then primitive elements (buttons, inputs, tags), then full page-level components across 4 breakpoints — desktop, laptop 1440, tablet, and mobile. 3. Developer handoff. Partnered with engineering on the Bootstrap 5 migration — structured component logic to map cleanly to their framework, reducing inconsistencies and simplifying handoff. 4. Iterated with the team. Measured page assembly time before and several months after the system launched. 46% faster — measured by tracking how long it took to design and hand off a full page.
Design decisions
Example: product card redesign The original card mixed visual and functional elements without hierarchy — benefit tags floated over the image, the CTA wasn't prominent, and the discount mechanic wasn't visible until checkout. In the redesigned version, I separated the tag layer from the content area, made the quantity selector with discount visible directly on the card, and gave the primary action a full-width button — improving both scannability and conversion.
