Follow My Health Web App Redesign

Objective

To practice, the design think approach by redesigning the FollowMyHealth web application.


duration & Role

January 2017 - March 2017

Lead UX & UI Designer


Empathize & Define

FollowMyHealth is a web application by AllScripts Healthcare Solutions Inc. that acts as a patient and doctor portal.  The patient can see the results of testing, track health goals, and even message their doctor, albeit it's fairly confusing and difficult. Through this case study, I tried to solve a couple major problems and frustrations I have with the FollowMyHealth web application.  FollowMyHealth is also available as a mobile app. For the purposes of this case study, I will solely be redeveloping the web application.

Personas

Maya: A 20-something-year-old, employed, fairly healthy, visit's the doctor when sick, for the yearly checkup, or to treat her old collegiate track knee injury, and has a couple of prescriptions.

Hal: A 60-something-year-old, retired, fairly active, visits the doctor for when sick, for monthly blood pressure checkups, to bring his wife for her appointments, and keeps track of their 5 prescriptions between them.


Ideate & Prototype

Goal

Take the FollowMyHealth web application page by page and redevelop the application so that is more intuitive, easier to use, and less frustrating.

Page 1: Login Page

BEFORE

Screen Shot 2017-09-27 at 8.17.10 PM.png

 

AFTER

FMH_Login.png

Design Changes

Simplified: The original page has a lot going on. From the paragraph of text at the top, extra buttons, options to download apps (even though it is a web application), and more.  The new version has a quick sentence about what the app can do, obvious call to action, and a more subdued appearance.

Clearer Direction: The original is unclear about what is a button and what isn't. For example, the "or, use an alternative" is a button. The new version has clearly defined options. One button to log in, and two links for "forgot my password" and "Create an Account".

Updated Layout: Today's design is all about flat with subtle shadows. I kept the two colors of the original color scheme but updated the look of the text and buttons. For consistency, I left the "Help" and "English" buttons in the same place as before.

 

 

Page 2: Home Page

BEFORE

Screen Shot 2017-10-03 at 6.57.26 PM.png
Screen Shot 2017-10-03 at 6.57.56 PM.png

 

AFTER

Home Page V5.png

Design Process

My personas indicate that the following three reasons are the most likely reason a user is accessing their FMH account.

  1. To message their provider

  2. To check the date/time/location of an upcoming appointment, or to schedule an appointment.

  3. To check the status of/refill any open prescriptions

My main goal for redesigning the homepage was simple: To limit and simplify the options so that the user can immediately answer the three reasons mentioned above.

Design Changes

Make sending a message obvious: The first option on the screen is to send a message. A suggestion to the left indicates some of the things you can ask your provider. Clicking on the "Send Message" button would bring a user to the "Messages" page and also open up a new message automatically.

Notifications: The notification center is to act as a direct link to other pages for issues like, test results, new messages from your doctor, and prescriptions that need to be refilled, that a user might want to look at when they are new, but after that probably won't need access from the Home page. Icons indicate what type of notification they are and act as a visual cue.

Simplify appointments: Instead of the calendar view, I opted for a simple list. The arrows to the right of the appointment date would bring you to the "Appointments" page where editing is possible. The "Schedule New" button is to schedule a new appointment now and would bring the user to the "Appointments" page, where a calendar view would be used. The home page will only show upcoming appointments. If the user doesn't have any, a simple message would appear prompting the user to click on the "Schedule Now" button.

Prescription status: All open prescriptions will be listed here. The user can click on the arrow to the right to learn more details about the medication, for example, what pharmacy it is linked to. The text will underline and be the color red to indicate that the user can directly click to send a message to their doctor about refilling the prescription.  Clicking on the red link would open up a new message already pre-written with the prescription in question.

This was a project completed to practice the full design process. FollowMyHealth was not associated with this project.