Sweets Shop Responsive Site

Role: Research, UX Design, UI Design, Prototyping
Timeline: 2 Weeks

Background

Sally’s is a local bakery that sells super delicious cakes and other bakery items. They currently have an informational website showcasing the items they sell in the bakery, menus, custom order forms, along with specials and announcements

Problem

Sally’s website contains a lot of information but is not well organized, making it hard for a user to find information and no online ordering.

Discover

📑

Research Plan

I created two plans to attack the research. The first was a competitor analysis and the second was user interviews. My main goal with the interviews was to find what users expect to see on a bakery site, what their needs and frustrations are when placing special orders for cakes and how do they navigate those sites to find what they need.
‍
After some discussion, the user interviews were instead replaced with secondary research to determine what information is most relevant for users when they are making a purchase decision. After finishing the research, I see how it was a beneficial process combined with the competitor analysis.

📖

Secondary Research

I learned users need to see items that are customizable and use progressive disclosure to minimize the amount of information shown at one time. Even the checkout information I found, like minimizing the number of fields and field validation, can be incorporated into my design decisions.
‍
A problem I encountered with secondary research was finding the exact answers to my questions. This could be not knowing proper terminology to search, or knowing where to search. Because of this, I was unable to answer two of my research questions, what the preferred ordering process is for special orders and how do people prefer to pay for special orders.

🔍

Competitive Analysis

I love looking at what others have created, good or bad, both are able to teach you something. Here I started by making a list of direct and indirect competitors. Direct competitors are defined as other bakeries in the area that sell the same items as Sally’s. Indirect competitors are defined as restaurants that offer some sort of customization to the item being ordered. After looking at what all the businesses offered on their sites and how they conveyed their information and listed products, I listed their strengths, weaknesses, and opportunities.
‍

competitive analysis

Key Findings

Most bakeries offer no online ordering via e-commerce or even a form submission. The ones who do have limitations or aren’t user-friendly and all require in-store pickup.
For the two bakeries who offered special ordering online, payment was required at the time of checkout. The other bakeries required you to call or submit an inquiry form for them to contact you
Product galleries were dominant features in all bakery sites especially for ideas for special orders
There are good practices with checkout to follow that include minimizing the number of fields, field validation, and labeling
Showing users customization of an item is important, but hide all the options with progressive disclosure until they reach that step in the customizing
Allowing users to go back and change part of the item customization when they are on a future step
All order customization was done on one page, regardless of how many steps
A feature similar to a size chart is helpful when deciding on items
Mitigate user errors with interactive feedback
Make guest checkout the most prominent option at checkout

‍

😎

Design Decisions

Include product galleries throughout the site, eat with your eyes first!
For items where customization is available, show this.
Use progressive disclosure on the special order page with user confirmation as they proceed to the next step in customization.
Keep the number of fields in the forms to a minimum and label each field appropriately with commonly known language.
Use of colored backgrounds to separate information on pages with heavy content.

Define

🃏

Card Sort

‍Using the bakery menu I took 20 different menu items to create an open card sort on Optimal Sort to understand how users group some of the bakery offerings. ‍As they say "A place for everything and everything in its place". Based on the results I was able to determine what items should be grouped on one page or needed their own page.
‍

dendrogram results for card sort

Key Findings

‍9 participants sorted 20 bakery item cards
The average time to complete was about 12 minutes
8/9 were from the United States and 1/9 was from the UK
43 total categories were created with a median of 5 each

🗺️

Site Map

‍‍With the findings from the card sort and information from the existing website, I organized the content into a more user-friendly, easy-to-find way. I then used this document to create the task and user flows.
‍

site map

🧁

Task Flow

Keeping the sitemap in mind I created two task flows. One to browse through the site and order a cake and a second to use the search to find the page containing muffin tops. These flows were important to validate the decisions in prior steps and also create feature lists to add later on.
‍

task flows FOR ORDER AND SEARCH

🎂

User Flow

Tasked with ordering a cake, I explored what ways could the user navigate the site to get to the order screen. One path I didn’t think of was what if they don’t find what they searched for = exit point. It’s great to assume a user will always find what they came for, but the truth is they don’t.
‍

user flow FOR CAKE ORDER

✏️

Sketches

Using the flows for ordering a cake I drafted the pages users would interact with. I created three versions of the homepage to display different ways for users to see the bakery menu, daily bread schedule, direct links to the cake page, and different ways to display featured photos. After looking at what I came up with, I decided to go with the third option I created since I felt it provided the best layout of information to the user.
‍

homepage sketches

🎞️

Wireframes

With the best option of the sketches, I created wireframes in Figma to later use for testing. I included features that helped with the task flows, which were then added in with more detail in the UI mockup.
‍

wireframes

Develop

🎨

UI Mockup

For colors and fonts I wanted to stick with the feeling of her logo — fun, bright, 60’s diner vibe. I played off shapes in her logo and incorporated those as background elements to create a cohesive design. I reused the existing photography and created slideshows pertaining to each page or section. This helped to minimize the amount of visual clutter and allows the user to view items that pertain only to the page.
‍

UI mockup v1

Deliver

🤔

Usability Tests

Seven participants tested the process of ordering a cake from the homepage using two different scenarios.
‍

Navigation Scenario

You need to order a cake for a birthday party but aren’t sure what options are available. Without using the search feature, how do you find the information you need?
Now that you have the information you need, add a 10” Round, Lemon flavored cake with Raspberry filling to the cart.
Remove the 6” cake from your cart & from here complete the order process.

Search Scenario

You need to order a cake for a birthday party but aren’t sure what options are available. Using the search feature find the page you need.
Now that you found that page, add a 10” Round, Lemon flavored cake with Raspberry filling to the cart.
Remove the 6” cake from your cart & from here complete the order process.

Each participant enjoyed the flow and thought it was easy to use but while observing each participant I documented areas I felt the user hesitated with. After combining all the results, the affinity map took form.

🖌️

Affinity Map & Iterations

Writing out all the pain points and suggestions from participants on post-its, I ranked them from most to least important. Given the timeline, I iterated on the most important pain points and some suggestions first.
‍

affinity map

📽️

Prototype

affinity map

Learnings

🤩

Conclusion

Given more time I'd focus more on individual features during the research phase. Given the short timeline, I felt the most time was spent getting an MVP out the door for testing, and sight was lost on the finer details.
‍
And given more resources — I’d love to explore the card sort with a larger participant pool and number of cards. Using the free version of OptimalSort is great, but the limitations in place inhibit a real, throughout understanding of the topic being researched.