Portable Electronic Medical Record (PEMR)

Kaiser Permanente / product designer / 2016

Made it easier than ever for patients to get their Portable Electronic Medical Record by simplifying the user journey and redesigning the web and mobile sites.

The Portable Electronic Medical Record (PEMR) is portal designed as a place for patients to receive and download a PDF of their medical record. This can be especially useful to have on hand when traveling or visiting a new doctor for the first time.  While this feature has been available for some time now, the user flow and visual design of the site were in need of an overhaul. The purpose of this redesign for both web and mobile was to:

  • Simplify the user journey
  • Redesigning all pages using a new visual and typography standards
  • Declutter the contact page making only the information the user wants to see available 
  • Reorganize the content heavy FAQ page using new group typography standard
  • Adhere to strict WCAG 2.0 web accessibility standards

Starting with the user journey I want to make this as easy to use as possible. This isn't the type of interaction we want the user to spend a lot of time on so getting in and out quickly was important. The main function of this product is to download your portable electronic medical record with the FAQ and Contact pages serving as support for the primary function. By mapping out the complete user journey I was able find redundancies and eliminate unnecessary steps in the process which then allowed me to streamline the copy and content on the landing and download pages.

 

USER JOURNEY

The now simplified landing page provides three options for the user:

  • Download Page 
  • FAQ Page
  • Contact Page

In addition to simplifying the options on the page the copy was reduced providing a new clear and concise explanation of the page and the value provided to the user.

LANDING PAGE WEB

LANDING PAGE MOBILE

Now that we've seen the landing page let's explore the different paths the user can take starting with the download page.

DOWNLOAD PAGE WITH DIFFERENT STATES

 

MOBILE DOWNLOAD PAGE WITH DIFFERENT STATES

The next option for the user is to view the FAQ page to answer any PEMR questions they may have. Using the new typography standard for our group the page was reorganized making it much easier to find the information you were looking for as well increasing the readability of the content.

FAQ PAGE WEB

 

FAQ PAGE MOBILE

The final option for the user is the contact page. In addition to being able to download the PEMR direct from this site the user can also order and pick up a copy in person from one of Kaiser's medical centers. The contact page provides both phone and email contact information for these centers. Because there are so many centers listed and some of the name can long I want to eliminate the visual noise and only give the usr the specific information they wanted. To accomplish this I removed all contact information other the the names of the medical centers (which contain location) to make it easier to find the center closets to them. Once the use hovers over (web) or taps (mobile) the name of the center closets to them the contact information appears. On web clicking the email link will open up the users mail client to send an email. On mobile tapping the phone number will initiate a call and tapping the email will open up the users email client.

 

CONTACT PAGE WEB WITH HOVER

 

CONTACT PAGE MOBILE WITH TAP

Overall this was a fun project to work on. My goal as a designer is to work on projects that help and inspire people and this was one of those opportunities.

Please click here to view the live site.

For a PDF of the complete redesign (web and mobile) including the developer specs please click here.