UX/UI

COFY

Case Study




Challenge:
An online course is considering opening 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.

Contribution:
User Research/Analysis
Interface Design
Prototyping
User Testing
Visual Identity





Participant insights were recorded to cards



Discovery:

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




Design:

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




Develop:

Prototyping


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 
Test:

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




Design:

Iteration


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.





Solution:

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:
https://www.figma.com/proto/JvEPlRwJxyzuDMS3Y7PPaD/Udacity-Cafe-Design-Iteration-4?node-id=158%3A1625&viewport=-5719%2C-58%2C0.6458781957626343&scaling=scale-down