Moon Audio Website Redesign
Enhancing Discovery, Purchase Flow, and Brand Experience
Overview
Moon Audio is a high-end audio retailer specializing in premium headphones, cables, and music players. As the company scaled its product offerings, it needed a refreshed digital shopping experience that made it easier for customers to explore products, read expert reviews, and complete purchases with confidence.
Moon Audio needed a consistent and accessible color system and a design system to support its growing digital ecosystem. The design team created a comprehensive palette rooted in brand storytelling, accessibility, and scalability. This color system supports light/dark modes, ensures WCAG compliance, and simplifies decision-making for UI designers and developers alike. I also built out repetitively used components to streamline the feature design process.
Color System: Accessibility First
Every color pairing was tested to meet WCAG 2.1 contrast standards, ensuring legibility and inclusivity:
Text + background combinations were validated across both themes.
Icon and button colors maintain a minimum 4.5:1 contrast ratio.
System encourages large text (18px+) for lower-contrast hues.
Colors are referenced via structured tokens (e.g., brand.blue.600), which allows:
Easy integration into Figma styles
Developer handoff with scalable naming conventions
Consistent usage across platforms
Design Process: A component based Approach
Built a modular component library (cards, navigation tabs, carousels, and grids) to standardize UI patterns.
Applied atomic design principles: starting with buttons, icons, and text styles, then building up to more complex modules like product cards and blog layouts.
Ensured that each component was flexible enough to work across multiple sections (e.g., product cards in cart recommendations, blog previews, and brand showcases).
This approach not only reduced design debt but also allowed the ability implement updates faster and maintain consistency sitewide.
Results
Higher engagement with blog articles due to intuitive filtering and trending topics.
Reduced cart abandonment through a more transparent checkout flow.
Improved customer trust by showcasing recognizable high-end audio brands.