Ladyfingers cakes has been a family local business located at San Leandro, CA, since 1979. They work with each customer to develop a unique design and pride themselves in making cakes the way customers want it. Last year, they launched their website and hoped to gain more attention from their customers; however, the outcome did not meet their expectation. Ladyfingers cakes wish to take another chance to redesign and build their brand in order to gain the trust from their customers.

Research goal

  • Pinpoint customers ordering online experience
  • Understand different demographics preference in order to adjust the balance for the website
  • Identify buyer preferred cake options
  • Identify competitors in the online store including website theme, color, functional menu, pictures, ordering online experience etc

Provisional Persona

Competitor Analysis

I chose 2 local bakeries and 3 chain bakeries as the competitor research. This research base on competitors website design, online order system, and menus. Most of the competitors have a pretty clear brand. The better one has great websites that are easy to understand and speak to the quality of the bakery. Their menu is very functional. The way the designers structured allows users easy to understand even if there is a large selection.

Local Direct Competitors

Chain Direct Competitors

View Detail

Conduct Research

5 customers, 3 females and 2 male have participated in this 1:1 interview about their online ordering experiences, habits and thoughts. They are from age 21 to 35. 3 of the interviewees have experiences ordering cakes online. 5 of them have experiences of using Apps or ordering food from a website.

We interview in person and through the phone. 5 customers answered the survey that we created in order to understand users' behaviors. Based on their comments, we are able  to collect data on how we can improve the e-shopping bakery website and also provide a better online ordering experience for Ladyfingers Cakes. Here’s the empathy map thats collected from the interview

Gain / Goals

  • A functional menu should include pictures, cake description, and ingredients
  • Have a section of seasonal page, wording like “limited time/ edition” make them feel exclusive
  • Decided their options based on Yelp review
  • Communication with the Bakery


  • Like to go to the bakery in person because they like to smell, see the cake
  • If their order got cancel after they already purchase the item they will never visit the store again (feel like being cheated)

Original Website Survey

I created a survey to focus on redesigning Ladyfingers Cakes based on their original website. Questions including navigation menu, homepage organized, store information, order process, and menu improvement. 6 participants have completed this survey and most of their options are similar on the issues from the website.After this survey, I learned that the original website pictures quality tends to decrease users from buying cakes from Ladyfingers. And now, we are able to highlight which parts of the website we should first focus on.

Persona Development

For my research, I gathered all the information and created the following persona. Monica was the candidate that I was designing for and for ideal users for Ladyfingers cakes.

Site Map

I designed this site map to maximize layout efficiency, paying special attention to the amount of information disclosed on each page so users wouldn't be overloaded. Also, when I organized my site and navigation header, I tried to keep it simple and direct so users would be easy to find the page they are looking for.

Task Flow / User Flow

Create a seamless flow that takes into account all possible user direction. This task flow tells me details of users’ options and the paths they will be able to take. Also help me to map out the expected journey of a users who enter the webpage, from select, purchase, and, check out.

View Complete User Flow

Lo-Fi Wireframe

When starting to create the wireframe, I want to focus on a big few CTA on online order to cater users attention. I pick couples most important page from the website and mapped out how I initial wanted the screens to flow.


Navigation / Footer

Menu page

Category page

Product page

UI Kit

To bring the wireframes to life, I created a UI Kit This will be used as a guideline for the Ladyfinger cakes website.

Hi-Fidelity Prototype

View Prototype

Usability Testing

I recruited 5 participants to conduct the usability testing. They all had prior experience online ordering which gave them a certain expectation of how the process should flow. I ask each participant to perform a task. Through out this testing, I was able to discover uses’ confusion, pain points and further needs.



Affinity Map


After iterations from the usability tests, more testing will be conducted to ensure the ease of use and web accessibility for Ladyfingers Cakes.

More features that the organization could benefit from include:

Thank you for Watching!