CeeDee Bakery Website
CeeDee Bakery website offers a variety of cakes for special occasions such as birthdays and anniversaries. The target users are college students, staff, and early career professionals. We strive to provide easy and efficient services to all users.
PROJECT OVERVIEW
The problem:
Currently, there is no website for any bakery in the locality. The bakery owners are either using Facebook or Instagram platforms to promote and receive online orders. People have to visit the bakery in person to order the cake.
The goal:
Design a website with an efficient flow to order cakes from the bakery.
Project duration:
February 2022 to March 2022
My role:
UX designer leading CeeDee’s Bakery website design.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
User Map
User research: summary
In order to understand and empathize with target users and their needs, I conducted user interviews. The findings revealed that both bakery owners and customers found a need for a website with an efficient flow to order and sell cakes. Due to heavy workload and academic activities, students and staff expressed their desire for an online website where they could order and receive the cake without compromising their daily schedule. They wanted a credible platform where they could order cake in advance.
I was amazed at the rarity of websites for bakeries in the country as a whole when I conducted the competitive audit.
USER PERSONA
Site Map
I created the sitemap based on the user journey. The users suggested creating an exclusive bakery website as there is none in the locality. Thus, my intention was to develop an effective website with coherent navigations, user flow, and visual appeals.
Paper Wireframes
I created paper wireframes for the homepage with emphasis on intuitive navigation, browsing, and user flow in mind.
For the homepage, I sketched out different variations of the screen. The home screen paper wireframe to the right is created after examining and combining the best features from all the wireframes.
Digital wireframe screen size variation(s)
My main objective for creating different wireframes with variations in screen size was to design a responsive website with the flawless transition of appearance/ layout depending on the device being used to view it and the size of the screen.
Low-fidelity prototype
I created a low-fidelity prototype for usability study as it enables users to have a sense of the basic appearance and interactive model of the website.
The findings from the usability
the study suggested maintaining the
text alignment and consistency with
the shape of the button.
Usability Study
Based on the insights from the usability study, I made changes to improve the site’s “add to cart” flow. I added a number in the cart so that the users know if they have selected and added the item to the cart.
Mockups
Mockups: Screen size variations
I created a mockup for a mobile website by adapting the navigation bar for the mobile version. I used flyout and hamburger menu to optimize the smooth transition from desktop to mobile and for effective navigation.
High-fidelity prototype
As prototypes allow users to experience how the product will look, feel, and work. This high-fidelity prototype demonstrates a complete user flow of the website. Users can search and locate the cake they want to order, added to the cart, and then complete the checkout flow.
Accessibility considerations
Heading
Used headings with different fonts and typefaces for a clear visual hierarchy.
Color
Used color palettes which were accessible and appropriate for all types of users.
Landmark
Used landmarks to help users to navigate.
​
Impact:
CeeDee Bakery's website is an inclusive design where user experience is prioritized. The website will provide target users with an efficient flow to order cakes from the bakery.
What I learned:
I learned the importance of paying attention to every minor detail. Every feature be it small or big contributes to creating a complete design. I also learned the significance of creating designs for multiple devices. We have to keep iterating and improving our design product. As UX designers we should be open to learning new tools.
