Baxter's Coffee: Mobile App Design

Project Background

Baxter’s Coffee owners originally asked me to design a responsive mobile website that would smoothly and intuitively pair with their desktop site. However a few days into my research, the world was introduced to Covid-19 and social distancing. As a result, the company needed a way to sell coffee to their customers in a safe way in order to survive given the new challenges. With that in mind, we pivoted to designing an app to allow customers to order online and prepay for their selections for quick pickup at each location.

Research

Market Research

I have been a self-proclaimed coffee aficianado for most of my life and carry some pretty strong opinions around the topic. That made setting aside all my biases all the more needed and allowing the data to tell the story all the more interesting. After going over the areas of focus and some of the key aspects of the Baxter’s brand, I leaned into the research.

User Interviews

To better understand the typical Baxter's customer and the typical coffee drinker in general, I lined up an initial interview process with several participants. Below is a list of the main questions of which I needed answers.

How often does the average Joe drink coffee or specialty drinks?
Where do coffee drinkers prefer to buy?
What motivates most people to drink coffee?
What factors influence what coffee shops people prefer?
Are customers comfortable using apps for purchase?

Competitive Analysis

Once I narrowed down the core wants and needs of customers, I took a look at the Somerset coffee shop market as a whole. I chose Baxter’s 3 direct competitors and 2 somewhat indirect. Both Starbucks and Dunkin' Donuts provide customers the ability to purchase items online for store pickup. The interview participants with experience ordering from apps gave examples of features they did and did not like. I took inspiration from the ones my interviewees liked stayed away from the ones they didn't. Below is the original analysis showing all info gathered from the research:

Define

Empathy Map

Building on the information from the users above, I created an empathy map. I compiled the answers and grouped them into distinct categories to better understand the purchasing patterns and goals most common among the participants. Creating and empathy map allowed me see the participants' pain points in the competitors' processes and give Baxter's an idea of the opportunities ahead.

Persona

By this point in the research, I had a better understanding of the users that would be engaging with the app. After taking a pretty macro and general approach to persona creation, I wanted to simplify even further to focus solely on the human aspect of the design. I decided to focus on the following personas:

Site Map

User Flows

***Taking all of the information gathered from user interviews and seeing how other companies were handling the new challenges, myself and Baxter’s ownership fully committed to the transition from simply a responsive mobile site to a mobile app that allows users to order ahead and prepay for their selections.

I created several scenarios that reflect the most common tasks a user may want to perform and created user flows for those tasks. For example, the flows below depict a returning customer and uses the "login" function for easier ordering and payment, while the other flow shows a customer that may not use the app as much and makes their selections as they go. My goal here was to make navigation simple and intuitive while also allowing specialized modifications.

Baxter's User Flows for Portfolio 8.28.2

Design

Wireframes

With Baxter's business objectives and the user goals in mind I designed wireframes for the major pages of the Baxter’s App. I set out to help Baxter's provide the same great service that has won them the loyalty of their customers and show the user how easy it is to make a purchase for pickup either at the "quick pickup window" or thru the drive-thru at the locations where available. I attached the low-fi wireframes below for reference.

Home Page

Order Page

Item & Description

Checkout & Summary

Home Page

With the main objective of both the user and Baxter’s being the ability for the user to order from the site for pickup, I made that function easily accessible from several places including a very visible CTA and an option on a fixed menu along the bottom of the page.

Order Page

The “Order” page first allows users to browse and select from the various types of drinks and foods the shop has to offer. This page is comprised of different categories to choose from and will be a pathway to the next page for the user to narrow down there selection. This is done to give the user all the necessary options without overwhelming them with all of the options at once.

Item and Description Page

I designed this page to be both informative and also give the user to make any special changes they wish to their selection. One thing I learned from user interviews is people are very specific about how they like their specialty drinks made and I want the users to be able to order with confidence.

Checkout and Summary Page

This page is designed to give the user a brief summary of their entire order and allow the user to pay for their items through the app. The summary will give the users a sense of security by offering them a rundown of their order before submitting and the option to pay online makes the transaction as low touch as possible.

Usability Tests

Putting the wireframes into prototype with Adobe XD, I had 7 participants attempt to order a specific drink. I observed each user's physical reactions during the process and relied on their verbal reactions as well. I noticed a few pain-points in the process and made changes to make the app function in a more intuitive and simple way. Some of the changes are as follows:

Baxter's annotated Wireframes for Portfo

Usability Tests

Since the Baxter's is happy with the branding they have in place, I was ready to take all of my findings and combine them with some of the key elements of the brand to design the hi-fi wireframes and prototype. Below are representations of the 3 most informative pages of the project.

Baxter's HiFi Wireframes for Portfolio 8

Reflection

This was a terrific project and I loved getting to work with the folks from Baxter's throughout the project. Sure, life threw us a pretty big curveball almost immediately after starting the project, but that brought them a new opportunity and allowed me to provide some extra value.