Sweet Responsive Website

Disclaimer: This is a fictional project under the Google UX Design Certificate course.

Sweet Cafe is a bakery that sells cakes and cupcakes and also accepts orders for events catering and whole cakes for weddings and events.

The goal of this project is to design a flow to order cakes from Sweet bakery.

Research

Online survey

I conducted online surveys to figure out who exactly are the potential customers and what are problems they face while ordering cakes from a bakery online.

Assumption

Potential users are first-timers with ordering bakeries online and the main issue they are facing is not knowing how to.

Participants

5 professionals and students

Setting

Survey, remote

4 Questions

5 ~ 15 minutes

Conclusion

Findings support against the initial assumption about Sweet’s potential customers, as most were familiar with ordering pastries online.

In addition, it was also revealed that the customers were doubtful of the quality of the cakes and they felt the reviews were “hard to consider”.

Defining Problem

Personas

To understand the target audience better, I created a user persona.

Monica

I plan gatherings often

Goals

Usually order bulk pastries and desserts in online for events

To serve good bunch of pastries for the party

Frustrations

Limited customization

Unsure of quality

Reviews credibility

Problem statement

To set the direction for the design process, I developed a problem statement that outlines the user's pain points or needs:

Monica likes to host parties and needs to customize the cake according to the party theme because she wants to serve the guests tasty desserts that suit her party theme.

Solution Ideation

HMWs

HMWs method was used to generate ideas and solutions, as it is a simple but effective way to reframe a problem into a question:

HMW make the cake customizing a fun process?

HMW make the party organizing process even more enjoyable?

HMW remove the process of ordering the cake?

From the list of HMWs, I narrowed down to two HMW statements that are broad enough to be creative and narrow enough to spotlight the issue:

HMW simplify the ordering of custom-made cakes?

HMW help the baker to easily come to term with what the customer wants?

Crazy eights

I used the narrowed-down HMWs as inspiration and conducted a crazy eights exercise to quickly generate a range of ideas and solutions.

Crazy eights

Sweet’s competitors

I also conducted a competitive audit of other online bakeries that serve both event orders and regular orders, to gain a better understanding of what already exists in the market.

Prototype

Information architecture

Before moving on with prototyping, I created an information architecture (IA) that organizes and structures the content and information in a way that is intuitive and easy to navigate for users.

Paper wireframes

My goal while drawing paper wireframes was to simplify and integrate the ordering process for the users as much as possible.

Paper wireframes

Design iteration

Afterwards, I iterated quickly between wireframes, prototypes, and user testing.

First issue: the listing layout; users found it hard to browse the product one by one.

Before user testing

Before user testing

After user testing

After user testing

Second issue: the users found the product details to be lacking.

Before user testing

Before user testing

After user testing

After user testing

Third issue: the users were confused about the purchasing process.

Before user testing

Before user testing

After user testing

After user testing

Responsive design

Desktop

Mobile

Reflection

In this project, I tried to venture into new content display formats. After many design iterations, I was able to incorporate new to old while keeping some elements classic, eg. the listing page. I was able to put the design principles I have learned into real-life practise during this project.