CONTENTS

01. Introduction

02. Understanding the User 

 

03. Information Architecture  

 

01.INTRODUCTION

04. Wireframes

05. Usability Testing

 

06. Design Documentation 

 

 

 

Product Description

UX Techniques

Coffee Chat is an mobile app I designed during a 400 hour UX Design course with CareerFoundry.

Providing people with a simple and intuitive way to connect to an expert within seconds can help solve a lot of daily issues. 

Competitive Anaylsis

 

User Interviews/ User Surveys

 

Personas/ User Journeys

 

Card sorting/ site maps

 

Prototyping/usability testing

Preference Testing

07. User Feedback 

08. Project Outcomes

09. Final Prototype

Tools

Sketch

 

Balsamiq

 

InVision

 

UsabilityHub

 

SurveyMonkey

02. UNDERSTANDING THE USER

First, I conducted a competitive analysis of current advice-seeking websites and apps to learn what's on the market today.

Then, I conducted 5 interviews and a survey of 25 potential users

 My research goals are to learn where advice-seekers go to get advice, why and how often are they seeking advice, and   how often are they giving advice.

Based on User Research I created 3 Ideal User Personas.

Meet Nikki Houston, Graphic Designer
Meet Nikki Houston-User Persona #1
Meet Sam Reed, Business Consultant
Meet Michelle Hirsch, Mother & Real Estate Agent
Meet Sam Reed-User Persona #2
Meet Michelle Hirsch-User Persona #3

Created User Journey Maps to explore the process our personas go through in order to accomplish a goal.

Nikki's User Journey
User Journey Map
Sam's User Journey
User Journey Map
Michelle's User Journey
User Journey Map

Created Task Analysis & User Flows to explore the tasks that are required for the completion of a goal and what screens will be needed.

Nikki's User Flow
Sam's User Flow
Michelle's User Flow

03. INFORMATION ARCHITECTURE

To determine Coffee Chats information architecture I ran an open cart sorting exercise with 6 Participants. The data from this gave me insight into how the app should be structured and from there I created a site map.

Card Sorting
Sitemap

04. WIREFRAMES

I designed Coffee Chat's interface using an iterative method, working from low-fidelity paper sketches to a high-fidelity prototype.

At each fidelity stage I conducted usability tests to find areas for improvement.

05. USABILITY TESTING

Test Objectives

  • Observe how users navigate through the main tasks such as logging in, filtering experts, accessing their reservations, calling an expert, and rate and reviewing. 

  • Can users easily find the filter icon?

  • Can users access their reservations and call an expert?

  • Can users easily rate and review an expert after a call?  

Participants

Six usability tests were conducted of the Coffee Chat App. Four participants were in-person interviews and tested the mobile prototype on an Iphone 8 using InVision. The other two interviews were done remotely via zoom.us screen sharing software and were tested on the participant’s Mac on the InVision website but still the mobile prototype.

Test Results

Test Report

Conclusion 

The usability tests were imperative to helping solve the problems of the apps most important features. The on boarding screens and filter features need the most improvements in order or Coffee Chat to become user-friendly for our primary personas. 

06. DESIGN DOCUMENTATION

07. USER FEEDBACK

Improvements from Feedback
Improvements from Feedback
Improvements from Feedback
Improvements from Feedback

08. PROJECT OUTCOMES

The Coffee Chat project gave me experience from the UX research process to designing the final prototype. Understanding the user by creating user personas and user flows based on surveys and interviews was so important to the design process. 

 

09. FINAL PROTOTYPE

I enjoyed the usability testing stage because it helped me learn a lot about the users needs and helped me get validation of my designs. The completed prototype was created with InVision and is ready to hand-off to a developer.

Thank you for reading!

  • Email
  • behance-logo-button
  • instagram-logo
  • linkedin-button

© 2018 by Alexandra Langer