Overview

Joe.Coffee is a start-up based in Seattle, WA that provides independent and local coffee shops with a platform for their customers to make mobile orders. 

​The client came to us with three things to work on:

1 _a way for merchants to create offers and specials for their customers

2_how can the new design help baristas get more excited about using the interface

3_redesign the consumer home screen to understand what it would look like once the offers feature was implemented

Team and Role

My team consisted of one UX Designer and one UX Researcher. We collaborated responsibly and cultivated out-of-the-box ideas to solve the problem in a strategic manner. It was important to keep the client engaged and apart of the process at all stages for clear transparency and satisfied results. 

I specifically worked on:

• competitive research

• usability testing

• archetypes

• the prototype design for the merchant and consumer interfaces

UX Methodologies

• contextual inquiry / field study

• comparative & competitive analysis

• user flows

• storyboarding

• archetypes

• sketching and paper prototyping

• wire-framing

• prototyping using sketch and figma

The Challenge

We were challenged to start from a blank slate as the offers feature had yet to be designed for the interface. The stake holders had no idea where to begin with creating offers or coupons for their customers. The stake holders’ goal was for the task to be intuitive for the baristas, managers, or owners of the shop.

The Solution

Design a “wizard” style form that creates offers on an iOS iPad.

The first attempt at designing the solution included a tile format with a form. Through comparative and competitive analysis we learned from POS platforms such as clover and stripe to play with a tile format as it exemplified large icons and pictures. Easy to recognize items and costs.

We designed two more iterations after having meetings with the client to understand that they did not want tile format or a comprehensive form format. This led to the discovery that a wizard would be the best solution.

Our final design consisted of 4-5 steps that included fundamental design features we discovered in our research.

Joe.Coffee will include our final design solution in their V.2 launch on October 15th, 2018.

Step 1: Research & Curiosity

Who is Joe.Coffee? What is their brand identity?

These questions got us thinking at first. We conducted a heuristic evaluation of the current Joe.Coffee website and v.1 consumer prototype.

Do baristas and coffee shop owners enjoy using Joe.Coffee?

Joe.Coffee hadn’t hit the San Francisco market yet, so we had a colleague living in San Diego go and observe a cafe that used the application. Our colleague asked the barista a few questions about the merchant interface, the work flow, the difficulty scale in using the application and more.

The reviews were mixed:

• baristas preferred Joe.Coffee mobile orders over phone orders, yet they wished it was integrated into their POS system

• baristas wished the application had a better way to stay organized during peak hours
  
  This led us to our next question…

Archetypes

Which cafe environment is Joe.Coffee’s target audience?

Our team was curious to understand the different types of cafe environments that would be impacted by the Joe.Coffee product.
We walked around downtown San Francisco conducting more field research, observing multiple coffee shops and noting their differences.

We discovered three archetypes to better understand how creating an offer would affect the work flow of the employees.

Our client wanted us to focus on the local “neighborhood” independent coffee shop.

Service Design Blueprint

We created a service design blueprint to understand the type of coffee shop Joe.Coffee was targeting. This helped understand how the product would impact the work flow of the baristas, the employees working in the shop and even the customers making an order.

Step 2: Ideation

What are the types of Offers that merchants typically use?

By researching different types of merchants, coffee shops, and even retail stores our team was able to understand different types of offer:

At this stage, we had a great understanding of what exactly we needed to conceptualize and design.

Step 3: Design & Test

Through the discovery of the types of offers, we then sketched some low-fidelity wireframes of the form and tested it on ourselves and our colleagues. We conducted usability testing with 3-4 users for each phase, iterating on each of our designs until our final prototype.

Major iterations to consider after testing:

• Making discounts and specials one tab versus sub-categories as they may confuse the baristas

• Getting rid of the calendar as it takes up too much space

• Getting rid of the tile format as some users did not understand the different types of offers or trying to relabel

• The stake holders did not like the tile format so we ended up ditching it

Major iterations to consider after testing:

• The form was convoluted, so we needed the user to fill out the items within the form, but let’s make it even easier for them to understand with a wizard

Delivered Solution: Final Prototype

We also designed a mock up of the consumer app home page for when the offers feature were implemented.

Next Steps

Through our research we had many insights that we suggested our client to take into consideration once the Offers feature is implemented:

• Adding a button feature or bulletin board that lets employees know which offers are “Live Now” in the cafe. This way, the workers are aware of what specials are going on at the moment and they can anticipate higher traffic of customers
  

• Creating a function for employees to disable an offer if an item has run out or an ingredient is out of stock. For example, if croissants are 50% off from 5-6 pm and they all run out, how can the shop disable the offer quickly if it is very busy? This could be apart of an inventory management system in the application as well

The team had a lot of fun working on this project together. We conducted the research and solution in 2 weeks. Thanks for reading!