Palo Alto Medical Foundation

Website Redesign

the problem

Through user testing the current website with PAMF patients, it was clear that a large part of the user base struggles to navigate the site and understand their test results. From spending time in PAMF waiting rooms and speaking with actual patients, I understood that many of their users were elderly or not very computer literate. The redesigned site is optimized for that user group, as a more accessible website benefits them and younger, more "techie" users.

The website redesign makes it easier for elderly, less computer-savvy patients to review their test results.

GOALs

Make the My Health Online website easier for non-computer savvy patients to use to care for their health.

• Make usually opaque medical information easily accessible through improved data visualization
• Increase access to the most used parts of the site
• Enhance the website's visual aesthetic

PERSONA

user flow

VISUAL DESIGN

Typefaces: Source Sans Pro (body copy) & Varela Round (headers)

Color Palette: Monochrome turquoises based on the original PAMF turquoise brand color in the logo, with a complementary salmon red for accents

Layout: Twitter bootstrap style template for a modern feel and easy navigation

Graphics: Icon heavy, reinforced with explanatory titles to make content accessible for elderly populations

interactive prototypes

Desktop | mobile | tablet

screens

HOME PAGE

The modern layout makes the site more aesthetically pleasing, while making the page's primary function (login) more prominent and breaking down the 'reasons to join' to be easier to consume.

Intermediary Iteration

HOME PAGE — Logged in

A large-icon nav makes the site easier to use for an elderly population (e.g. literal "Home" button versus clicking the brand logo to go home.) The most used / important site features are prominent and easy to access (before they were buried in long drop downs.)

Original Design

Intermediary Iteration

All Lab Results

Test results are more prominent on the page, and the legal information is lower.

Intermediary Iteration

specific result

Users complained that they didn't understand some medical abbreviations or what their numbers meant. This panel makes the patient's numbers meaningful and offers actionable suggestions to normalize results. The CTA on desktop is to print results, whereas for tablet the CTA is to email results, and on mobile it's to call the provider.

Original Design

Intermediary Iteration

past results

Results of the same test over time are aggregated in a simple graph, color coded to indicate where results are out of range.

Intermediary Iteration