Patient Portal Redesign

Redesign of MyUofMHealth Portal

image

What is MyUofMHealth?

MyUofMHealth is Michigan Medicine's patient portal. It is a web application that helps patients manage their health information online. Users can view their patient information, schedule appointments, request prescriptions, chat with health care providers, access test results etc. The access to this portal is restricted to current patients of Michigan Medicine.

Why MyUofMHealth to re-design?

After taking classes in Graphic Design, I wanted a project to practice what I learned.

MyUofMHealth is a portal I use often which has an interface that looks visually outdated and can be very confusing for first time users.

Design Goal

The goal I scoped out for this project was to

  • Analyze and critique current UI
  • Create a visual re-design that address the identified issues
  • Re-design screens in a task flow with the new visual design

Design Critique of Current UI

Overall, the information on the website is dense and hard to navigate. The color palette create a dull, serious look which invokes negative feelings associated with hospitals.

  • Dense textual information is not designed in a way that is easy to scan making the page look cluttered.
  • There is either too much or too little free space.
  • There are in consistencies in the design of UI components, formatting, text alignment and icon styles.

Full Analysis →

Snapshot of my analysis of visual design problems in current UI screens
Snapshot of my analysis of visual design problems in current UI screens

New Designs

MyUofMHealthMyUofMHealth

Re-designed UI and task flow for the task - User wants to schedule the earliest in-person appointment for a Covid-19 vaccine at Canton, UHS or Ypsilanti at a morning timeslot.

Before & After

Appointments and Visits Home Page

Before
Before
After
After

Schedule In-Person Visit

Before
Before
After
After

Style Guide

Design System

The UI components and icons follow Google’s Material 3 design system. The color palette and typography are modified to reflect University of Michigan’s branding. Atkinson Hyperlegible is the recommended typeface for good readability according to the UofM brand guidelines.

image

Custom UI Components

image