Project Overview
The goal of the project was to design a mobile app and website
for a NYC local bakery, BAKED, extending its ordering and preordering services for delivery/pickup in the nearby area.
Food ordering apps like Doordash or Postmates oftentimes include unprecedentedly high delivery fees that could hurt the local businesses instead of helping them. The project seeks to create a platform catered to the bakery itself, in hopes of attracting and retaining more regular customers, improve sales, and increase customer service efficiency
and satisfaction.
My Role
My contribution to the project includes UI design of the app
and website from conception to final delivery. I was responsible
for conducting interviews and usability studies, constructing
flows, sitemaps and wireframes, building a brand system, as well
as making low and high-fidelity prototypes.
User Research: Summary
I conducted interviews as well as made empathy maps and competitive audits to understand the users I’m designing for and their needs. The primary customers identified through research were people who
live and/or work in the area between the ages of 18-62.
Research revealed that most senior users or users who work remotely
are not often able to leave their homes, especially during busy work hours which can discourage them from going to the bakery. The interviews
also indicated that frequent customers prefer sticking to a routine of ordering the same items at least twice a week. This suggests that having
a scheduled delivery system can be very efficient for the their regular customers.
After comparing different bakery apps and websites, I find that the
most effective platforms generally have a clear and simple information architecture. Navigating through sites like LeVain Bakery is very straight-
forward and accessible. Links/buttons are clearly labeled, as well as colors and images are kept consistent to prevent cognitive overload. Other successful apps keep a strong community of users who often review and recommend store items to each other, driving more traffic to the site.
User Pain Points
Empathy maps and interviews show that the majority of users have difficulty making pickup orders over the phone. Users find that during
peak hours, it is harder to get someone on the line, and the bakery gets very hectic if users go in-person. Thus, their remote ordering system is
not accessible. The daily specials are very popular but limited at the bakery as well, which frustrates customers when they are unable to make their orders on time.
Sitemap
I proceeded with making a sitemap to see how the platform would be organized. This can also help me visualize how I'm going to structure content for the mobile version - defining features I would retract or extend.
Wireframes
Next, I sketched wireframes to explore the experience in more detail.
I drafted iterations of the main user flow (ordering delivery) to figure out the elements that will be responsive when formatted into different screens. For example, all major links in navigation bar(s) will be compacted
in to a hamburger menu for the mobile version.
Usability Study: Low-Fidelity Prototype
Using my set of digital wireframes, I created a low-fidelity prototype for
a desktop and mobile screen. The homepage focuses on optimizing a friendly and efficient browsing experience for users, whilst also highlighting brand images and featured menu items. Keeping navigation and pain points in mind, I prioritized contained visual layouts and button placements to make the user flow as seamless as possible.
I conducted a usability study to gather feedback for the low-fidelity prototype and gage where various users stand with a bakery delivery platform. The study is remote and unmoderated. It also spans from 15-20 minutes and consists of 7 participants, who are tasked of ordering an item for delivery through the app and responsive website.
Results from the study are as follows:
-
It was difficult for users to find the checkout button on the app as scrolling back to the top for the 'Cart' icon proved inconvenient.
-
Users expressed that they wanted a 'Back' button during the checkout process in case they needed to browse the menu again and make changes to their cart.
-
More information, including ingredients, nutritional value, and storage instructions, should be presented for each menu item.
-
Users request to have their account details and payment info. saved automatically so they don't have to fill it out again during checkout.
-
There should be more accessible options in the settings page.
Mockups & High-Fidelity Prototype
Based on the feedback collected from the usability study, I made changes to improve the platform's checkout flow and functionality. I also applied visual guidelines like typography, color and iconography to further upgrade the platform to the final product.
I've also added accessibility settings to the site. This refers to assistive technology functions and several profiles catered to specific user needs, such as screen readers for vision impaired, seizure safe profile, ADHD friendly profile, cognitive disability profiles, keyboard navigations...etc. This also suggests that headers, navigation bars, footers, and other features used to map out sections of the interface need to be annotated clearly to elevate hierarchy and emphasis.
The menu is structured so that the special bakes of the day are presented first. These items are limited and tend to run out quickly according to customers, so the site highlights them in both the homepage and menu shop page. Within the ordering process, users are given the option to pre-order their bakes by putting down desired delivery or pick-up date. They are also able to ship their items as gifts to friends and family.
It was a goal of mine to consider the customer's needs when creating the UI designs. I find that having empathy maps and personas of potential users was extremely helpful. After the pandemic, more people work remotely or still need to reside home, so it is essential to accommodate the bakery's services and business around user circumstances.
