User Experience and User Interface Redesign
As 9Health enters its 40th year as a non-profit, dedicated to advancing health awareness and providing Coloradans with the tools they need to take responsibility for their own health, the organization continues to expand beyond its origins as a health fair and into the digital arena.
9Health approached us to address a few problems they had regarding their current website; streamlining the pathway to make a donation, redesigning the Find a Fair search page, and revising the 9Health homepage.
The Team
-
Kevin Mackin
-
Matt Kelly
-
Patrick Bryan
-
Trent Segura
-
Sam Shepardson
The Scope
3 Week Sprint​
Applications
-
Sketch
-
InVision
-
Anima
-
InDesign
-
Photoshop
-
Zeplin
The Challenge:
-
Define the most important elements to redesign in a 3-week sprint
-
Optimize the donation flow for the 9 Health Fair website
-
Redesign the find a fair page
-
Optimize the home page by designing a hierarchy that represented both user and brand goals
-
Give a recommendation for an information architecture redesign
-
Creat high fidelity Wireframes for both web and mobile platforms
-
Handoff designs to the development team using a style guide in Zeplin
My Role:
-
Research Google analytics and present findings
-
Synthesize research to create personas and journey maps
-
Work with a large design team to redesign key pages on the 9Health web site
-
Develop a design system
-
Turn low fidelity wireframes into high fidelity mockups
-
Interaction design
Researching the brand
The first step for us was to understand the brand and current function of their web site. We put together a heuristic evaluation and donations best practices competitive analysis.
When we walked into the first meeting with the client we wanted to know more about 9Health and what they were expecting to get out of working with our design team. Although we did learn a lot about 9Health we left with even more questions than we entered the meeting with. It appeared that they were very open to different deliverables and didn't offer clear goals of the project. We asked 9Health to share any available resources they had so we could better understand where their users were experiencing pain points.
The next day 9Health granted us access to:
-
Google analytics
-
A 9Health focus group report
-
Permission to attend a 9 Health Fair and interview volunteers and attendees
Google Analytics
Key Insights:
​
-
The most common reason for visiting the 9 health website was to find a fair.
​
-
Bounce rates were within an acceptable range of about 20% on the find a fair page but increased dramatically on the results pages where bounce rates increased 73%
​​
-
The Donation form had a bounce rate of 72% and had accrued less than a 1000 page visits in two years.
-
Demographics: Primary site users are female (59%), 41% are male. Women, particularly in the 50-60 age demographic have constituted the bulk of site visits over the last 2 years.
Other Research Methods
While I was digging through the google analytics, other team members were either going to a 9Health Fair or combing through the 9Health focus group report.
Key Insights:
-
People were motivated to attend the fairs because of their affordability
-
Attendees loved the community aspects of attending local health fairs
-
Most donations were gathered on location at 9Health Fairs
-
Older demographics didn't trust the online registration process
​​
Defining the User
To synthesize all of our research we developed two different user types for the 9 Health web site. One of the user types was 9 Healths current users (Cathy) and the other was their aspirational user (Deborah).
This was 9Health's current attendee. The key takeaways from their current users were that they had limited computer literacy and were reacting to health complications after their doctors' recommended getting health screenings. For users like Cathy, we needed to make finding a fair and donating to 9Health very easy with an emphasis on accessibility.
This was 9Health's aspirational attendee. They wanted to reach a younger demographic that would be more proactive. For our designs, we found that users like Deborah needed the fastest way to find a nearby health fair and register online.
Homepage Redesign
Once I had a strong understanding of our users I found it glaringly obvious that one of the biggest pain points of their users was feeling overwhelmed by the massive amount of resources on the home page. I knew that before I tackled any user flows I had to prioritize the information architecture of the home page to optimize it for key user flows.
Original Homepage
Key Problems:
-
Hierarchy did not match the user or the brand goals
-
Calls to action easily overlooked
-
Overwhelming amount of information
-
79 locations with low contrast on the home page alone
Ideation
Before we designed the new home page for 9Health we had determined the most important user flows for both users and the brands goals. We listed out all of the features that the home page had to include then performed a design studio to find commonalities in our designs.
.jpg)
.jpg)
We then took the best parts of each of our designs and created a cumulative design which was then given to Matt to make a wireframe for our next meeting with the 9Health team.
Wireframes
After meeting with the 9Health team we got some recommendations and the approval to move into high fidelity with the home page.
The New Homepage
Before diving into the hi-fi mockups the project manager and I created a design system following the existing style guide that 9Health already developed.
​
Knowing call to actions were going to be the focal point of my design I put an emphasis on accessibility. I used the darkest blue 9Health provided contrasting against white text and icons allowing for high contrast calls to action.
Donation Flow
One of the user flows that was in dire need of optimizing was the donation page.
​
We did user testing on the original website and asked users to make a donation to 9Health.
​
Time to Complete: 11.8 Seconds
There was a 75% bounce rate on the donation form which we attributed to the form looking "nonprofessional" which we discovered during a Contextual Task Analysis with users at a 9Health Fair.
We also noticed that this form had no error prevention and on this particular section a user could donate a recommended amount and any amount at the same time with no confirmation as to what the final amount was.
New Donation Flow
New Donation Form
The Result
Finding a Fair
Once again we started by user testing on the original website asking users to find a fair in the next two weeks.
Key insights:
​
-
Too many pages before finding a fair
-
When people got to find a fair page they would click on "See all fairs" and fairs would populate below the visual fold
-
Radius was set to 5 miles which was not large enough to find fairs for certain zip codes
-
Screenings are not categorized leading to a long, confusing list that is hard to navigate (51 screenings)
​
Time to Complete: 4 minutes 21 seconds
The Solution
In an effort to make a better experience with finding a 9Health Fair to attend, we redesigned the Find A Fair search page.
1. We eliminated the “See Fairs” button and prepopulated the page with a list of upcoming fairs.
2. Next, we anchored the “Search for a Fair” search filter and the “Search for a Fair” results/”Up Coming Fairs” to the top of the page.
3. We redesigned the search result cards to better prioritize information that we thought would affect the user's decisions such as the Date, followed by the City, and fair type (Health Fair vs. Research Fair).
​
4. We proposed a wider range for the zip code radius.
5. Lastly, we categorized the screenings to make them more digestible and replaced the dropdown with a series of checkboxes.
Mobile Interaction Design
For mobile, I wanted to preserve the filtration options and maintain the simplicity of use. To do this I kept a similar style to the desktop version and moved it out of the viewport unless the filter button was clicked on.
The Result
Retro
This was an incredible opportunity to work with Colorados' most prolific non-profit. At the final pitch meeting, with the senior staff at 9Health, our final deliverables were extremely well received. The redesigns are planned to start rolling out in early 2020.
Next Steps:
Tackle the information architecture: I spent a few days combing over the IA with one of my other teammates and we discovered that a 3-week sprint was not enough time to go in-depth to offer a full rehall of their IA . We did offer a short recommendation highlighting repeat information that could be condensed.
Navigation redesign: This goes along with the IA. The 9Health navigation is overwhelming and has confusing naming conventions making it hard for users to find exactly what they are looking for.
Increase online registration: 9Health is in the process of rolling out a dashboard that will host all of the attendee's results in one location making it easier for attendees to share their results with their health care professionals. Users will have to register online to gain access to the dashboard.
​
Delrivbles
Our Final deliverable included a Zeplin style guide, a pitch deck explaining the implantation of the redesigns (click the 9Health logo below to view pitch deck), and a short brief recommending changes to the information architecture.