EZmockup.jpg

EZAPPOINTMENT

UX DESIGN - EZAPPOINTMENT Mobile APP

 

EZAPPOINTMENT | MOBILE APP

 
Header4.jpg
 

Overview

EZAPPOINTMENT is a mobile APP concept that helps people to manage their doctor’s appointments and to avoid frustrations such as long wait time and repetitive paperwork. The design is my capstone project for the Springboard UX Design Course.

  • Role: Researcher, UX Designer, Visual Designer

  • Tool: Illustrator, Photoshop, Sketch, InVision, Draw.io, Google Forms, Paper & Pen

  • Duration: March 2018 – May 2018

 
 

Problem Statement

"Long wait time is common and frustrating." 

Based on a 2014 survey conducted on more than 20,000 American doctors, 81 percent were at full capacity or overextended. The average waiting time at a doctor’s appointment is about 19 minutes and 16 seconds. But it could be much longer depending on your location and the type of doctor you are seeing. For example, the average waiting time at my Endocrinology doctor’s office in Pittsburgh PA is between 40 to 60 minutes. Patients see the doctor every 4 months on average and the long wait time is a huge inconvenience and pain.

 
 

Interview Summary

To better understand patients’ needs I conducted in-person interviews. All of the interviewees complained about the long wait time, but the interviews uncovered more pain points.  The most common complaints are:

  • Making appointments is hard

  • Filling out paperwork is time consuming and repetitive

  • Long wait time

  • Forgetting appointments

 
 

Survey Findings

Are the pain points from the interviews common problems? Are they prominent? What factors are causing them? To get the answers a online survey was created and sent to family members, facebook friends, and online social groups. 53 surveys came back in a few days and some exciting quantitative data was collected as highlighted in the below information graphics:

 
Survey Finding Info Graphics.jpg
 

Detected Pain Points

Based on the survey results the most prominent pain points that the patients have are:

  • Difficult making and re-scheduling appointments

  • Missing appointments or forgetting to making one

  • Long wait time

  • Inefficient paperwork

 
 

Competitive Analysis

So who else have thought about these problems and have tried to solve them? What have they achieved, and what they have not done yet? I researched 3 most relevant competitors: MyQuest, ZocDoc and WaitFromHome. I evaluated these APPs by focusing on Nielsen’s Usability Heuristics. See competitive analysis details.

MyQuest allows patients to book appointments, but when users pick the dates it leads them to a website where the texts are hard to read.

ZocDoc does a good job providing appointment booking and has a paperwork feature, but it does not provide appointment status updates.

WaitFromHome text patients estimated arrival time after the appointment is made. Patients can wait from home instead of waiting in the office, similar to my initial idea. The limitation of this APP is that it does not give detailed appointment updates and it does not have a paperwork feature.

 
 

Personas & Empathy Maps

Examining interview and survey findings revealed three personas. With each persona, an empathy map was created to help me look at things from the user’s perspective by imagining what they would think, feel, hear, see and do. See high-resolution personas & empathy maps file.

 
Personas & Empathy Maps, Illustrator

Personas & Empathy Maps, Illustrator

 

User Stories & MVP

Defining personas’ goals, motivations, and challenges inspire many possible user stories. They helped me to plan the main features of the APP from the user’s perspective. In order to deliver a product with a clear message these stories must be categorized into the desired scope using minimum viable product.

 
User Stories

User Stories

 

Content Strategy

In order to find out how the users group content, an open card sorting session was performed. The content was represented in the form of tasks on cards. Inspiration for the tasks was drawn from user stories and insight from interviews and surveys.

The feedback was valuable and helped me with the next step: sketching and creating the site map and user flows.

 
FullSizeRender.jpeg

Main Findings

• Checking appointment status tasks were separated from making appointment tasks.

• Tasks related to medical history and insurance card were grouped together and named as “My Info./Personal Info.”.

• Doctors’ information was grouped under “Make Appointment”.

 

Site Maps & User Flows

Now that I had the basic features that would be implemented for MVP, I began to sketch a sitemap with screens that will be needed within the app. Once the idea is established I went to digital and created the final sitemap in draw.io.

 
Site Map & User Flow Sketches

Site Map & User Flow Sketches

Final Site Map, draw.io

Final Site Map, draw.io

 

I created 4 scenarios that my personas would likely take based on their goals derived from the empathy maps. To visualize the scenarios I began to sketch out the user flows. I started with paper and pen and after a couple iterations I began to create the flows in Draw.io.

 

User Flow 1-Make An Appointment

User Flow 1-A copy.jpg

User Flow 2: Reschedule An Appointment

User Flow 3: Check Appointment Status & Check In

User Flow 3-A copy.jpg

User Flow 4: Edit Medical History

 

Wireframe Sketches

After creating the site map and user flows I started sketching wireframe ideas on paper to visualize how the user interface elements will be positioned.

 
FullSizeRender-3.jpeg
FullSizeRender-5.jpeg
IMG_2158.jpeg
Wireframe Sketches

Wireframe Sketches

 

Mid-fidelity Wireframes

Once I had a solid foundation of ideas to work from, I started developing mid-fidelity digital wireframes. I used Sketch to provide more detailed content, hierarchy, layout, and interactions. During the process I kept the user’s needs and the user flows in mind to ensure the design will help them to achieve their goals. 

 
First draft mid-fidelity wireframe samples with key features

First draft mid-fidelity wireframe samples with key features

 

Iteration & Decisions

While creating the wireframes I received useful feedbacks from my target audience and my mentor. Keeping the feedback in mind below changes and decisions were made:

 
Wireframe First Impression A.png
 

Prototype & Usability Testing

In order to test the flow and usability of the design I built a clickable prototype using InVision. In person usability tests were performed so I could see users’ reactions first hand, and ensure my product was performing as expected. 

What they liked

  • Users were able to complete all 4 tasks easily.

  • Their main comments about the app are: straightforward and easy to use.

  • Bottom navigation icons were easy to understand.

  • They also like the positive reinforcement the app give people when it guides them through the tasks.

Problems

  • One user was confused about the name “Check in”. To him “Check in” is supposed to be performed only when close to the appointment time, but for the APP users can check in anytime after they make an appointment.

  • One user did not like the wording “succeeded” in “Reschedule succeeded”, “Check in succeeded” and “Medical history changes succeeded”.

  • On the Appointment Status Updates page, users liked to see how much delay the office is running. They also liked to see a refresh button on this page.

  • On the “Make An Appointment” page, users thought the map was not necessary. Instead making the calendar and available time visible on this page is more useful.

Iteration

With the feedbacks in mind, the below changes were made:

 
Wireframe Iteration.png

Final Prototype

 
 
 

Final Wireframe Samples

Digital Wireframes Final.jpg
 

Visual Design

It’s important for EZAPPOINTMENT app to appeal to a wide range of audiences in gender, age and background. It should also appear as a dependable tool with serious capabilities.

Logo

The EZAPPOINTMENT logo plays with the letters “EZ” with curves and shades. The letters are readable with added interests. A cross was added to the letter “o” to demonstrate its relation to the medical field.

 
Logo Design, Illustrator

Logo Design, Illustrator

 

Screens

Blue, turquoise and grey colors provide a calm, professional and easy-going tone to the design and allows for good contrast to highlight important actions or active states.

 
Screen Design Illustration, Sketch, Photoshop

Screen Design Illustration, Sketch, Photoshop

Screen Design Samples, Sketch, photoshop

Screen Design Samples, Sketch, photoshop

 

Style Guides

Below is a style guide as a foundation for design consistency:

 
Style Guide, Illustrator

Style Guide, Illustrator

 

Conclusion

Working on this project has been a great experience and I’ve learned so much throughout each stage of the design process. I learned the power of research as the foundation of a quality design. It is easy to assume what the problems are and what the solution should be, but to think and design from the user’s perspective is the best way to create design that really helps people. To do this efficiently, short feedback cycles between users and the designer are critical.

Check out my other UX design works, or back to the beginning of the project.