Amia Bakery

Intuitive Check-out Process for Bakery Website

 
Screen Shot 2021-08-06 at 9.56.18 PM.png
 

Project Overview

Project Background

Amia Bakery is a small bakery located in Fremont, CA that aims to provide cakes and cupcakes geared towards those with unique dietary needs. Examples of dietary options they provide include: gluten-free, eggless, and sugar-free.

Challenge

Users need Amia Bakery’s website to be intuitive and provide visual feedback while presenting different food options.

Solutions

• Design a responsive and intuitive ecommerce website that enables customers to view what they are purchasing prior to completing the checkout process

• Establish a logo, brand identity, and design

Project Scope

Responsive ecommerce website, logo design, branding

Tools

Figma

Role

UX Designer

“Part of the fun of going to a bakery is seeing and smelling the pastries. The fact that you couldn’t do this on the website was a problem.”

-Amia Bakery Patron

 Empathize

Research Plan

Prior to initiating the research process, I wanted to determine the research goals, questions, assumptions, and methodologies, that would be implemented in the process. This provided a framework to approach the research process with.

Research Methodologies

Research Goals

  • 1-1 interviews (primary)

  • Competitive Analysis (secondary)

  • Market Research (secondary)

To determine the primary use of the website

  • To determine the competitors of this bakery and their strengths and weaknesses

  • To determine the selling points and pain points of this business

  • To understand the users desires (online and in-person)

Research

Market Research

Market Research was conducted in order to have a deeper understanding of the background, market size, and trends. As this project evolved I gathered additional data for the demographics to have a more targeted approach to creating my provisional personas. I analyzed the information gathered from my market research in order to have a thorough understanding of the problem and user base.

Demographics

  • 87% of Millennials and Gen Z think about eating dessert at least once a day.

  • After cookies and brownies, those who are aged 18-24 and 45 and older prefer candy. Those who are between 25-34 favor cake and candy equally.

  • Greater than 60% of Millennials and Gen Z purchased sweet goods in the past week.

  • Gen Z is a leader in online ordering services, with one study showing that 34% of 18-24 year olds used an online delivery service between March and April 2020.

  • 40% of Millennials, 33% of Gen Xers and 25% of Baby Boomers buy organic private label foods/drinks behavior

Trends

  • As the economy rebounds from the COVID-19 pandemic, there is an expected increased demand as stores reopen, and industry profitably is expected to increase at an annual rate of 0.6%.

  • As for the food trends, baked goods – such as cakes and cookies--tend to be high in fat and sugar. These low-nutritional content foods are associated with poor health outcomes. Thus, a shift towards baked goods with higher nutritional value has been of recent focus.

  • 40% of individuals state that food and beverage purchases are the most vital to taking care of overall health

  • 28% have dietary restrictions that influence purchasing behavior

Provisional Personas

Based on the Market Research I had conducted, I was able to develop provisional personas to reflect the three user groups that represent Amia Bakery’s patrons. This process enabled me to better understand the goals and pain points of these groups, and determine who to recruit for my interviews. For this particular project, we have The Sweet Tooth, The Health-Conscious Millennial, and The Bride as the main customers of Amia Bakery.

The Sweet Tooth 6-40 years old

Goals

  • Comfort food when stressed

  • Explore nearby bakeries for fun

  • Low cost food

Pain Points

  • Aesthetics matter

  • Need study space

  • High quality treats are crucial

Screen Shot 2021-07-18 at 10.52.27 PM.png

The Health-Conscious Millennial 25-40 years old

Goals

  • Having vegan sugar-free and eggless dessert options

  • Being able to swingby after work

  • Reasonable prices

  • Great customer service

Pain Points

  • Even though the food is healthier, taste still matters

  • Need to be able to have quick service with a busy schedule

Screen Shot 2021-07-18 at 10.52.34 PM.png

The Bride 25-30 years old

Goals

  • Purchase a wedding cake

  • Having enough dessert for wedding attendees

  • Having an aesthetically appealing cake for the wedding photo album

Pain Points

  • Aesthetics are crucial

  • High-quality treats are essential

Competitive Analysis

I also completed a competitive analysis in order to determine the strengths and weaknesses of both direct competitors and indirect competitors. The direct competitors reflect competing companies that offer the same service (Cakes and Bakes, Tous les Jours) whereas the indirect competitors offer similar services (Starbucks, Nation’s Giant Hamburgers). I conducted personal research and analyzed each of these and was able to uncover positives and negatives of each.

A couple takeaways from this process are that: (1) All of the direct competitors provide a responsive website and use pictures to display the different food options to choose from. However, none of them cater to as many different dietary restrictions as Amia Bakery does. (2) All of the indirect competitors also provide a responsive website and have a large variety to choose from. However, like the direct competitors, they do not cater to as many different dietary restrictions.

Indirect Competitors

Direct Competitors

Component 1 (20).png

Strengths

  • Responsive website

  • Pictures accompanying different options

  • Online pre-ordering and curbside pickup

  • Prices listed online

  • Large variety to choose from

Weaknesses

  • Limited to indian cakes

  • No custom orders

  • No vegan, eggless, or sugar-free options

Screen Shot 2021-08-12 at 10.45.24 PM.png

Strengths

  • Large variety to choose from

  • Pictures accompanying different options

  • Responsive website

  • Roll cakes in addition to traditional cakes

Weaknesses

  • Online orders available in select locations only

  • No vegan, eggless, or sugar-free options

Screen Shot 2021-08-13 at 12.50.48 AM.png

Strengths

  • Responsive website

  • Pictures accompanying different options

  • Nutrition facts listed online

  • Food/drink delivery

  • Large variety to choose from

Weaknesses

  • No vegan, eggless, or sugar-free options

Screen Shot 2021-08-12 at 10.12.20 PM.png

Strengths

  • Responsive website

  • Pictures accompanying different options

  • Online ordering

  • Cakes based on occasion

  • Large variety to choose from

Weaknesses

  • No vegan, eggless, or sugar-free options

  • Limited hours on weekdays

1-to-1 interviews

The provisional personas that I had created served as a guide to determine who to recruit for my 1-to-1 interviews. I wanted to conduct these interviews to determine motivations, frustrations, goals and needs of individuals who fall in the target demographic. I aimed to use open-ended questions in order to encourage story-telling and obtain as much information as possible. These interviews were conducted remotely due to COVID limitations. This process would be the precursor to completing the research synthesis via an empathy map.

Examples of questions posed included:

1) What entices you about visiting Amia Bakery?

2) What do you appreciate about other bakeries that you may not be able to get from Amia Bakery?

3) How do you feel about ordering bakery items online?

4) Tell me about how your symptoms impact your day-to-day life

Participants

  • 6 participants

  • 4 female, 2 male

  • Patrons of Amia Bakery

  • 18-75 years old

Empathy Map

Synthesizing the information gained from my interview transcripts was the next step. I referenced the transcripts to determine patterns, which I then clustered into different groups, and finally translated into three insights and needs. These needs enabled me to have a deeper understanding of the user persona. Analyzing the typical Amia Bakery customer was a precursor to developing the user persona as well as HMW Questions.

Needs

1) Customers need Amia’s website to be intuitive

2) Customers need access to different food options

3) Customers need Amia Bakery’s website to have pictures

Insights

1) Customers appreciate being able to quickly access information on Amia’s website

2) Customers strive to attain unique desserts

3) Customers appear to have difficulty with a lack of visuals

Persona

After completing my empathy map, I created my user persona based on the information that I had gathered. This process enabled me to develop a representation of the typical Amia Bakery customer with the goals, frustrations, motivations, and needs in mind. I would be keeping this individual in mind as I progress through the subsequent stages of the design process. For this particular project, I have Becca, who is a 25 year-old resident of Fremont, CA.

Becca Williams, 25, Fremont, CA Product Manager

Screen Shot 2021-07-12 at 8.18.30 PM.png

Goals

  • To have high quality baked goods

  • To be able to access a bakery website that is organized with appealing typography

  • To have the option of vegan, sugar-free, and additional variety foods

Frustrations

  • Poor customer service

  • Lack of aesthetically pleasing interior

  • Expensive bakery items

Brand Affiliations

Screen Shot 2021-07-12 at 9.07.19 PM.png
Screen Shot 2021-07-12 at 8.55.08 PM.png

Needs

  • To have excellent customer service

  • To have access to a responsive website with pictures

  • Moist bakery foods

  • Short wait times

Motivations

  • To have access to novel, fresh foods

  • Looking for cakes for special occasions

  • Accessing a bakery that is close by

 
Screen Shot 2021-07-12 at 8.56.19 PM.png

Define & Ideate

POV Statements & HMW Questions

After developing the user persona and empathy map, I had insights and needs that I could create POV and HMW statements from. I translated the insights and needs into each POV statement from Becca’s perspective and finally created HMW questions. These HMW questions were the precursor to the brainstorming process.

POV

1) Becca needs Amia’s website to be intuitive because she appreciates being able to quickly access information

2) Becca needs access to different food options because she strives to attain unique desserts

3) Becca needs Amia Bakery’s website to have pictures because she has difficulty with a lack of visuals

HMW

1) How might we make Amia’s website more intutive for Becca?

2) How might we help Becca have access to different food options?

3) How might we modify Amia Bakery’s website so that it has more pictures for Becca?

Brainstorming

With the HMW questions formed, the next step was to develop potential solutions to the different questions posed. This brainstorming process involved the mind-mapping process, where there were two rounds of three-minute brainstorming for each question posed. The most realistic solutions were further developed in subsequent steps. Below displays solutions to the four HMW questions.

Strategy

Business & User Goals

After the brainstorming process was complete, I could then focus on creating a venn diagram of the business and user goals. I wanted to then utilize the project brief to extract the business goals, determine the user goals based on the persona, and establish the similarities between both. This process enabled me to determine which features to prioritize. In this particular case, both sides wanted a responsive website and for foods that cater to particular dietary needs. These would be considered when creating the product feature roadmap.

 

Feature Roadmap

While referencing the business and user goals, I was able to create a product feature roadmap in order to determine the priorities for the different features I wanted to incorporate. Factors that I assessed included the time intensity of each, the number of goals addressed, and the importance of each feature. This was the precursor to creating my site map. This process assisted with creating a Minimal Viable Product (MVP). This process enabled me to understand where to focus my efforts and provided a clearer picture of the next steps. Furthermore, I was able to determine that features such as the shopping cart and about us section were critical components of this website.

 

Information Architecture

Sitemap

I referred to my product feature roadmap in order to create the structure of the sitemap. This involved creating the main pages and subpages to reflect the layout of the website. This was a precursor to the wireframing process and also serves as a reference when creating task flows. For this sitemap, I was able to determine a number of main pages including the order, FAQ, and about us pages. Furthermore, the menu page would branch into the subpage for cakes and cupcakes. Having this structure laid out was extremely helpful in completing the proceeding stages.

Interaction Design

UI Requirements

I created a UI Requirements document that outlines different tasks to be completed for the task flow. The UI Requirements outline what elements are needed for each page in order to ensure that all essential components are included. It includes both the high level requirements as well as more detailed requirements of what would exist on each page.

Task Flows

While referencing the UI requirements, I created two task flows to reflect the different steps a user would do in order to complete different tasks. These steps reflect both the pages and actions that a user would undergo. The first task involves Becca learning more about Amia Bakery via the “about us” section and the second task involves Becca ordering the Amia Bakery’s Princess Cake.

User Flow

After completing the task flows, I combined them using Figma and created a user flow in order to demonstrate the different pathways that Becca could take. I considered several different avenues that Becca may undergo in order to analyze all possibilities. This is a much more comprehensive representation of the different actions and webpages that may be included.

Wireframe Sketches

I was able to use the task flows I had created in order to develop low-fidelity wireframes. With the site map and task/user flows completed, it was time to create the wireframe sketches. During this process, I referred to competitor websites such as Tous les Jours and Nothing Bundt Cakes. These wireframes also considered novel features that would undergo usability testing in order to determine the success of the incorporated elements and structure. These wireframes present the home page, menu, cakes page, shopping cart, and check out.

Home Page

Menu

Menu Page - Cakes

Shopping Cart

Check Out

Mid-fidelity Wireframes

After creating the low-fidelity wireframes, I wanted to digitize what I had drawn by creating midfidelity wireframes. I utilized Figma software in order to create these. For the Amia Bakery website, I wanted to ensure that the featured products were easily accessible and with a description and that the website followed an existing schema, or mental model, of how such pages would be expected to look like. Keeping these elements in mind, I was able to create the midfidelity wireframes prior to moving on to the high fidelity wireframes. Examples of the different screens are presented below.

Home Page

Menu Page

Check Out

Customize Size

Selection

Responsive Mid-fidelity Wireframes

I also created the mid-fidelity wireframes in a responsive format so that they could be utilized for desktop, tablet, and mobile. This would provide increased flexibility and access to the website despite the type of device being used. The responsive version of the home page is displayed below in all three formats.

Desktop

Desktop

Tablet

Tablet

Mobile

Mobile

Prototype

It was essential to also create a prototype in order to conduct usability testing and determine the functionality of the website. Thus, I used the Figma software to create connections between different frames and enabling users to complete different tasks. With the connections established, I could then proceed to create a usability test plan, and subsequently conduct a usability test, in order to determine how successful the integration of the feature was. The different Amia Bakery wireframes are presented below along with their connections.

Usability Testing

Usability Test Plan

After completing my prototype, I wanted to establish a clear usability testing plan in order to determine the guidelines for the usability test. This would include the objectives, test methodology, test method, participants, and tasks. Furthermore, a script would be created in order to determine what would be stated in each usability test. Once the usability test is complete the findings will be synthesized with an affinity map.

Methodology

Evaluative Research

Objectives

1. Determine the user's ability to complete four user scenarios
2. Identify user's pain points
3. Determine each user's thought processes while completing tasks 4. Improve design functionality based on feedback

Method

Think aloud usability test. This usability test will be conducted via Zoom and/or Skype. There will be an audio recording of each user stating aloud their thought processes while completing each task.

Tasks

  • Task 1: View the Quality of Life after COVID-19 bulletin board

  • Task 2: Turn on push notifications

  • Task 3: View the Coping with Long-haul Fatigue article

  • Task 4: Sign up for the Coping with COVID Support Group

Participants

Number of participants: 5-10
Age range: 25-40, 55-74 years old Gender: Female and male
User traits: Has had COVID

 Affinity Map

In order to synthesize the information that I had gained from the usability test, I created an affinity map. Each participant is reflected with a unique post-it color and if multiple individuals had similar comments, those comments would be stacked together under the respective quote. This affinity map reflected patterns, insights, and recommendations. The recommendations were then prioritized based on the number of participants who had a problem with each issue. The priority issue in this circumstance was confusion with the menu and the secondary issue was following the right procedure to complete the check-out process.

 
 

Observations

1) Confusion with menu

2) Considered clicking “photo gallery” to place order

Recommendations

1) Remove additional page that separates “cakes” and “cupcakes.” Consider removing “menu” link and replace with “cakes” and “cupcakes” on nav bar

2) Implement an “order now” CTA. Also consider displaying this prominently above the fold to maximize visibility and revenue

Insights

1) 5/7 expressed confusion with menu page (primary issue)

2) 3/7 explicitly stated confusion over ordering process (secondary issue)

Revision to Mid-Fidelity Wireframes & Updated Frames

With the affinity map complete, I now had direction as to what changes needed to be made in order to improve the user experience.

The modifications made include: (1) removing additional page that separates “cakes”" and “cupcakes”; (2) implementing an “order now” CTA. Based on additional research, I added separate wireframes for purchasing cupcakes vs. just browsing, so that the website would be in congruence with competitor websites.

(1) Remove additional page that separates “cakes” and “cupcakes.” Cakes and cupcakes are shows in nav bar (left). (2) the “order online” CTA in the top right corner was implemented above the fold in order to improve the ease of ordering online and improve user experience.

 
 

After the revisions were finalized, I was able to create a final set of mid-fidelity wireframes. Examples of these wireframes are presented below.

Home Page

Home Page

Selecting a Cake for Checkout

Selecting a Cake for Checkout

Checkout Process

Checkout Process

Menu Page

Menu Page

Select Cake Size

Select Cake Size

Moodboard

After the updates to the midfidelity wireframes were complete, it was now time to establish the look and feel of the website. This was done by determining attributes that would be affiliated with the brand and distributing those attributes within the different categories of color, logo, layout, graphics, and typography. This was done on Pinterest via a moodboard, with pins for each distributed amongst the different categories.

Brand Logo & Style Tile

By referencing the moodboard, I was able to create a logo that reflected the attributes of “unique” and “pleasant.” After finalizing my design through the sketching process, I was able to digitize it and add it to the style tile. The style tile as a whole was created with reference to the moodboard and the associated pins. It includes the additional visual design elements of color, graphics, and typography, which would be incorporated into the website.

High-fidelity Wireframes

After establishing the look and feel of the app through the mood board as well as making necessary revisions, I was ready to create the high fidelity prototype. This was completed by referencing the mood board and style tile and incorporating the essential visual design elements in order to have a high fidelity prototype. Examples of the final wireframes are shown below.

Home

Menu

Home with drop-down

Check-out

Our Story Page

Check-out with Selection

UI Kit

I finally created a UI Kit in order to further demonstrate the visual design. This would show how other critical UI components would appear in the high fidelity wireframes, including the navigation, colors, typography, color palette and more. This UI Kit is a valuable tool that would be utilized when making modifications to the app and would allow for clear communication to other disciplines as to what the different elements involve. 

 
 

High Fidelity Prototype

I wanted to finally develop a high fidelity prototype that was in congruence with the overall brand and visual identity that Amia Bakery aimed to establish. This functioning prototype provided a means for users to complete the different tasks that were laid out.

Summary

Next Steps

  • After completing my work, it was now ready to be programmed by developers.

  • There will likely be updates that would need to be made to the website as modifications are made to the menu.

Reflections

This process enabled me to have a deeper appreciation for the usability testing process. I was able to uncover a number of important changes that needed to be implemented in order to have a more functional, efficient, and intuitive website. It also enabled me to learn how valuable it is to reference competitor websites, as doing this greatly enhanced my ability to create a better final end product.

Craving for more?

 
Screen Shot 2021-08-16 at 1.46.25 AM.png

Spotify

Adding a feature to Spotify’s existing platform

Screen Shot 2021-08-16 at 1.49.59 AM.png

COVID Wellness

End-to-end COVID management app