UX Design Case Study
Rose Family Bakery
Designing a usable
Summary
The Rose Family Bakery is a small business started by Beebe and Kareem. They specialize in sweets with the most popular being Beebe’s famous Cute Cactus Cookies. Beebe was seeking a mobile and desktop site to help sell their products and incorporate blogs she had written on another site.
The owner of the bakery in this case study requested a fresh web and mobile site for her new bakery. The owner, Beebe, wanted a design so customers have an easy time browsing all of her products. Additionally, the owner wanted an easy checkout process for pickups and delivery orders. Finally, Beebe wanted to feature the baking blogs she had written because it is an important part of her company.
Role: UX researcher and designer Timeline: 2 Weeks Tools: Figma
Research
Personas
To help with empathizing with users, I created three personas to create a customer oriented design. The first user I created represents younger users who are tech savvy but do not have many resources at their disposal. Then the second persona represents a middle aged generation who have may have more time and money on their hands. The final persona represents an older generation who might not keep up with advances in technology.
Pain Points
Since Sam does not have her driver’s license yet, she would like to be able to order products for delivery.
Ann is very busy taking care of her family, and does not have a lot of cognitive capacity for much else.
Barb is not too interested in purchasing sweets, and wants to quickly find baking blogs
Solutions
Include space for delivery promotions and customer account creation to save purchasing preferences.
Develop an easy navigation system and a search functionality.
Include Beebe’s blog on the homepage of the website on desktop and mobile.
Navigation Summary
As the website is being designed, the navigation is one of the most important aspects. The Rose Family Bakery is a newer company, so there might not be any long time customers. The website has to grab the attention of users right away so that they do not fall back onto familiar products and companies. For this reason, the navigation should be quick and easy to use. A wide or flat navigation hierarchy should be used for the website. A flat hierarchy has the information more available and customers can discover them easier. The global navigation should have recognizable categories since customers might not be familiar with the company yet.
According to Wireframing Essentials by Matthew J Hamm, the global navigation of a site is a set of links that appears on almost every page on an application or website. Home. Since the site is going to have a flat hierarchy, there should be more links on the navigation bar and less items in the drop down bars. The client requested that their baking blog be part of the main navigation of the site so a blog link should be a part of the global navigation.
The blog option should not have any drop downs. When this option is clicked on, there should be the 14 blog posts organized by date and a search option for the users to be able to search for the title of the article they want to read.
Another link on the global navigation should be a products link. This link should have a drop down section for the type of baked goods that the users would like to order. This drop down bar should have the types of products the Rose Family Bakery sells, such as the decorated sugar cookies, cakes, and cupcakes. Each of these categories also has their own subcategories, for example the cookies have 6 everyday themes, seasonal, or custom decorated cookies. The cake page will have the bakery’s flavored cakes, standard cakes, and custom cakes options. Finally, the cupcake page will have the bakery’s flavored cupcakes, EZ birthday cupcakes, and custom cupcake options. When the user enters the page to order the custom option for one of the three baked goods or the standard decorated cakes, they will have the option to explain what they are looking for in a text box on the page.
The client wanted a search functionality so the user can search for what they are looking for. On most sites, this search bar would be in the middle of the navigation bar. However it could also be a small icon on the left side of the navigation bar like other side. Searching on this bar should bring the user to the same page as clicking on the links in the product section.
The navigation bar should also have a link to the user’s cart with a number next to the icon with how many products are in the cart. The page for the cart should also show how many items the user is ordering and the name and picture of the product.
The client also wanted users to be able to create an account for the website. The navigation bar will feature a sign in or sign up option for the user to create an account. After signing in/up, the user will be able to see their profile from the navigation bar. This is usually on the left side of the bar in most other websites.
Since the Rose Family Bakery is a new company with a new website, people may want to know more about the people who run it. Therefore, the bar should have an “about” page and an “FAQ” page in the global navigation.
Information Architecture
Design
Sketches and Wireframes
I then started on creating low fidelity wireframes and prototypes using Figma.
I received inspiration for the checkout process by viewing examples from top e-commerce websites such as Amazon and Etsy as well as local bakery shop websites.
Desktop Site View
The home page is the first thing that people see on a site, so it is one of the first impressions a customer has of a company. I included key products of the bakery and other important information such as Beebe’s blog from her requirements since it is an important part of the company.
Since the Cute Cactus Cookies are the most popular dessert, they are presented front and center and the emphasis on the page. The marketing subscription is also highly visible, being on the front page. However, customers are also able to subscribe to it during the checkout process since that is when customers are paying.
Mobile Site View
The mobile homepage has similar elements as the desktop homepage such as the Cute Cactus Cookies, marketing subscription, and a featured blog post. However, the text on the mobile version of a website is more condensed since there is less space on screen. The pictures are larger as well. This also emphasizes the Cactus Cookies even more and adds interest for the customers to be drawn in.
The checkout process is one of the most important processes on the site since this process finalizes the customer’s order and how the site sends what the customer wants to the Rose Family Bakery. This process should be as smooth as possible so the customer does not get frustrated. The checkout process I designed has three main steps: the cart, checkout, and confirmation. The cart page will feature the marketing subscription before they enter in their payment. This will then be applied to the total when the customer enter into the checkout page.
The confirmation page shows the customer a summary of their order. This will allow the customer to review everything before finishing the process.