Case Study - E-Commerce Website

Home

End-to-End E-Commerce Website Design — From Manual Requests to a Structured Catering Platform

Time

2-week design sprint

Role

Product Designer

Team

3 Designers,

1 Stakeholder

Focus

UX Research,

Usability testing,

Web Design

Overview

Research

Ideation

Final Product

Reflection

Overview

„Which local business around us needs a website, and how can we support them as designers?“

We started our e-commerce project with this question. Working as a team of three, we visited cafés, flower shops, and even a small pet clinic in our neighborhood. Eventually, we met Karina, the founder of Merkén, a vegan Latin American kitchen. At the time, Merkén managed its entire online presence through Instagram and WhatsApp. There was no website. We decided to work with Karina and design one together. She described her situation in one sentence: “People love the food, but I’m answering the same questions every day.” This became our starting point.

Overview

„Which local business around us needs a website, and how can we support them as designers?“

Overview

„Which local business around us needs a website, and how can we support them as designers?“

Why Design Matters

As catering requests increased, a website became necessary, not only to clarify information for customers, but also to support Karina’s shift from small food events toward a more stable catering business.

Who the Website Is For

The primary audience is event organizers who need inclusive catering and want to quickly understand what is offered.

The secondary audience is Karina herself, who needs a process that is easier to manage and scale.

Constraints

Since no website existed before, we had to define the full end-to-end concept from scratch in 2 weeks. At the same time, the project timeline required us to focus on flows that supported real catering decisions, rather than designing everything at once.

Goals

Our goal was to design a website that translates Merkén’s food presentation and inclusive values into a clear catering offering, while creating a booking process that feels simple and trustworthy.

About Merkén Vegan Kitchen

“We would like to show the services we offer, like catering... Events are risky...it often rains here in Berlin.”

Merkén is a vegan Latin American kitchen shaped by Karina’s Chilean heritage. Her dishes are colourful, inclusive, and full of life, bringing a sense of celebration to every event.

About Merkén Vegan Kitchen

“We would like to show the services we offer, like catering... Events are risky...it often rains here in Berlin.”

Merkén is a vegan Latin American kitchen shaped by Karina’s Chilean heritage. Her dishes are colourful, inclusive, and full of life, bringing a sense of celebration to every event.

About Merkén Vegan Kitchen

“We would like to show the services we offer, like catering... Events are risky...it often rains here in Berlin.”

Merkén is a vegan Latin American kitchen shaped by Karina’s Chilean heritage. Her dishes are colourful, inclusive, and full of life, bringing a sense of celebration to every event.

Karina, founder of Merkén. All catering requests and questions were handled manually through Instagram and WhatsApp.

Insight from stakeholder interview

The previous workflow was entirely manual and difficult to scale.

As Karina planned to transition from food events to catering, she needed a platform where customers could browse, understand, and request services without relying on constant messaging.

Insight from stakeholder interview

The previous workflow was entirely manual and difficult to scale.

As Karina planned to transition from food events to catering, she needed a platform where customers could browse, understand, and request services without relying on constant messaging.

Insight from stakeholder interview

The previous workflow was entirely manual and difficult to scale.

As Karina planned to transition from food events to catering, she needed a platform where customers could browse, understand, and request services without relying on constant messaging.

Initial Challenge Defined

Team alignment after stakeholder meeting

After the stakeholder meeting, our initial challenge was to align as a team on a website that reflected Merkén’s joyful, community-centered identity, while addressing the lack of clarity and predictability in the catering process.

Initial Challenge Defined

Team alignment after stakeholder meeting

Initial Challenge Defined

Team alignment after stakeholder meeting

User Research

Understanding the specific needs behind catering bookings

Because the website focused on catering, we explored what people expect when choosing catering services and how they experience existing catering websites. We interviewed one of Merkén’s past clients and four participants familiar with booking catering for events. Based on interview insights and team alignment, we selected Lukas as the primary persona to guide our design decisions.

User Research

Understanding the specific needs behind catering bookings

User Research

Understanding the specific needs behind catering bookings

Key insights that guided the research

Real photos and portion visibility matter

“...I prefer when the website gives me all the details without needing to call.”

Simple and clear communication is essential

"...I would spent just a few hours of one day filtering options and then I will send them for approval. That’ll be another day or two days depending on how much time I have before the event.“

Dietary labels are critical

"For me (dietary options) are extremely important. I didn’t want anyonee, vegan, gluten-free, or with allergies , to feel excluded."

Reliability matters for larger events

„...menus that are easy to understand, and delivery right on time. I like it when everything comes already arranged on trays or boxes ready to put on the table.“

User Research Summary

At the end of the research phase, we summarized two core challenges that shaped our direction.

User Research Summary

At the end of the research phase, we summarized two core challenges that shaped our direction.

User Research Summary

At the end of the research phase, we summarized two core challenges that shaped our direction.

Menu options

First, inclusive menu options needed to be presented clearly as both a functional requirement and a key part of Merkén’s identity.

Booking flow

Second, the booking flow needed to create trust and confidence by providing all necessary details upfront.

Problem Statement & How Might We

Event organisers need a simple and transparent way to explore inclusive catering options, because current solutions lack clarity, consistent visuals, and flexibility.

With this problem statement in mind, we asked: How might we help event organizers discover vegan and gluten-free dishes so they can confidently plan inclusive menus? This question helped us focus on clarity and inclusion during ideation.

Problem Statement & How Might We

Event organisers need a simple and transparent way to explore inclusive catering options, because current solutions lack clarity, consistent visuals, and flexibility.

Problem Statement & How Might We

Event organisers need a simple and transparent way to explore inclusive catering options, because current solutions lack clarity, consistent visuals, and flexibility.

Design Objectives

"Menu customization" and "Personalized recommendations"

We used Crazy 8s to explore ideas for our two main challenges. From this process, two key features emerged:

Design Objectives

"Menu customization" and "Personalized recommendations"

We used Crazy 8s to explore ideas for our two main challenges. From this process, two key features emerged:

Design Objectives

"Menu customization" and "Personalized recommendations"

We used Crazy 8s to explore ideas for our two main challenges. From this process, two key features emerged:

Menu customization

Alowing users to select dishes based on event size and dietary needs

Personalized recommendations

Offering curated menus based on event type, number of guests, and budget

Information Architecture

To move forward, we combined multiple inputs, including task flows, competitor analysis, and card sorting. The final information architecture supported both quick browsing and guided decision-making.

Information Architecture

To move forward, we combined multiple inputs, including task flows, competitor analysis, and card sorting. The final information architecture supported both quick browsing and guided decision-making.

Information Architecture

To move forward, we combined multiple inputs, including task flows, competitor analysis, and card sorting. The final information architecture supported both quick browsing and guided decision-making.

Task flow iteration

Card sorting

IA Iteration

Lo-Fi Wireframes & First Usability Test

Based on the IA, I created the lo-fi wireframes. To avoid long discussions around assumptions, we conducted usability testing early.

Lo-Fi Wireframes & First Usability Test

Based on the IA, I created the lo-fi wireframes. To avoid long discussions around assumptions, we conducted usability testing early.

Lo-Fi Wireframes & First Usability Test

Based on the IA, I created the lo-fi wireframes. To avoid long discussions around assumptions, we conducted usability testing early.

Lo-fi testing

We asked five users, including one of Karina’s former clients, to complete the same task:

“You want to book catering for 30 people.

Please think out loud while using the prototype.”

We did not explain the interface or guide their actions.

Key insights from lo-fi testing that guided the iteration

Reflection on lo-fi testing

Testing at this stage helped us move from IA to UI without reworking the entire flow. However, the lack of content and visual clarity sometimes distracted users. In future projects, using a lightweight generated prototype could help bridge this gap.

Mid-Fi Iteration & Testing

In the mid-fi stage, we iterated based on feedback and generated realistic mock data to make the interface more testable.

Mid-Fi Iteration & Testing

In the mid-fi stage, we iterated based on feedback and generated realistic mock data to make the interface more testable.

Mid-Fi Iteration & Testing

In the mid-fi stage, we iterated based on feedback and generated realistic mock data to make the interface more testable.

Mid-fi iteration

Mid-fi testing

Testing again with Karina and users allowed us to evaluate not only the flow, but also wording, reassurance, and trust-building elements.

Key insights from mid-fi testing that guided the iteration

Users expected clearer menu information, stronger confirmation messaging, and more transparency around pricing and requests.

Overall, feedback highlighted the need for simpler navigation, transparency, and trust-building elements.

Final solution

In side the frame of working other two junior designers, I was responsible for organizing the Figma file, maintaining components and styles, and designing the recommendation feature.

Final solution

In side the frame of working other two junior designers, I was responsible for organizing the Figma file, maintaining components and styles, and designing the recommendation feature.

Final solution

In side the frame of working other two junior designers, I was responsible for organizing the Figma file, maintaining components and styles, and designing the recommendation feature.

Landing page, clear ways to get started

From the landing page, users can choose between two clear paths: start a quote or explor the menu, depending on how structured their needs already are.

Feature "Guided quote flow"

Step 1 - Enter event details

Users enter event details and receive menu recommendations.

Step 2 - Receive and customize menu recommendations

Users could receive menu recommendations in details, and also customize by adding or removing dishes

Step 3 - Submit request and confirmation

Once satisfied, all details and pricing are sent to Karina in a structured request.

Feature "Direct menu exploration"

For users who want to explore what they want, the menu can be viewed directly. Each dish includes full information, and catering requests can be sent inside the cart.

Visual design

We developed the visual direction from a moodboard with attributes such as warmth, joy, care, and belonging. Warm tones and food-focused visuals were chosen to reflect Merkén’s identity and sense of inclusivity. We validated these attributes with other designers during reviews.

Visual design

Reflection & Next Steps

Within the two-week timeframe, we focused on core flows. With more time, the next steps would include further high-fidelity testing, additional feedback rounds, and completing the desktop version. Finally, I want to thank my teammates, Rocio and Cata, and especially Karina, for trusting us with her business and sharing her vision.

Reflection & Next Steps

Get in touch

Work with Liwei to make your product more thoughtful and easier to use.

Liweiworks