Project Overview
Duration
09/2022 - 12/2022
Approx 120 hours
Project Index
01. User Research
02.Empathize/Define
03. Ideate
04. LoFI Usability Study
05. Design System
06. Hifi Usability Study
07. Takeaway
Tools
Figma
Illustrator
Zoom
G-Suite
background
Village Bread is a local bakery in my community that sells artisan bread and baked foods. With its commitment to quality ingredients, artisanal techniques, and personalized service, Village Bread has gained a loyal customer base.
problem
Village Bread currently provides only a menu and phone number on their website, with no option to order online.
THE GOAL
My goal is to help busy users who can't order from the bakery in person. With the online ordering system, users will be able to place orders and pick up their products at a more convenient time.
01. User Research
Pain Points
Online Orders: Village Bread currently lacks an online ordering system, limiting customers to placing orders by phone or in person.
Checking Stock: Customers of Village Bread are unable to view which breads are currently in stock online, which is crucial because most of the bread is made daily.
PDF Menu: Village Bread's menu is only available in the form of an online PDF, which is not accessible to screen readers and other software.
English Only: Village Bread's current website is limited in that it does not offer easy translation options, which can be a barrier for users who speak multiple languages.
Initial User Research
I used a variety of research methods including analyzing Village Bread's Instagram page to see who typically interacts with and follows the page. Since Village Bread is a bakery in my local area, I decided to visit the shop to see what type of users frequent the bakery to get an idea of the potential user base. I discovered that the audience included both younger users, looking for artisan bread and older users, seeking fresh bread alternatives from their local super market.
Competitve Audit
Additionally, I conducted a competitive audit to identify the main competitors in the market and to understand their target audience. I identified 4 primary competitors to research, 2 direct competitors (Martha Greens and Wild Bread Bakery) and 2 indirect competitors (Panera Bread and Stater Bros). This research provided the following insights on gaps and opportunities in the market that the Village Bread app could offer it's users:
Some companies don't offer mobile ordering apps and outsource the ordering process to third party services.
No real rewards or loyalty programs offered by Village Bread's primary competitors.
Some of the competitors don't offer their users the ability to favorite/bookmark their go-to items.
02. Empathize/Define
Problem Statements
Nicole Evans is a full-time student & server who needs a quick way to place orders because she isa busy student and has a hard time reading small menus waiting in lines.
Claudio Gomez is a High School Teacher who needs to place bulk orders in his native language because he takes pastries to his students and speaks English as a second language.
Persona Development
From my research, I identified 2 groups of users who would benefit from the app. Nicole Evans represents our group of users who are busy students and workers looking for a accessible way to place orders at the bakery. The following user story was developed for Jennifer: As a full-time student with trouble reading, I want to place an order from my phone with a clear menu so that I can quickly get my order without having to spend too much time waiting in line or have difficulty reading the menu.
Claudio Gomez represents our older demographic that is looking for an easy way to place bulk orders with a menu that has clear imagery of the products. The following user story was developed for Claudio: As a high school teacher who buys bulk orders I want to be able to place bulk orders and schedule the pickup day so that I can have my orders ready in a timely manner for my students..
03. Ideate
StoryBoarding
For this project, I employed a combination of big-picture and screen-level storyboarding techniques to visualize the initial concepts for the app. By leveraging the personas I developed, I gained valuable insights into Nicole's potential interactions with the app, allowing me to create a user-centric design approach.
User Flow
Based on the storyboards I created, my objective was to develop a comprehensive visual user flow that delved deeper into the order placement process. By considering the journey maps of both Claudio and Nicole, I identified the key screens that form the foundation of this flow, ensuring a user-centered approach throughout the design process.
Rapid Sketching
To effectively address Claudio and Nicole's accessibility concerns, I adopted a rapid sketching approach to create clear hierarchy and organization on each page. By quickly sketching out different layouts, I could explore various options and prioritize features that would best accommodate users with vision impairments and those who don't speak English as their primary language. This iterative process helped me identify the most suitable design elements to incorporate into the digital wireframes, ensuring a user-friendly experience for Claudio, Nicole, and other users.
04. Lofi usability study
Parameters
Study Type: Moderated usability study.
Location: 4 participants, Remote, USA.
Duration: 20-30 minutes
Research questions
Does the user easily navigate the payment process?
Are users able to successfully check stock and order their food?
What can we learn about the steps a user took when placing an order?
Can the user easily redeem rewards?
Are there any parts of the ordering process that the user gets stuck?
Can the user successfully find the FAQs section?
Summary
My first usability study was for the low-fidelity prototype, aimed to identify and address issues related to checking stock, placing orders, and navigating the bakery app. My primary goal was to gain insights into the challenges users encounter during these tasks and propose improvements for a more seamless user experience.
My methodology for this study included participant recruitment, developing user tasks, capture both qualitative and quantitative data, and analyze data to identify recurring usability issues, pain points, and pattern. During the study users were encouraged to think aloud to provide feedback during the study.
Overall, the insights lead me to make the following changes to the app: additional flows for redeeming rewards, updating the checkout icon to match the rewards, and updated the cart so the prototype displayed 1 item.
affinity map & Insights
After conducting the usability study, I assorted all the feedback I received into an affinity map. I categorized the notes into sections from the patterns I identified. These findings led to the following insights:
Based on the theme that: a majority of users were annoyed that there were 2 items in the cart when they added one, an insight is: users want the cart to match what they have added to it.
Based on the theme that: only a few users found the rewards easily based on the icon consistency, an insight is: the rewards section should be easy to identify.
Based on the theme that: a majority of users tried to redeem rewards in different locations, an insight is: redeeming rewards should be in different locations to accommodate different user flows.
Based on the theme that: a few users went to the homepage/product page to learn more about bread, an insight is: more information should be available to users on the home/product page.
Based on the theme that: some users thought the add to cart plus signs were too small, an insight is: the add to cart icon could be larger to help with accessibility.
05. Design System
type styles
The app utilizes Open Sans as the primary font, known for its clean and modern aesthetic. Various font weights and sizes are used strategically for headings, subheadings, body text, and UI elements, ensuring readability and consistency. The type styles with Open Sans create a harmonious and professional typography system for the app's visual appeal and legibility.
components
Despite some participants in the usability study noticing similarities between the design and Google's Material Design, having a design system that is both unique and builds upon established conventions aids users in navigating the app seamlessly. The bakery app's design system incorporates thoughtfully crafted components that deliver a unique visual identity. It aims to provide a fresh and innovative interface while maintaining usability and simplicity. The system includes carefully selected typography, color palettes, icons, and interactive elements to create a cohesive and engaging user experience. It strikes a balance between familiarity and novelty, offering users a memorable and tailored visual aesthetic.
06. HIFI usability study
Parameters
Study Type: Moderated usability study.
Location: 5 participants, Remote, USA.
Duration: 20-30 minutes
User Study Prompts
Add a food item to your cart and place an order. How easy or difficult was it to place an order?
You have a free reward, how would you go about redeeming it and placing an order? How easy or difficult was it to redeem a reward?
Let’s say you want to learn about the differences between “country” and “classic” bread loafs, how would go about doing so? How easy or difficult was it to learn more?
Summary
My second usability study was to test out the high-fidelity prototype aimed to identify and address issues related to checking stock, placing orders, and navigating the bakery app. My primary goal is to test and see if the updated UI implemented helps users navigate the flow more efficiently and solves the issues users ran into.
My methodology for this study included participant recruitment, developing user tasks, capture both qualitative and quantitative data, and analyze data to identify recurring usability issues, pain points, and pattern. During the study users were encouraged to think aloud to provide feedback during the study.
Overall, the insights lead me to make the following changes to the app: clearer indication that a reward is being redeemed, separating the bread of the day from the product slider provides clear hierarchy, and giving secondary flows to the FAQs in the profile help users find information they need.
affinity map & Insights
After conducting the usability study, I assorted all the feedback I received into an affinity map. I categorized the notes into sections from the patterns I identified. These findings led to the following insights:
Based on the theme that: a majority of users were annoyed that there were 2 items in the cart when they added one, an insight is: changing the text and adding a stronger visual cue will help users identify active rewards.
Based on the theme that: users got confused when looking for the FAQ question, an insight is: an FAQ section might not be the most important item on the nav bar.
Based on the theme that: some users might find the “Bread of the day” header confusing, an insight is: clear separation between the bread of the day and the product slider could help accessibility.
Based on the theme that: most users successfully completed the flow without confusion, an insight is: some users might get confused when finding a food item to order.
Based on the theme that: the overall reward redemption process was streamline and clear, an insight is: users can enter the reward redemption in different flows.
07. takeaways
High-Fidelity Prototype
The final adjustments made to the high-fidelity prototype were informed by the insights gained from the conclusive user study. Emphasizing clear hierarchy and visual cues allowed users to easily understand the redemption process, enabling them to stay focused on the primary user flow. The final version of the high-fidelity prototype incorporates interactive elements that enhance the overall usability of the design, resulting in a more intuitive and engaging user experience.
Accessibility considerations
Colors: Accent colors were implemented to assist users in locating crucial areas in the flow, aiding them in selecting the appropriate areas within the user journey.
Hierarchy: To guide users through the flow and establish a clear hierarchy, large headers, clean images, and effective use of white space were employed.
Animations: Animations that guide the user through the flow depict progress and indicate that the user is heading towards completion of the user journey.
Next Steps
Designing a dedicated product page for each individual item would be a crucial step to evaluate and address any potential additional requirements or considerations.
Establishing a responsive website version of the project would provide additional insights and challenges that could be applied to future projects.
Finally, creating a complete design system that follows industry standards will help create more organized and workflows running smoothly.
Takeaways
Throughout the design process, I realized the importance of considering accessibility and how incorporating diverse perspectives can lead to unique user flows that ultimately benefit all users. By embracing inclusivity and accommodating various user needs, I learned how to enhance the user experience and ensure that my design is accessible to all.