Homepage redesign and conversion optimization for a food products e-commerce — reducing cognitive load in the purchase path and establishing a scalable UI system for the team.
Overview
Happiness Food is an e-commerce platform for natural and organic food products. The challenge was to design key sections of the website and create the Design System that would become the foundation of the entire product — balancing visual storytelling with a clear, intuitive purchasing journey.
01 — My Role
As UX/UI Designer, I was responsible for designing key sections of the website and creating the Design System that became the foundation of the entire product.
My responsibilities included
Designing responsive user interfaces · Building a scalable Design System in Figma · Defining reusable UI components and interaction patterns · Establishing typography, spacing, color, and layout foundations · Creating component variants and documentation for consistency · Collaborating to ensure design decisions aligned with both branding and development requirements
Website overview — full product experience
02 — Design Approach
The interface balances storytelling with commerce. The visual language was intentionally crafted to communicate freshness, wellness, and premium quality while keeping the purchasing journey simple and intuitive.
Special attention was given to
Clear product hierarchy · Content readability · Responsive layouts · Component consistency · Scalable page structure · Accessibility and usability best practices
Product listing page — category grid and filters
Product detail page
Recipe page — content storytelling
Recipe landing page — editorial layout
03 — Design System
Rather than designing isolated pages, I focused on creating a system that could grow with the business. The Design System standardized every visual and functional element, allowing new pages, campaigns, and product launches to be developed faster while maintaining a consistent user experience.
The system included
Foundation tokens (colors, typography, spacing and grid) · Modular UI components · Buttons, forms, cards and navigation patterns · Responsive behavior · Component variants and reusable patterns · Design documentation for implementation
This approach reduced design inconsistencies and created a single source of truth for future iterations.
Design System — foundations and component library
Bag component — states and variants
04 — Outcome
The final result is a scalable e-commerce platform supported by a robust Design System that enables consistent growth without sacrificing usability or visual quality.
The project demonstrates how a systematic design approach can improve collaboration, accelerate production, and ensure long-term maintainability across the product.
+28%
Homepage-to-product-page click rate
−18%
Bounce rate reduction (30-day post-launch)
18
Components in the new design system