Fenway Health

Client

Class project

Date

July 7, 2024

my Role

UI/UX Designer

Link

Project overview

Fenway Health is a healthcare facility in Boston centered around supporting LGBTQIA+, BIPOC and other underserved communities with a commitment to providing equitable, accessible healthcare. Fenway Health has been a leader for decades in the area of AIDS research and treatments.

As a class project in my Information Architecture course, I've gone through the process of redesigning the Fenway Health website, ensuring it’s easy for users to navigate, responsive for mobile devices, and that the visual design stands out from their competitors.

‍

Phase 1: Discovery

The client sent out an RFP for a website redesign, identifying several key factors.

‍

Audience:

Main: Ages 18-60
Secondary: HCP in education
Mobile and desktop

Project goals:

Functional, smart and fluid interaction
Aesthetically pleasing design that stands out against
Mobile first – research shows a majority views on mobile
Add chat feature
Easy access to contact/support
Easy access to patient areas: MyChart portal, resources, contact, etc.

‍

Personas

Based on the information from the RFP, I created personas to represent typical users of the Fenway Health website, and their main goals, motivations and frustrations.

‍

Quantitative research

Using the personas as a guide to recruit participants, I conducted a heuristic evaluation on the existing website. 100% of the users who participated agreed that the website was chaotic, confusing, and caused them stress when trying to navigate. This points to a drastic need for a new system of information hierarchy, including a new site map and UI of the navigation menu for mobile devices.

‍

Biggest takeaways from the heuristic evaluation:

‍

Only 1 out of 4

users were able to easily navigate from the main menu

100%

of users were overwhelmed by the way the content was organized on the website

4

separate menus were available on the home page alone

‍

“There is nothing minimalist about this experience.” – Mike

‍

“I wasn’t sure where I was, as I went down the rabbit trail.” – Lisa

‍

“If the goal is to meet the needs of existing patients, it’s not getting this done due to the design of the site.” – Karin

‍

User needs

Simplified, easy navigation
Visual hierarchy and clean aesthetic
Design based on user flows
Easy navigation for both types of users: new and frequent visitors of the site

‍

Competitive analysis

Mercy Health

Direct competitor: community healthcare provider
Provides easy access to MyChart; chat function
Cluttered UI with lack of hierarchy

Mayo Clinic

Direct competitor: national healthcare provider, industry leader
UI well organized; clear visual hierarchy
Mobile-first design; clean and minimal

‍

User flow

I created this user flow based on the existing website, and it reveals how complex the journey can be for a patient to schedule a new appointment.

‍

User flow task: scheduling an appointment

‍

Site map

I also mapped out the existing site map, showing how many areas of content the site provides. Since the redesign project doesn’t include altering any of the content – just reorganizing the information architecture and restructuring the content hierarchy – this is an accurate snapshot of the amount of content that needs to be easily accessible and easily navigated to by users of the site, thereby setting up the problem that needs to be solved.

‍

Notes on the site map:

Fenway Health obviously has a large amount of content that’s important to include in their website, in order to remain a vital resource in their community.
During heuristic evaluations, the participants overwhelmingly agreed that the navigation was chaotic and it was difficult to find what they were looking for on the first try.
The biggest challenge for restructuring the site map was to find a way to provide clear navigation and direction for the user.
One way to address the issue of too much content in the navigation menu would be to test the organizational structure, and simplify the menu so each section is expandable; this way the user isn’t overwhelmed with options.
I also wanted to perform usability testing on naming conventions to find out which words work better (i.e. “Find a doctor” vs. “Search for a provider,” and provide multiple pathways for the user to find the same content.

‍

Usability testing

The main goal of performing usability testing was to find out the biggest pain points with the existing website. I wanted to invalidate my assumptions with typical users who fit within the range of the target audience/users for this site. From this user testing, I was able to gather insights from users that helped provide a roadmap of issues to tackle in the redesign.

‍

I gave the participants two tasks:

Schedule an appointment for HIV testing
Find resources and info about gender-affirming trans care for your adolescent child

This was a moderated test, which was recorded over a Zoom screen sharing call, where I could view each participant’s actions as they completed each task. I also asked them to think out loud and share their thought process as they navigated throughout the site.

I did my best to avoid interfering or to provide my own thoughts, which could bias their experience throughout the process of the usability test.

‍

Takeaways

In order to resolve the user needs for this website, these are the features and functionalities I would recommend:

Cutting the number of menus down to one, with minimal navigation options that can be expanded when clicked, will remove the sense of chaos the participants experienced during the testing process.
Using visual cues (icons, cards, white space) to guide the eye and allow for easier understanding of each page/section at first glance.
Every extra unit of information competes with the relevant information and diminishes their relative visibility – the content needs be restructured on every page, and visual cues added to create organization and order.

‍

Phase 2: Site architecture

Updated site map

There are really only five main sections available from the navigation menu; the other top-tier content can be easily seen elsewhere in the main layout. Reorganizing the content this way simplifies the main navigation menu and allows the user to expand topical sections for more detailed navigation, or to follow the top menu items and read more from there.

I used one of the big takeaways from the usability tree testing to create multiple paths to the same content – in the new site map, there are several ways to access the same pages and sections.

‍

Card sorting and tree testing

Overall, I think the site map I developed held up pretty well with this group of participants.
If I were launching this new website and I had more time and a budget for more participations, I'd love to do a more thorough tree testing analysis to find more holes in the sitemap where people might find difficult to find what they're looking for.
The biggest takeaway I got from the tree testing is that I will add more links to destinations that differ from the main path. For example, when participants were asked to find the location and hours for the AIDS clinic, I had this info available in three paths, but I should also add it to a fourth path as well – including info for the AIDS clinic on the same page as the regular locations & hours (home – about – locations & hours). I'll look through the rest of the sitemap to see if there are any other locations I can link to from other areas.

‍

Phase 3: Design

Before I started working in Figma, I did a Crazy 8s exercise in which I sketched out 8 screens in 8 minutes, in order to generate rapid wireframe sketches without being constrained by details. This was a difficult one for me because I really love the smallest design details, but by forcing myself to let go of those parameters and just sketch out several ideas for the home page, nav, and inner page, I was able to focus purely on creating layouts that were easy to navigate as well as being aesthetically calm, which is what my focus was for this redesign based on user testing.

‍

A panel of 8 wireframe sketches on paper — Crazy 8s rapid sketching

‍

Based on my rapid sketching iterations, I designed the lo-fi wireframes for the home page, navigation menu, and two hierarchy levels of inner pages.

A paper prototype of lo-fi sketching — Lo-fi sketching: home, main nav, inner pages

‍

Then, taking all the data I’d collected in the previous phases, I redesigned the visual layout of the site. The client supplied a basic update to the Fenway Health brand, including a new logo, colors, typography, and photo style, and I created a design system in Figma with library components to make my time designing more efficient and to ensure brand consistency.

No items found.

‍

Here are the final hi-fi mockups, built in Figma using the design system I built, and based on the lo-fi sketches I created in the previous step.

My main goal in the redesign was to simplify the UI, which will allow users to take in all the visual information in a way that’s easy to follow and understand.
After sketching the mockups, I went back to the RFP from the client and realized one of the things I needed to add was a chat/help button, which I created here as an FAB (floating action button), easy for users to find and close if unwanted.
I felt it was important to leave the content itself unchanged – I just reorganized the navigation menu, the site map, and the structure of the pages so there was a clear content hierarchy. And of course, updated the UI design.
One of the changes to the home page was to bring in a small blurb for each of the three callouts on the original home page: Award-winning quality & safety, Mission-driven healthcare, and Convenient pharmacy locations. With the updated visual design, I included new icons and text links to each inner page to learn more.
Using the results from my usability tests, I put the main reasons for users visiting the website into a simple dropdown menu on the home page. I would love to do some testing on this before the website launches, to see if the dropdown list of pages/sections need to be altered any further.