CheckInApp Redesign

Porton Health's Web App (UX/UI) - Spring 2022 Co-op

Medical mobile app screens in rows and columns

Overview and Role

Porton Health’s CheckInApp is a web app for clinic patients to check in to their doctor’s appointments from any device.

My role as the sole UX/UI designer was to plan and evaluate the CheckInApp through a heuristic evaluation and user studies.

Goal

Discover usability issues and recommend changes to the user experience guided by a heuristic evaluation and user research.

Solution

A streamlined patient check-in experience with improved privacy and a more efficient check-in process.

Role

Lead UX/UI Designer

Team

Solo Project

Tools

Figma

Timeframe

6-7 Weeks (2022)

Platform

Desktop to Mobile

Introduction

Porton Health’s CheckInApp is a web app for clinic patients to check in to their doctor’s appointments from any device. I was asked to evaluate Porton Health’s web apps, in this case, the CheckInApp, to find usability concerns and to adjust its design where necessary.

CheckInApp old interface

Current CheckInApp Interface.

Iterative Process

Initial plan of my CheckInApp redesign

As the sole UX/UI designer, I was in charge of planning and conducting user research while updating the user experience and interface. My approach was to first conduct a heuristic evaluation and present initial issues to the team before planning and conducting user studies while continuing to improve the user experience. Lastly, reviewing with developers and assisting them in the launch.

Heuristic Evaluation

Conducting an individual heuristic evaluation first, I analyzed usability issues and presented preliminary issues to the team before diving into user studies.

This evaluation led to discovering issues mainly regarding the minimalism heuristic of only showing what is relevant to the user at the current time:

Close-up of the appointment list of the current CheckInApp

Heuristic: Aesthetics/Minimalism

The patient queue shows every patient, showing irrelevant information for the current patient.

Close-up of the updating records screen

Heuristic: Aesthetics/Minimalism

The updating records screen shows up without user input.

Close-up of the instructions section

Heuristic: Help/Documentation

The interface should be clear with minimal instructions. The Check-in instructions can be reduced.

Initial Wireframes

From my Heuristic Evaluation findings, I made a rough wireframe and prototype to present what the experience could look like as I presented the issues to the team. From here I planned and conducted User Studies to continue iterating.

Initial wireframe of new CheckInApp

Initial Wireframe to block out main elements.

User Studies

Procedure

Participants were recruited from patients of our current client clinics and other external participants. Most of the user studies were done virtually and on their own time due to my limited access to clinic patients, so I decided it would be best to use Google Forms to guide participants more easily.

Several User Studies were done throughout the design process.

  1. After making initial changes to the user experience from the Heuristic Evaluation insights, I ran the first User Study (n = 4) with the current CheckInApp to find additional present problems.
  2. Iterated on the user experience.
  3. Second User Study (n = 4) that compared the current CheckInApp with my new user experience using a mid-fidelity prototype.
  4. Iterated on the user experience.
  5. Third User Study (n = 3) that compared the current CheckInApp with my new user experience.
  6. Iterated on the user experience.

Internal and Client Feedback

While internal feedback was secondary to my user studies, gathering feedback from the team, especially the developers, was important to ensure the user experience was feasible to be built.

Additional feedback from our Clinics was a request for being able to book appointments from the CheckInApp, in other words, a link to our current BookApp. But, as the developers told me, having the BookApp built into the CheckInApp was not feasible at the moment, as such, it would just be a link to the BookApp for this redesign.

Summary Insights from User Studies

Current CheckInApp

In general, most users found the current CheckInApp clear but there were some frustrations or confusions to note.

My design iterations

Solution

The user experience went through several iterations, led by my heuristic evaluation and user research, with internal feedback as secondary data. Below is the main user flow, and allows users to check in much easier and faster than previously.

New User Flow (main flow shown)

CheckInApp new user flow

Main user flow. See the rest of the flow below.

Full User Flow

Responsive Designs

Reflection

As my first UX/UI Co-op, it was interesting to work in a smaller company where I was the sole designer. It was fulfilling to be given the chance to be able to make impactful changes to the user experience that I could actually see being implemented by the team, to then be used by real clinic patients.

As the only UX/UI designer on the team, the heuristic evaluation was limited (4 to 5 evaluators are ideal to find the most issues). As such, it’s likely I missed some issues here, which was where my user studies came into play

With more time, I would want to re-add the notification settings that I initially removed. After checking in, the majority of users prefer being notified in person when it's their turn to see the doctor and so I removed this mandatory page to make the check-in process more efficient. However, I did not get to re-adding these notification settings. User study dependent, I may have added it to the final Checked In modal as a Notification Settings button for those that want it, but otherwise won’t intrude on the check-in process.

Feedback

Management was very happy with the changes, with patients now entering their health card number first, they felt that it was much more efficient for users with improved privacy. As my co-op term ended, the developers were still in the process of implementing my designs and the new user experience.