UX Design Case Study
Designing a website with easy navigation for new users.
Summary
Beebe and Kareem run the Rose Family Bakery, famous Beebe’s Cute Cactus Cookies. The couple created their business not too long ago, so they wanted a website that would draw in loyal customers. They came to me to request a mobile and desktop site to help sell their products and incorporate Beebe’s blogs.
Role: UX researcher and designer
Timeline: 4 Weeks
Tools: Figma
Research
While researching for the design of the site, I imagined the thoughts and behaviors of customers living in Tempe, AZ. This helped me understand what the website needed for users to enjoy their time browsing. For the checkout process on our site, I observed other E-commerce websites and apps such as eBay and Amazon to ensure that the process is smooth.
Personas
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.
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.
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.
Design
I started with the site plan to map out how the pages will connect to each other. The site plan also helped visualize the checkout process. Then I created low fidelity wireframes for desktop and mobile view.
Information Architecture
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 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.
