Sampa Bakery

This case study was created to academics purposes for Google UX Design Certificate

Project Overview

The Product

The Sampa Bakery app is a fictitious product that was created to fulfill the Google UX design course challenge. Although fictitious, a user survey was carried out for the creation of the product, both in the form of a questionnaire and an interview.

Furthermore, the usability test was carried out with real users who frequent bakeries.

Project Duration

October - November 2021

The Problem

Many people have difficulty finding and buying some bakery products when they come back home from work. This happens either because most products are only made in the morning or because people arrive late and don't find so many varieties of products available.

The Goal

Using the Bakery APP the customers can buy products online and schedule for pick up later.

My Role

UX designer designing an app from conception to delivery.

Responsabilities

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

Understanding The User

User Research - Summary

It was created questionnaire and conducted interviews. It was identified that users don't find some products in the bakery close to home, when they return from work.

Two points were highlighted in the survey, first the interest in booking a product before going to the bakery, and second that the notification about the new hot bread batch would help with the time to go to the bakery.

User Research - Pain Points

• Product Not Found - They didn't find some bakeries products, after back from work.

• Expectation - Expectation for the time of fresh bread coming out of the oven

Persona: Nestor

Problem Statement: Nestor is a DBA at a bank who needs reserve his favorite bread at bakery because he works overtime often.

User Journey Map

Starting the Design

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 booking process to help users save time.

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.

Low-Fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was booking a panettone, so the prototype could be used in a usability study. (Figma - Low Fidelity)

Usability Studies: Findings

I conducted one round of usability studies. Findings helped guide the designs from wireframes to mockups

• Use profile picture on top bar wasn't necessary.

• People feel more comfortable with images associated with products than just text on the homepage

• It was difficult to use the carousel at the top to go to specific sections of the product, the back button was easier

Sitemap

REFINING THE DESIGN

Mockups

Early designs allowed for some customization, but after the usability studies, it was possible to understand the end user’s needs, and how it is different about we imagine initially.

Before Usability Test After Usability Test

High-Fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for order bakery products and checkout. (Figma - High Fidelity)

Usability Test - Heatmap

To verify the APP's usability, this time, the maze.co was used to record the heat map by users in a simple task. The task was to buy a cinnamon bun from locating the bun to payment and after payment enable notification to receive sms.

Accessibility Considerations

• Used icons to help navigation user.

• Used constrastchecker to ensure good contrast (background and fonts) for all users

• Used real images to help to understand the products

GOING FORWARD

Takeaways

Impact

• The application was made useful to the user, meeting the primary need to be able to order the product they want.

Next Steps

• Create notification alerts about fresh bread and verify if minutes after receive notification the number of presencial customers increase at bakery.

• Create delivery functionality.

• Keep going with usability studies to validate the new functionalities and discovery new pain points.