HAHAU YISRAEL | EXPERIENCE DESIGNER

UX/UI

COFY

Case Study




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



Challenge:

Cafe Curriculum


Udacity was seeking to create a digitally-enabled coffee shop experience for their online students. As part of this experience, students needed to be able to use an app to place drink orders, get motivated to advance through curriculum and facilitate a productive study environment. The Cofy app is designed to address these features. 



Discovery:

Research and Analysis


Upon outlining a research plan and getting stakeholder buy-in, I began 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.


[Participant insights were recorded to cards]



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



The qualitative research from the remote interviews 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.


[Understanding gained from affinity mapping was used to ideas features]



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







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.


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


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


[Low fidelity prototype first iteration with feature descriptions.]


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






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


[Updated wireframe designs with iteration documentation]



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.


[First style guide iteration used to design high fidelity prototypes]




Test:

Validation, Usabillity, Feedback


My prototype had some accessibility issues. There wasn’t enough contrast between the background color and foreground text didn’t have enough contrast.


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

I adjusted the pallet colors pallet and icons to achieve a passing accessibility grade.


[After accessibility testing]

[Fourth and final iteration of the drink ordering use case]





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 would tend 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.


[Final prototype]




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