Nehal’s Bakery Website
Nehal Rana
The product:
Nehal’s Bakery specializes in customized orders. The typical users are busy professionals and students between the age of 18-50. Nehal’s Bakery online platform’s goal is to make baked goods easily customizable and accessible.
Project overview
Project duration:
Sep 2022 to January 2023
The problem:
Available online websites do not offer extensive customization options. They have inefficient checkout processes, and delivery systems.
Project overview
The goal:
Design a Nehal’s Bakery website for easy navigation, provide customization options, efficient delivery and checkout processes.
My role:
UX designer and UX researcher
Project overview
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Understanding
the user
User research: summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users require an efficient system to book and pick up orders at a scheduled time due to their busy schedule. However, many shopping websites are inefficient and confusing to navigate, which frustrated many target users. They do not provide customization options that the users look for.
User research: pain points
Customization
Bakery website designs often list the signature style products, often leaving the customers without customization options
Tracking
Ordering for a special event is usually stressful for the customer. Lack of tracking the order status can make the customer anxious
Group order
Bakery websites lack the option for recurring group order. A customer with a busy schedule may find it frustrating to reselect bulk orders each time.
1
2
3
Persona: Dev
Problem statement:
Dev is a busy intern with a speech impediment
who needs an online platform for placing group/repeat orders at work because he is conscious about placing it over the phone and wants to track the order.
User journey map
Dev’s journey map made it clear that a bakery website would simplify the order process for busy professionals.
Starting
the design
Sitemap
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Paper wireframes
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Paper wireframe
screen size variation(s)
Because Nehal’s Bakery customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Image of paper wireframe screen size variation(s)
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Easy access to select products
Insert first wireframe example that demonstrates design thinking aligned with user research
Digital wireframe
screen size variation(s)
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
Based on the feedback on my designs, I implemented several suggestions in places that addressed user pain points.
Usability study: parameters
Study type:
Unmoderated usability study
Location:
India, remote
Participants:
5 participants
Length:
20-30 minutes
Usability study: findings
Insert a one to two sentence introduction to the findings shared below.
Too many categories on the home page made it confusing to start the ordering process
Finding
Finding
Finding
Special occasion products needed to be highlighted as a separate section
Product details were missing ingredient and basic nutrition information
1
2
3
Refining
the design
Mockups
Based on the insights from the usability study, I made changes to improve the site’s home page. One of the changes I made was reducing the number of product category. This simplified the item selection process for users trying to create an order.
Before usability study
After usability study
Mockups
To provide more information on the product, I added an ingredient and nutrition information section to the product page.
Before usability study
After usability study
Mockups: Original screen size
Mockups: Screen size variations
High-fidelity�prototype
My hi-fi prototype included the design changes made after the usability study
View Nehal's Bakery Website high fidelity prototype
Accessibility considerations
I used high quality product pictures for users with limited reading ability to easily identify the product for selection
I used headings with different sized text for clear visual hierarchy
I designed the site with alt text available on each page for smooth screen reader access
1
2
3
Going forward
Takeaways
Impact:
Our target users shared that the design was more engaging with the customization options, and they felt comfortable ordering the product looking at the ingredient list and nutrition information.
What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Next steps
Conduct follow-up usability testing on the new website
Research on nutritional information in depth for a better informed customer experience
Identify any additional areas of need and ideate on new features
1
2
3
Let’s connect!
Thank you for reviewing my work on the Nehal’s Bakery Website!
If you’d like to see more, or would like to get in touch, my contact information is provided below:
Email: rananehal3@gmail.com