1 of 25

Bread O’clock App Design

Tajudeen Woye

2 of 25

The product:

The Bread O'clock app is a digital product designed to provide users with an easy and convenient way to discover, purchase, and track their favorite types of bread. This app is essentially a platform that connects bread lovers with local bakeries and their offerings, and it can be downloaded and used on a smartphone.

Project overview

Project duration:

March 2023 to April 2023

3 of 25

The problem:

People find it difficult to physically visit multiple bakeries to find the bread they are looking for, which can be time-consuming and inconvenient.

Project overview

The goal:

Bread O'clock app provide a platform that connects bread lovers with local bakeries, making it easier for users to discover, purchase, and track their favorite types of bread. The app aims to offer a convenient and user-friendly experience for both customers and bakeries, and to promote the growth and sustainability of local businesses.

4 of 25

My role:

UX/UI designer designing an app for Bread O’clock from conception to delivery.

Project overview

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

5 of 25

Understanding

the user

  • User research
  • Personas
  • Problem statements
  • User journey maps

6 of 25

User research: summary

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research

was an adults within the range of 20 – 60years.

This user group confirmed initial assumptions about Bread O’clock, but research also revealed that time was not the only factor limiting users from getting their favourite bread. Other user problems included obligations, interests, or challenges that make it

difficult to discover, purchase, and track their favorite types of bread.

7 of 25

User research: pain points

Time

Most adults find it difficult to physically visit multiple bakeries to find the bread they are looking for, which can be time-consuming and inconvenient.

Accessibility

Users found it difficult to access information about the bread products.

IA

Technical issues with the app, such as crashes or slow loading times. These issues made it difficult for users to complete their orders or access the information they needed.

1

2

3

8 of 25

Persona: Adeola

Problem statement:

Adeola is an adult who needs easy access and convenient way to discover, purchase, and track his favorite types of bread.

9 of 25

User journey map

Image of user journey map

Mapping Adeola’s user journey revealed how helpful it would be for

users to have access to a dedicated Bread O’clock app.

10 of 25

  • Paper wireframes
  • Digital wireframes
  • Low-fidelity prototype
  • Usability studies

Starting

the design

11 of 25

Paper wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy posting of errand process to help users save time.

Image of paper wireframes including five different versions of the same screen and one image of the new, refined version

12 of 25

Digital wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

This three buttons categorized base on the size of bread chose by the users

Insert first wireframe example that demonstrates design thinking aligned with user research

Categories of user selected preferred choice of bread

13 of 25

Digital wireframes

Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.

Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.

14 of 25

Low-fidelity prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was to make it easier for users to discover, purchase, and track their favorite types of bread.

View the Bread O’clock app

15 of 25

Usability study: findings

Round 1 findings

Users want detailed information about each bread item, including pricing, user ratings and reviews, and photos, which can help users make informed decisions about what to buy.

1

Users want tracking feature that allows users to follow their bread from the bakery to their doorstep in real-time, giving them peace of mind and reducing the risk of missed deliveries.

2

Round 2 findings

Users want an easy and convenient way to browse and purchase a wide variety of bread from multiple bakeries, all in one place.

1

Users want to have access to local bakeries that they may not have known about otherwise, thereby helping to strengthen local economies.

2

Users want to filter their search results based on criteria such as bakery location, bread type, and dietary restrictions, which can help them find bread that meets their specific needs and preferences.

3

16 of 25

  • Mockups
  • High-fidelity prototype
  • Accessibility

Refining

the design

17 of 25

Mockups

Before usability study

After usability study

Before usability there was no search input but after usability study search input was included to filter their search results based on criteria of what they want

18 of 25

Mockups

Before usability study the button has Buy Now which will take user to input their card information but after usability study it was observed that most users want to edit their preferences so it’s has to be done inside the cart first before Buy Now

Before usability study

After usability study

19 of 25

Mockups

Main mockup screen for display

Main mockup screen for display

Main mockup screen for display

Main mockup screen for display

20 of 25

High-fidelity�prototype

The final high-fidelity prototype presented cleaner user flows from discovery, purchase, and track favorite types of bread as well as more customization.

View the Bread O’clock

Screenshot of prototype with connections or prototype GIF

21 of 25

Accessibility considerations

Provided access to users who are vision impaired through adding alt text to images for screen readers.

Used icons to help make navigation easier.

Used detailed imagery for tasks and toppings to help all users better understand the designs.

1

2

3

22 of 25

  • Takeaways
  • Next steps

Going forward

23 of 25

Takeaways

Impact:

The app makes users feel like Bread O’clock app really thinks about how to meet their needs.

One quote from peer feedback:

"During the usability study, I found the bread mobile app to be very intuitive and easy to use. The search and filter features allowed me to quickly find the specific bread types I was looking for, and the tracking feature was especially helpful in ensuring that my order arrived on time. Overall, I think the app has great potential to streamline the bread ordering process and support local bakeries."

What I learned:

While designing the Bread O’clock app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

24 of 25

Next steps

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

Conduct more user research to determine any new areas of need.

1

2

25 of 25

Let’s connect!

Insert a few sentences summarizing the next steps you would take with this project and why. Feel free to organize next steps in a bullet point list.

Thank you for your time reviewing my work on the Bread O’clock app! If you’d like to

see more or get in touch, my contact information is provided below.

Email: woyetajudeen@gmail.com

https://www.figma.com/proto/tPFyl7U2ai1WP6dBpFYTxb/Bread-App?node-id=27-5&scaling=scale-down&page-id=16%3A11&starting-point-node-id=27%3A5

https://wwtajudeenwoye.web.app