INTRODUCTION
CLIENT: Gillette Children’s Specialty Healthcare provides children who have disabilities and complex medical needs—and their families—resources and care to help patients improve their health, achieve greater well-being, and enjoy life.
OBJECTIVE: Gillette Children’s Specialty Healthcare has a publication called Kid’s Health Matters (KHM). The KHM page is a wonderful resource for families undergoing treatment and for those seeking more information about the care Gillette’s provides. However, the KHM page is really hard to find, is not well organized and is not easy to navigate, furthermore the donation section is not apparent and some of the visual design is inaccessible.
ROLE: UX Researcher/UX Designer
TEAM: Elena Anderson, Michael Thao, Chad Wahlberg, Cristhian Arias-Romero
METHODS: Heuristic analysis, remote usability testing, findings & recommendations report, data synthesis
TOOLS: Google sheets, Miro, Sketch, Zoom, Powerpoint
RESULTS: RECOMMENDATIONS & FINDINGS REPORT CLICK HERE
I began my process by conducting a Heuristic Analysis to identify the website’s main points of friction. With the insights I gained from Heuristics I wrote a script, along with my teammates, for the remote usability sessions we were going to have. In the script we made sure to include scenarios so the participants could relate more thoughtful answers. Once the script was written and I began interviewing the participants. I absolutely love talking to people! While talking with them we came across some really fascinating pieces of information. After that I wrote my recommendations on how to solve several of the users pain points.
JOURNEY
GOAL SETTING
MY TEAM EVALUATION GOALS
Identify pain points to ensure KHM publications are: valuable, trustworthy, inspiring, engaging and meeting key goals.
Discover if KHM page and articles are simple to navigate, consistent, and easy to read.
Bring to light if the user feels supported and encouraged enough to take action, donate, feel like bringing their child to Gillette Children’s Specialty Healthcare.
GILLETTE CHILDREN’S HEALTHCARE GOALS
Provide expert, patient-first medical care in an integrated team environment that focuses on quality and safety.
Make life better for our patients and their families.
Provide inspirational and transformative stories and news about our patients and their families, our employees, and the broader Gillette community.
Provide an intriguing entry point to our Gillette website while also encouraging users to further explore the site.
HEURISTIC ANALYSIS
The first thing completed was an analysis of the KHM website. Using Jakob Nielsen’s 10 Usability Heuristics and their severity rating, I completed the analysis keeping in mind Gillette’s goals.
Reading a KHM story
Sharing a KHM story
Searching for a KHM story/topic
Subscribing to KHM
Learning about their care
Donating
*Below you can read about all of my findings by heuristic category.
-
The design should always keep users informed about what is going on Communicate clearly to users what the system’s state is — no action with consequences to users should be taken without informing them
Login should be up top, not at bottom of screen
You should always know where you are in website because of the header up top
Confirmation of selection when clicking through nav bar tabs
“Schedule Now” should be in a different color than the nav bar (NOT BLUE)
No consistency in typefaces across page
Not clear how to get to KHM
-
The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
Information legible and understandable on pages
Hard to scan, not very good hierarchy
Medical professionals page is accessible, not gate-kept by medical terminology
Search tags not consistent with article content
-
Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.
Clicked on “Schedule Now” button on accident and there was a clear X to avoid making the phone call
Donation buttons clear information if top buttons are changed
Not always easy to go back, via back button or nav bar
Not clear on how to share KHM, other than to share it via link from browser bar
-
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Theres no consistency is headers & main body text throughout website
Not consistent color choices on call to action buttons “schedule now” “donate” ect.
Clean minimal design consistency throughout website
Headers in nav bar are all capitalized
Headers are in bold
Noticed 9 different colors
Donations page is not accessible to everyone
-
Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
Information on nav bar visible throughout entire website.
All headers and sub headers organized in a clean and neat way
Subscribe, login, donate buttons found at bottom of screen
-
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
KHM should be it’s own tab in nav bar, since it is not clear that a story is under the KHM until you click on it and then see it on top of screen
Clear, simple design
Nice mix of images and text
SCRIPTWRITING
After conducting the Heuristic analysis, we had a really good idea of what some of the issues were. With that information we were able to write a script for our usability testing that would be able to directly get to the insights we were looking for, of course without priming the users!
USABILITY TESTING
We asked our users to walk through scenarios we created based off of our initial findings in the Heuristic Analysis. These scenarios were implemented to reinforce our observations and guide us to actionable recommendations for Gillettes.
SCENARIO 2: SHARING & SUBSCRIBING
After reading this article, would you share it with your loved one? Walk me through how you would go about sharing this information with them? Would you subscribe to Gillette’s newsletter to gain further information?
SCENARIO 1: FINDING & READING
A loved one was recently diagnosed with a complex medical condition. You want to find and read a KHM article to better understand what it’s like living with this condition. Walk me through how you would find a Kids Health Matters article.
SCENARIO 3: DONATIONS
After interacting with the content on the KHM page for a while, would you be compelled to donate? How would you go about doing that? How difficult is it to donate?
KEY USER INSIGHTS
Users are having a difficult time identifying where they are and what/if the information they’re consuming is of importance and value.
Annoyance with the disconnect between expected actions and actual actions of page buttons and navigation.
There also seems to be a problem with the trust-worthiness of the donation page and lack of consistency in design, disclaimer of third party processing and an all together different URL.
Search function also is proving to be a major contributor to user friction. Not only are articles/pages not tagged properly, but it isn’t immediately clear as to why there are two search bars. User’s tend to use the main page search bar which bounces them off the KHM page & again, can’t seem to get back to KHM.
IMMEDIATE RECOMMENDATIONS
Make KHM a more prominent force by adding it to main nav bar.
Shorten articles, make them more scan-able, and tag them accordingly.
Redesign donations page to reflect Gillette’s branding and instill trust in user
RECOMMENDATIONS
PAGE LAYOUT RECOMMENDATIONS
Make the header more pronounced so it is clear user is on KHM page
Instead of having two small story blocks, do one wider block, so it’s easier to focus
Make sure images match article title
Implement endless scroll and delete “show more stories” button, as it causes friction for some users
FINDING & READING: PAGE LAYOUT
The page title feels more like a statement “Kids Health Matters” as opposed to the main header of the page. The users didn’t seem to know that they were on this page and didn’t understand that it was a blog. The split screen layout feels cluttered and confusing. The pictures often don’t have a caption and they don’t match the articles. Additionally, the page takes too long to load.
SEARCHING RECOMMENDATIONS
Add KHM page to main nav bar
Make KHM search bar more noticeable or optimize to have one main nav bar
Paying attention to tagging system
Group articles by content: testimonial, profile piece, study, condition, etc.
FINDING & READING: SEARCHING
There are two search bars in close proximity, that makes it hard for users to know which one to use. Often times they would use the main navigation search bar and it bounced them out of the KHM page, which made it hard to find a way back, especially since KHM is not easily found on the navigation bar. When searching for certain topics, the user would get frustrated at the lack of consistency. Incorrect tagging of articles and pages are a major problem on this website.
ARTICLE CONTENT RECOMMENDATIONS
Have a clear plan for content. If it’s an inspirational story, add some context about what the condition is for people who have not heard of it from medical sources (meeting people where they are)
Make better use of headers and sub-headers to make informations scanable
Organize articles in a way that will let users browse through them in a more accessible way.
FINDING & READING: ARTICLE CONTENT
Article content is dense and unscannable. A lot of the information on the page isn’t immediately helpful. There is not a good balance of medical terminology and context setting VS. emotional stories & testimonials. At times articles feel random and unorganized.
SHARING OPTIONS RECOMMENDATIONS
Add quick copy link option next to social media buttons
Go directly to email through the website, not users computer
Make it so easy to share, user won’t be put off be extra steps to share
SHARING & SUBSCRIBING: SHARING OPTIONS
For users who do not use social media, there isn’t a versatile copy link option. It causes users to not feel motivated enough to follow through on the share. Additionally, when users want to email the article there seems to be friction because you can’t do it straight from the KHM page, instead it brings up the email app on the users personal computer, which is a pain point.
SUBSCRIPTIONS RECOMMENDATIONS
Focus on making articles must reads for users who are engaged and interested
Add more call to actions to raise subscription numbers
Advertise KHM as a publication, not a blog
SHARING & SUBSCRIBING: SUBSCRIPTIONS
The biggest issue users had was the fact that they aren’t sure that the content warrants a subscription based mostly on the fact that they don’t see value in it because they don’t have a personal connection to Gillettes or they don’t know of anybody personally that is going through something, or they simply are not interested.
VISIBILITY RECOMMENDATIONS
Move donation button, to top of side bar for exposure
Change the name of “Ways To Give” tab to “Donate Today” or something with a stronger CTA
DONATIONS: VISIBILITY
Donation button is at the bottom of the page. This makes it hard to find as many users won’t scroll down that far. There needs to be more call to actions for donations in visible key areas of the website. The “Ways To Give” tab is not effective enough of a call to action for users as it is not clear that its a donation page.
AESTHETICS RECOMMENDATIONS
Use consistent style guide
Add third party disclaimer, or do donations in-house
Model donations page after existing payment portals
DONATIONS: AESTHETICS
Donation page is not consistent with the rest of Gillette’s website, which raises a red flag for users. Not to mention, the URL is not the same as Gillette’s which is red flag number 2. There is also no disclaimer of third-party processing, and it just doesn’t look like payment portals that users are now accustomed to. This leads to users feeling like the website is not trustworthy. Furthermore, there are major accessibility issues with the current colors of the page (electric blue with white type) that would make it hard for some users to read.
FUNCTIONALITY RECOMMENDATIONS
Fix back-end to keep information in fields, in case donation frequency changes
Fix navigational buttons on this page
DONATIONS: FUNCTIONALITY
The buttons on the page do not work as expected. If a person wants to give a one-time donation, but accidentally presses the monthly button and doesn’t realize it until right before submission and they switch it, all the credit card info disappears. That would make it really easy for user to change their mind about donations. Additionally, the go back button seems to not let users go back to the previous page, which again, adds user friction.
CLIENT FEEDBACK
“Our department at Gillette Children’s is so happy with our Prime experience! We very much appreciate the hard work and effort the UX students put forth, it definitely shows in all the Findings and Recommendations Reports we received. We are moving forward and doing our best to implement ideas from these reports to make our public facing website better for our patients, their families, and other site visitors as well. Thank you!”
- Leslie Mollner, UX/Web Specialist
CONCLUSION
Discovering our data-based set of findings helped me form a clear strategy on how to tackle problems. My hope is that these findings will help Kids Health Matters Publication grow and reach out to the community it serves. KHM content is highly valuable part of the Gillette Children’s Specialty Healthcare website and with these recommended changes, that can transfer into higher visibility, donations, and trust.