Expert: UX Case Study

Brief

Expert is a web app concept I developed over 4 months for the CareerFoundry UX Design course.

The app seeks to save users from the hassle of waiting for appointments by quickly and affordably connecting them with experts in any field through on-demand video calls.

Techniques

• User Interviews / Affinity Maps

• Personas / User Journeys

• Card Sort / Site Maps

• Wireframes / Prototyping

• Usability Testing / Preference Testing

• UI Kit / Visual Design

Understanding the User

To better understand the current landscape of problem-solving tools, I compiled a competitive analysis of existing apps offering expert help and conducted 3 in-person interviews with potential users.

Taking the data from the interviews, I created an affinity map, which revealed the needs and problems of the ideal users. I was able to capture these ideal users in two user personas.

With my ideal users defined, I explored their needs further by creating a journey map and user flows. These tools shed light on the areas with high potential for frustration and helped reveal the major problems that Expert needed to solve:

1. How can we provide expert help around users’ schedules in as few steps as possible?

2. How can we make users comfortable video calling with strangers?

Information Architecture

Building off of the user journeys, I created a preliminary site map to map out the information architecture. I tested my intuition by running a digital card sort with 5 participants using a tool called “OptimalSort”.

The card sort revealed a key association that I had left out of my preliminary site map: participants frequently associated “reviewing past calls” with other call-related actions, such as “placing a call” and “rating a call”.

As a result of this finding, I made the following updates to my site map:

• Created a “Call History” page under “Settings”.

• Added a link to “Call History” from the video call “Review” page

Wireframes

Next I developed Expert’s user interface through rough sketches. I iterated on these initial patterns to create low-fidelity, paper wireframes and mid-fidelity wireframes using Adobe XD.

Sketches

Low-Fidelity Wireframes

Mid-Fidelity Wireframes

Testing

Using my mid-fidelity wireframes, I created a prototype in Adobe XD. With the prototype, I conducted moderated, in-person usability tests with 6 participants. The usability tests uncovered several pain points, which I prioritized in order of importance and addressed in a new iteration of the prototype.

After finding that some users struggled with understanding the purpose (and limitations) of the app, I conducted a preference test on one of the onboarding screens. I hypothesized that I had originally included too much copy and that was causing users to pay less attention during the onboarding. The results of the test supported my hypothesis, so I moved forward with Option B.

Visual Design

I developed Expert’s design language system to complement its functional goals by keeping it simple, casual, and accessible. The full style guide can be downloaded below.

Final Design

By combining the lessons learned through testing with the Expert Design Language System, I created a high-fidelity prototype. Below you can view a video walkthrough of the final prototype or click “View Prototype” to try it out yourself.

Next Steps

Expert’s design has been validated through user testing, and the wireframes and style guide are ready to hand-off to developers.

Once the app is functional, I will continue to test its usability and make improvements where necessary. I will also explore opportunities to enhance the user experience - possibly through building relationships with experts (e.g. saving favorite experts) or providing additional support for users (e.g. how-to articles or videos).