Koko Chu Chocolaterie & Patisserie

This project was a 6-hour design sprint aimed at improving the user interface (UI) and branding of an e-commerce website for Koko Chu. The primary objective was to transform the website into a visually appealing and emotionally engaging experience while testing my ability to quickly deliver a polished, cohesive design.

Project Outline

Design Sprint | 6 hours
Homepage Redesign
Tech Stack: Figma

First Impressions

The original website failed to make a lasting impression. Despite being a premium chocolatier, the website lacked emotional appeal and failed to evoke the right feelings—hunger, indulgence, and luxury.

Key Problems

1. Forgettable design: The website did not stand out in a competitive market.
2. No emotional connection: Visitors weren’t drawn in by the look or feel of the brand.
3. Unclear messaging: The visual hierarchy and structure made it hard to scan and digest information.

The Challenge

To solve these issues, I needed to establish a strong visual identity that immediately resonated with users. The project focused on:

1. Developing a mood board: I started by exploring color schemes and emotional cues to evoke luxury and indulgence.
2. Creating a cohesive brand: My goal was to align the site’s visuals with the chocolatier's premium positioning.

Objectives

1. Improving color and typography: These foundational elements were crucial to creating a polished and rich brand.
2. Evoking feelings of indulgence: The design had to trigger an emotional response that aligned with the high-quality, artisanal products.

The Process

Brand-Centric Approach

Typography & Hierarchy

Mission-first design: focused the design around the brand and mission, ensuring that the website immediately conveyed indulgence.
‍
Hero section: I used bold, high-quality imagery in the hero section to make a powerful first impression, setting the tone for the rest of the site.

Clean fonts: I retained the existing fonts but introduced a clear hierarchy for H1s, H2s, and body text.

‍Enhanced readability: The new hierarchy made the site easier to scan, helping users quickly find key information.

Visuals & Color Scheme

User Experience Enhancements

Rich color palette: I opted for deep, luxurious tones like dark chocolate and gold accents to evoke feelings of indulgence and premium quality.

‍High-quality product images: I integrated professional images that showcased the craftsmanship of the chocolatier, making it clear that this was a serious, high-end brand.

Clear destination: I used the typography hierarchy to create obvious visual destinations in each section, ensuring a smooth flow for the user.
‍
Visual cohesion: The color scheme, typography, and imagery worked together to present a unified brand, leaving a lasting impression on users.

Before

After

Learning Outcomes

This sprint utilized several key design principles:

Planning a cohesive brand strategy: A well-defined visual identity leads to a more memorable user experience.
Typography is impactful: A clear typographic hierarchy can transform a website’s usability and elevate the overall design quality.
High-quality visuals matters: Images and color schemes play a critical role in evoking the right emotions and aligning with the brand's mission.

Next Steps

In future iterations, I plan to:

Incorporate competitor insights: Drawing inspiration from competitors, I’ll look to add interactive elements and creative layouts to further enhance the user experience.
Explore micro-interactions: Subtle animations and interactive product showcases can further engage visitors and strengthen the emotional connection with the brand.