A desktop website for placing bakery orders online.
Role: UI/UX designer
Time length: 2 weeks
Problem statement: Users want the convenience and time-saving of placing an order online for their local bakery so I designed a desktop website with an order and checkout flow.
The Idea
Cakery on Pine Street is a bakery that specializes in cakes. They take a minimalist approach with their cake offerings and have 8 signature flavors available along with seasonal flavors. Customers can buy whole cakes or slices of cake. The bakery has been a fixture in its local community and has built a loyal customer base due to excellent customer service, high-quality ingredients, and delicious cakes. The typical customer at Cakery lives in the local neighborhood and is a repeat customer.
Target User
Local customers of diverse backgrounds who want to have an easy and seamless experience ordering cake from their local bakery.
The Problem
There was no website yet for Cakery on Pine Street and customers would have to visit the store in person to place and pay for an order. A website needs to be built that houses a complete order flow.
Research Conducted and the Research Findings
The user persona was developed using demographic details of people who may benefit from having the option to place orders from the bakery online. Roger is a 57-year-old car mechanic who is a single father of 2 children. The family is planning a birthday party for one of the children and Roger wants to order a cake from his favorite bakery, Cakery on Pine Street, for the party. Roger is frustrated when a website is difficult to navigate and is also frustrated when having to email, call, or visit a location to complete an order. Roger’s goals are accomplished when he can order a cake for his child’s birthday party through a quick and easy process that is on a website that is easy to navigate.
A usability study was also conducted to test the user flow and functionality of the low-fidelity prototype. Following this study, I was able to synthesize, analyze, and convert the data into actionable design items.
Insights Learned
From a usability study, some of the users’ pain points of engaging with the low-fidelity prototype were revealed. The main issue was that an order button was not prominent. Initially, users had to tap the menu button and then find the option to order. This was rectified by putting an option to order in the navigation menu so that it is more prominent. Users also commented that the website felt crowded and that too much information was on each page. This was rectified by creating additional pages to spread out information and by being intentional about the information present.
UI Ideation
To design a user-centered experience, the process of designing the website began with wireframes, followed by mockups and prototypes. In these wireframes, there is a navigation menu that is at the very top of the page. There are landmarks, focal points, and headings emphasized for accessibility. Additionally, Gestalt principles were used, including similarity, proximity, and common region. There is a place for images and text to be put in for the final mockup. When viewing the menu, the user can navigate to the order form.
Revised Wireframes
After the usability testing, I went back to the web design to revise the wireframes. With the feedback from the usability study, I iterated on the design and created a button in the navigation menu for placing an order which makes the task of placing an order easier. Additionally, I removed some of the extra text boxes and image placeholders to decrease some of the clutter on the pages. These changes are indicated by the red boxes that were placed around the changes.
Mockup
After being satisfied with the iterations on the low-fidelity wireframes, I designed a mockup. I added stock images that represent a bakery and cakes. I added color, typography, and iconography to create a visual for the Cakery at Pine Street website.
The Final Design
At this point, the design is relatively complete - this means that images, colors, sizes, and positions display a cohesive flow between one artboard to the next. The user problem, designing a website that houses a complete order flow, has been addressed.
