Local Bakery Responsive Website Design

Shadi’s Sweet Studio is a local bakery shop in Orange County. The goal of the project is to develop a responsive website where customers can explore menus online, also order cakes and custom cakes remotely.

My roles:

UX designer

UX researcher

Duration: January 2022 to February 2022

Understanding Our Users

Persona

The interviews were conducted on street to understand people’s expectations for the website of the custom bakery shop. The data were organized to the persona as below, Kate represents users who want to have access to order custom cakes online so they could have more time to customize their cakes with a flexible schedule.

 

Goals

  • Explore Menus

    Users expect to access menus online, so they don’t have to go in-store to know their options.

  • Order Online

    Users like to order cakes online so they don’t have to arrange times to go to the store.

  • Cutomize

    Users want to customize cakes online, which is more flexible for users’ schedules and locations.

  • Track Orders

    Users tend to track the instant processes of their orders and get notifications for pick-up.

Start Of The Design

  • Sitemap

    The site map demonstrated the organizational path of the responsive website, which is also a guideline for creating pages in the next step.

  • Paper Wireframes

    The sketches are the ideas for designing the responsive website, the parts marked with stars are the elements that were decided to use in the digital wireframes.

  • Digital Wireframes

    The digital wireframes include the pages outlined in the sitemap, such as shopping categories, custom cake page, gallery, footer, cart, etc.

  • Low-Fidelity Protoype

    The low-fidelity prototype represents the user flows of ordering a cake. The paths include ordering a cake from the menu without customizing, and ordering a custom cake.

Usability Study Findings

The research was conducted in a cafe around the neighborhood, the participants were people who knew or had purchases in Shadi’s Sweet Studio. Four prompts were listed in the survey, for example, “Go to the Homepage, choose Custom Cake, then try to customize a cake from the menu, and add the custom cake to the cart”. After analyzing the data, the following insights were found to develop the high-fidelity prototypes and potential improvements for mockups.

  • Contents

    Users spent more time on the process of filling delivery addresses and felt weird to text full addresses in a single box.

  • Checkout Process

    Users indicated that they couldn’t submit the order, or were not sure they submitted the order successfuly.

  • Track Order

    Users felt disappointed when they couldn’t find where they could track their orders.

Refining The Deisgn

Mockups

With the findings of the usability study, the mockups improved the checkout process by adding a confirmation page, which shows the order is placed, the summary of the order, and access for tracking the order.

 

Future Steps

Further usability studies will be conducted in the future to ensure the app meet users’ expectation, the pain points are addressed, and the user flows are smooth.

Follow me to get updates for future steps.