Mobile App and Website Design

Betty’s Bakery

The local bakery app offers a user-friendly design with large text and high-contrast colors, voice commands, and easy navigation to assist all users, including those with disabilities. It also includes options for dietary preferences, making pastry ordering simple and accessible for everyone.

| Solo Project

| My Role

User Experience Design - User Research, Visual Design

| Timeline

April 2024 - July 2024

| Tools

Figma, Miro

Context

As part of Google’s UX Design Certificate, I completed a solo project

Problem

Individuals with disabilities often struggle to order pastries due to physical or visual barriers, while also needing to improve efficiency and simplify the ordering process for customers with hectic schedules.

Solution

The app would have a simple navigation system, a user-friendly interface for quick ordering, and support across various devices, high contrast in colors for legibility, along with live customer support to assist all users.

Understanding the User

Research

I have mapped solutions for this app on how it is designed to be accessible and welcoming for users of all ages and abilities. With features like large text and intuitive navigation, it ensures that everyone, including those with disabilities, can easily place orders. The app maintains a homey feel through warm, inviting visuals and personalized touches, such as friendly messages and images of freshly baked goods, creating a comforting and enjoyable user experience that mirrors the charm of a local bakery.


User Pain Points

  • Ensuring the app is usable for people with disabilities, including those with visual, auditory, or motor impairments

  • Simplifying navigation and reducing the complexity of the ordering process to cater to users of all users and tech proficiency levels

  • Users with specific dietary needs or preferences may find it hard to customize their orders if the app doesn’t offer detailed  or easy-to-use filters

  • Users with disabilities may find it challenging to navigate complex scheduling interfaces for pickup or delivery. Simplifying the scheduling process and providing clear, step-by-step instructions can help

Maria Hernandez

Age: 27

Education: Bachelor’s Degree

Hometown: Charleston, SC

Family: Lower Middle Class

Occupation: Stay at Home Mother

“An app that simplifies ordering from my favorite bakery would truly enhance my life.”

Goals

An app that offers a seamless, enjoyable ordering experience similar to visiting the bakery in person.

Frustrations

The app is outdated and does not provide a seamless experience.

Problem Statement

Maria is a busy stay-at-home mother who needs a more efficient way to handle her grocery shopping and other errands, as her daily responsibilities keep her extremely occupied.

Personas

Doug Smith

Age: 72

Education: Master’s Degree

Hometown: Wichita Falls, TX

Family: Upper Middle Class

Occupation: Retired Air Force

“As a long-established bakery that has become increasingly busy, I hope the new app will make it easier for me to continue ordering from my favorite spot.”

Goals

A simple app that delivers satisfaction and leaves me with a positive experience after ordering.

Frustrations

I struggle with apps that are hard to navigate and I leave with a sense of dissatisfaction and incompleteness when placing an order.

Problem Statement

Doug is a retired individual who needs help ordering and arranging delivery of a cake for his wife’s birthday from his favorite bakery. Due to significant vision issues, he struggles greatly with this task.

Starting the Design

Using the chosen template, I started sketching the app's structure and flow. Although this is not finalized, it provides a comprehensive overview of the app’s layout.

Wireframes | Mobile

Beginning with low-fidelity prototypes, I initially sketched several templates for a potential homescreen. After careful consideration, I selected the top-left design. I believe this design best meets the needs outlined by the personas.

Wireframes | Website

Next, I developed several potential homepage designs for the website, creating detailed sketches for each. After reviewing them, I highlighted my preferred designs by marking them with a star to indicate which ones I found most appealing.

Building on the elements I found most appealing in my sketches, I integrated these features into a cohesive homepage design, merging the best aspects to create a unified and effective layout.

I then proceeded to create additional wireframes, adapting the tasks and functionalities from the app to the website. These wireframes were designed to ensure that the website effectively mirrors the app’s user experience and features.

Information Architecture | Website

I put together a sketch of how the website will function in conjunction with the Betty’s Bakery app, detailing the main features and the various pages that will be included on the site.

Low-Fidelity Prototypes | Mobile

I then developed a low-fidelity prototype to be used in a usability test. This will help identify any necessary details or changes before advancing to the creation of a high-fidelity prototype.

Low-Fidelity Prototype | Website

Usability Study

Testing | Mobile

Through this study, I have create this prototype for users to perform certain tasks and in turn has provided necessary findings which was later implemented in later design.

Objective

To assess whether the task is easy and straightforward and to evaluate the app's navigation ease.

Assigned Tasks

To order a chocolate cake and have it delivered to your doorstep by the bakery

Findings

  • Most users can figure out how to get started within a few seconds of using it.

  • Experienced no difficulties navigating through the app.

  • Uncertain about how to set up a delivery order

  • Noted the lack of options to customize the date and time for delivery orders.

Refining the Design

The inability to customize the date and time for delivery and pickup may cause problems for users trying to align the service with their schedules.

I presented my figma prototype to five users to collect valuable feedback, addressing the effectiveness and usability of the proposed solutions.

Before usability study

After usability study

This design causes confusion for users who are unfamiliar with it.

Before usability study

After usability study

The new solution enables users to select a date and time that best fits their schedule, resulting in a more pleasant and convenient experience.
This new solution ensures clarity for users of all ages and fosters a common understanding when placing a delivery order.

Hi-Fidelity Prototypes | Mobile

Hi-Fidelity Prototypes | Website

Going Forward

Impact

The study participants noted that the design is nice, clean, and intuitive. Its simplicity makes it easily understandable for users of all ages, whether young or old.

Takeaways

What I learned

I've realized that not every detail is considered during the sketching phase. The usability study highlighted all the aspects I had overlooked, which helped me proceed with confidence and certainty.