Creme Patisserie Website Redesign

About the client

Creme Patisserie needed a website that would honour three generations of baking expertise while meeting modern e-commerce demands. The challenge was to create a digital experience that felt as warm and inviting as their physical store.

Problem Statement

• Outdated design that doesn't reflect the quality of the patisserie's offerings

• Poor navigation makes it difficult for users to find menu items

• Lack of mobile responsiveness

• No online ordering capability, limiting potential sales

Goals

• Converting a traditional family business into a modern digital presence while preserving its authentic charm

• Ensuring an elegant experience across all devices while maintaining visual sophistication

• Implementing a seamless ordering system for baked goods with custom requirements

User Research

Target Audience Analysis
Created three generalized user personas based on typical patisserie customers:

1. Professional: Wants quick online ordering for office events

2. Foodie Enthusiast: Looks for unique, artisanal pastries and detailed product information

3. Celebration Planner: Needs custom ordering for special occasions

User Interviews
Conducted informal interviews with friends and family who frequently visit patisseries. Key findings and implementations:

• Users prefer to see photos of all products - Image-focused grid layout for product catalog to showcase items visually.

• Users want the ability to customize orders - Implemented a step-by-step ordering page for custom orders.

• Users expects to see prices clearly displayed - Clean, modern layout with ample white space

Competitor Analysis
Analyzed websites of local patisseries and national chains. Key findings and implementations:

• National chains have sleek designs but feel impersonal - Used a lux modern colour palette (soft pinks, creams, and violet accents) to evoke a sense of indulgence.

• Local chains did not have online ordering system - Prominent call-to-action buttons for online ordering

Final Design

Navigation

Simple architecture with Quick Shop page link as the first item. Bag lives on the right side as is common in many e-commerce websites. Quick shop helps users to choose a box of a product and go through checkout without any additional selections. Everything packs give customers choice on what they want in an order.

Responsive Design

Scales seamlessly from mobile web to tablets and desktops. Includes all bells and whistles for smartphone users.

Intuitive Ordering System

Once a product is selected, the quick shop pages ensure customers have a smooth experience. Users can choose their pack size and add an optional gift card message. The order summary shows the selections made and also gives user a peek inside the box through the summary image.

Enhanced Product Shop Pages

For everything packs, customers follow the same path. Users can choose a box, have equal number of flavours in the box or choose a custom quantity for each flavour. Users can also add an optional gift card. Lazy loading with NextJS helped with site speed optimization.

Bag page is another example of the customer being shown required information only.

The page also plays an animation before loading the bag.

Reflections

Challenges and Solutions:

1. Challenge: Balancing aesthetic appeal with user-friendly navigation
   Solution: Conducted card sorting exercises to organize menu items intuitively, then validated with user testing

2. Challenge: Creating an online ordering system as a solo designer
   Solution: Researched best practices, sketched multiple user flows, and iteratively refined based on feedback from potential users

Learnings:

• Deepened understanding of e-commerce UX principles

• Gained experience in conducting and synthesizing user research independently

Skill Improvements:

• Enhanced ability to make data-driven design decisions based on user feedback

• Improved time management skills while working on a self-directed project