PolyMed

App Design

polymed app preview

Live Prototype

Click here

The Problem

Cal Poly’s Health Center needs a way for students to easily access its services in order to become more organized, improve the overall experience of its visitors, and become an invaluable medical resource for students. One of the current problems that the Health Center is facing is the shift towards more appointment-based scheduling for their patients versus walk-in appointments. In an attempt to be more organized and easily accessible to students, they are looking to improve the current design of their scheduling system. Another problem that the Health Center is currently facing is that they are not able to give medical information and assistance to its patients digitally, which limits their range of communication to them since they are currently only accessible to them in person. Resulting in an experience for students that can be improved upon by becoming the hub for medical and health assistance.

The Solution

The solution was to design a mobile app for the Cal Poly Health Center, where communication between students and the health care providers would improve. We will know this to be true when we see that the average wait time for a patient decreases, appointments are more easily scheduled, and medical records become more easily accessible.

The Process

This app design was completed in collaboration between Dorian Romero and I. We both completed all the UI/UX aspects of the app. Throughout the development of the app we combined our findings and designs. The first step was to define the problem and come up with a solution. Then we did research related to the problem. The next step was to work on ideation. Then, we designed a low-fidelity prototype and conducted user testing. Lastly, we designed a high-fidelity prototype and conducted user testing..

Date

June 2018

Roles

  • UI Designer
  • UX Designer

Software Used

  • Sketch
  • Figma
  • Adobe Illustrator
  • Adobe Photoshop

Skills Used

  • UI Design
  • UX Design
  • Prototyping

research

Competitive Analysis

During our competitive analysis, we saw that there are multiple health providing apps that do a few things really well, but lack some of the core functionality that our personas (ideal users) need. For our analysis we looked at apps like Zodoc, Doctor on Demand, Amwell, and Kaiser Permanente. After looking at competitors, we decided that we wanted a design that included an easy appointment scheduling system, the ability for users to both video chat and message chat with a doctor from wherever they may be, easier access to users' Medical Records, the ability to check the current live wait time, an easy check-in process for appointments, and push notifications to update users on their prescriptions and or lab results.

image of polymed's competition

User Interview Findings

During our competitive analysis, we saw that there are multiple health providing apps that do a few things really well, but lack some of the core functionality that our personas (ideal users) need. For our analysis we looked at apps like Zodoc, Doctor on Demand, Amwell, and Kaiser Permanente. After looking at competitors, we decided that we wanted a design that included an easy appointment scheduling system, the ability for users to both video chat and message chat with a doctor from wherever they may be, easier access to users' medical records, the ability to check the current live wait time, an easy check-in process for appointments, and push notifications to update users on their prescriptions and or lab results.

Analysis

Personas

We created personas based off of the feedback we received from our user interviews. The two personas we created represent ideal users of our app who visit the Health Center but have busy schedules, don't want to repeat the same information to multiple people, and to schedule appointments quickly.

image of polymed persona

Ashely’s Scenario

One Monday morning, Ashley woke up with a sore throat and a high fever. She has work at 1pm, so she wants to try to schedule an appointment with the Health Center before her shift. She checks the current wait time by checking on the app and sees that the wait time is 30 minutes for an appointment. She opens the app, schedules an appointment for 11:00am with her primary doctor, Mrs. Johnson, and fills out a form to describe her symptoms. Once she gets to the Health Center, she checks-in through the app and waits for her name to be called. After her appointment has concluded, Mrs. Johnson prescribes her medicine for her sore throat and fever, directing her to the pharmacy to get more details about when to pick up her medicine. The pharmacist lets Ashley know that her medicine will be available in one to two hours and that she will receive a notification from the app confirming when her medicine is ready to be picked up. Ashley leaves the Health Center, goes to her shift, and at 1:30pm receives a notification from the app that her medicine is ready for pick up. After her shift is over, she goes back to the Health Center and heads to the pharmacy to pick up her medicine.

User Flow

We developed user flow diagrams to determine the easiest and fastest way for users to accomplish tasks.

image of polymed user flow

Featured prioritization

We created featured prioritization matrices to determine our main priorities of the app.

image of polymed feature prioritization

Design/Usability testing

Wireframe Sketches

The first step of the design was to create wireframe sketches on paper.

image of polymed wireframe sketches

Low-fidelity prototype

We used Figma to create the interactive prototype because Figma allowed us to collaborate. Click here to see the interactive low-fidelity prototype.

image of polymed wireframe sketches

Low-fidelity User Testing

We tested our lo-fi prototype with three people to measure the usability of our core features by asking them to complete four tasks one-by-one while they talked us through their thought process as they interacted with our design.

Tasks

  1. Check the live wait-time
  2. Schedule an appointment
  3. Check-in to your appointment
  4. Order medication from the pharmacy

Key Findings

  • Minimal struggle/frustration with the app
  • 100% completion rate for each task
  • Users would at times think to go to the Medical Records screen for their medicine instead of directly through the Pharmacy
  • Contact information for Health Center
  • Integration with Google, iCloud calendars
  • Calendar screen needs improving

Mood Boards

We decided to chose greenish and bluish colors because blue represents trust, so we wanted the users to trust our app and we also chose green because it represents health, and of course this is a health app.

image of polymed moodboard

High-fidelity prototype

We used Figma to create the interactive prototype because Figma allowed us to collaborate. Click here to see interactive low-fidelity prototype.

image of polymed high fidelity prototype

High-fidelity User Testing

After collaborating on the hi-fi design of our app, we asked 8 users (2 pilot testers) to fill out a demographic survey, interact with our design and attempt to complete three tasks one-by-one while they talked us through their thought process, fill out a SUS survey, and a final post-test survey. Metrics being measured: task completion rate, time to complete tasks (in seconds), SUS score, and error analysis.

Tasks

  1. You woke up sick with a sore throat, and have class in 20 minutes. Your task is to check the current wait time and then to schedule an appointment. Schedule the appointment for May 24th at 1:00PM with Dr. Jennifer Bobell.
  2. You’re not feeling well and do not want to go to the clinic, so you prefer to chat with a doctor through video chat. Your task is to video chat with Dr. Edward Coughlin.
  3. You were given a prescription (Medicine A) at the end of your appointment, so you dropped it off at the clinic’s pharmacy and they told you it will be ready in 2 to 4 hours. You’re in class and you’re wondering in how much longer your prescription will be ready. Your task is to check the status of your prescription and see when it will be ready.

Metrics Analysis

Tasks Completion

Six participants were tested with three tasks. Each individual was able to complete the tasks.

image of polymed task completion statistics

Time To Complete Tasks

The first task took the longest to completed as expected.

image of polymed time to complete tasks statistics

Error Analysis

A total of one task error were made and two mistakes.

imge of polymed error analysis statistics

Demographic Information

All of the users had attended the health center at least once a year. Many of them complained about how long they had to wait at the medical office before being called.

image of polymed demographic information

Key Findings

  • Scale: Make symptoms text larger so users can easily click the one that relates to them
  • Icons: Make them stand out more among the accompanying text on the Home screen
  • Task Completion: 100% task completion rate and only 2 total mistakes from user testing, Average Time Per Task: 41 seconds for Task 1, 11 seconds for Task 2, 13 seconds for Task 3
  • Tasks: People enjoyed how simple the process was for scheduling an appointment, progress bar was “nice to see” during scheduling, video chat was easy to navigate to, Medical Records seems to be a location that users would like to see prescriptions in
  • Overall: Positive response from everyone, tasks were “easy” to complete, minor fixes needed