EZAPPOINTMENT | MOBILE APP
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:
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.
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.
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.
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.
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 2: Reschedule An Appointment
User Flow 3: Check Appointment Status & Check In
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.
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.
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:
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:
Final Prototype
Final Wireframe Samples
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.
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.
Style Guides
Below is a style guide as a foundation for design consistency:
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.