Case Study

User Research/Analysis, Interface Design, Prototyping, User Testing, Visual Identity 
Tools Used: Figma, Zeplin, Miro, Illustrator, Photoshop

Challenge: An online course is creating a digitally-enabled coffee shop experience. As part of this experience, students will be able to use an app, which exists separately from the online classroom, to place drink orders, get motivated to advance through curriculum and facilitate a productive study environment. For students of online courses it can often be challenging to find a place to focus and steadily progress through course work. The Cofy app is designed to address this issue.

Participant insights were recorded to cards


Research and Analysis

Upon outlining a research plan and getting stakeholder buy-in, I began to gathering insight from the target audience by interviewing participants about their cafe experiences. Responses were grouped into common themes that essentially outlined delights, pain points and opportunities.

Cards were sorted to group insights into common themes through affinity mapping

Understanding gained from affinity mapping was used to ideas features

The qualitative research from the remote sessions yielded valuable insight that aided in app feature ideation sessions.

The features were then synthesized to identify potential opportunities and risks for the application design and development. Standout features included: Project Based Motivation, Cafe Preference Monitor, Payment Ease and Order Benefits, and a simple personalized menu.

Features were then mapped into the Value vs. Complexity quadrant to assess order of importance

Rapid concept sketching employed the crazy-8’s ideation method to yield wireframes for consideration


Concepts & Sketching

I began sketching rough concepts around the features of Project Based Motivation, Cafe Preference Monitor, Payment Ease and Order Benefits, and a simple personalized menu. I kept the sketches simple and rudimentary so as not to get bogged down with anything beyond the feature I was designing for.

Low fidelity prototype first iteration with feature descriptions.

The most successful sketches were then developed further by creating wireframes and wiring together a clickable prototype. This bare-bones prototype was then tested to gauge how intuitive the user flow was and to address any conversion hinderances.

Use case flow for drink ordering with notation derived from participant data outlines feature improvements

Updated wireframe designs with iteration documentation

Further iterations on the wireframe were designed to address feedback from user testing.

First style guide iteration used to design high fidelity prototypes



After the user flow ran smoothly I began designing the look and feel by creating a style-guide which defined typography, color palette and photography styles. I applied the style-guide to the first iteration of the prototype and ran an accessibility test on it and another round of usability testing.

Before accessibility testing to measure contrast within the application’s elements


Validation, Usabillity, Feedback

The prototype I’ve designed so far had some accessibility issues. The color combinations between background color and foreground text didn’t have enough contrast and wasn’t passing the WCAG standards with an ‘AAA’ rating.

After accessibility testing

I had to readjust the colors within the established pallet and reassign different colors to the icons to give the interface a passing grade.

Fourth and final iteration of the drink ordering use case

Final prototype



In a second usability study accessing the drink ordering process I found that there was a 25% fail rate among users. This happened because the view menu button was not in plain view once the cafe select card was opened. Participants tended to click all visible buttons when it was unclear how to proceed. The next design iteration was made to address the following:

KPI: Improve task success rate

Iteration: User Flow - Purchase a drink from a cafe

Hypothesis: Minimizing the need to scroll will improve the drink order completion success rate.


Impact Overview

The last iteration proved my hypothesis and increased the success rate of drink ordering.  Placing important buttons in plain view removed any stop gaps in the design.

The final solution for the Cofy app can be viewed here: