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
- 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
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.
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
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
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.
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.