supporting independent coffee shops

designing the offers feature for joe.coffee

Joe.Coffee is a start-up based in Seattle, WA that provides a mobile ordering platform for independent local coffee shops.
Our client asked us to create an Offers feature on the merchant interface for merchants to be able to create and share their own deals and specials on the Joe app for their customers. The client also wanted baristas to be excited to use the Joe.Coffee merchant interface, as well as to redesign the consumer app homepage to see how it would look like with the offers feature implemented.
Our main goal is to create an interface that is intuitive for merchants without a tech-savvy background to easily create offers for their cafe.

Team & Duration

I worked as a UX designer, focusing on research, sketching, and designing the prototype and consumer app interface. I worked closely with another UX designer, Michaela Guerrera, conducting field research, brainstorming together on ideas, and iterating our design sketches.

From concept to launch, this project lasted two weeks.

Tools & Methods

• Competitive/Comparative Analysis

• Contextual Inquiry/Field Research

• Service Design Blueprint

• Archetypes

• User Flows & Storyboarding

• Sketching & Paper Prototyping

• Wireframing & Prototyping

• Usability testing

the opportunity

How might we design an intuitive interface for Offers creation?

Our toughest challenge was starting with a blank slate. Since the Offers feature has yet to be implemented into the merchant interface, we were tasked with designing the interface from scratch, thus taking many directions in our research.

After conducting some competitive analysis, we discovered some key insights into which features could possibly work for Joe.Coffee.

We also conducted some contextual inquiry with a coffee shop currently using Joe.Coffee to see how we can take barista engagement into consideration for our final solution.

solution

Design an intuitive “wizard” style format to create an Offer on Joe.Coffee

Our first attempt at designing an Offers feature included a tile format of various categories on the dashboard, with a form design for merchants to create their offer. After discussing with our client, he believed the form would be too overwhelming for merchants to figure out.

This led to a few more iterations and discussions, and our team decided that a wizard format would be more suitable for guiding a merchant on how to create an offer.

Our final iteration was a wizard-style form with 4-5 steps that included key 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 one: familiarization

Who is Joe.Coffee in the world of cafes?

We first wanted to figure out Joe.Coffee’s brand identity. We did a heuristic evaluation of the current Joe.Coffee website and their consumer app, as well as conducted some usability testing on the consumer app to see what works and what doesn’t for the user.

What do baristas think about Joe.Coffee?

Joe.Coffee has yet to expand its market to San Francisco, so we had a friend living in San Diego go to a cafe for us to observe and interview baristas on how they use the Joe.Coffee merchant interface and what they do or don’t like about using it.

The reviews were mixed: baristas preferred Joe.Coffee mobile orders over phone orders, yet they wished it was integrated into their POS system and that there was a better way to stay organized during peak hours.

This led us to our next question…

step two: research & ideation

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

My partner and I were curious as to how cafe environments differ from each other and how that would impact the Joe.Coffee interface design. We conducted some more field research in downtown San Francisco observing multiple coffee shops and noting their differences.

In total we came up with 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. With our research and observation notes, we created a service design blueprint to have an overall view of the neighborhood cafe’s work flow and visualize how Joe.Coffee can work for baristas.

What types of Offers do merchants typically use?

Now that we discovered how cafes work, our next step was to research what types of offers cafes usually advertise. Our team researched 8 cafe profiles on Instagram, with special focus on cafes currently using Joe.Coffee.

step three: design & test

By discovering the typical offers cafes use, we then sketched our designs for the Offers dashboard and the “Create an Offer” form.
We conducted usability testing with 3-4 users, iterating on each of our designs until our final prototype.

final solution: wizard prototype