Wellstar Dot Org
Overview
Wellstar’s Dot Org teams are tasked with elevating visitors’ experiences across Wellstar.org. From patients booking a virtual appointment to physicians maintaining their new and existing patient records, Wellstar.org is a hub for delivering powerful solutions to everyone.
The Challenge
Wellstar.org primarily receives visitors via desktop devices today. However, the world is witnessing a dramatic increase in mobile users year after year. In a study from last year, more than half of the traffic found on the internet (58.33% to be exact) came from a mobile device, and the numbers are only increasing.*
The challenge was for a handpicked task force of team members (including myself) to identify opportunities to improve the user experience for visitors across our top 10 most visited URLs.
Role & Responsibilities
Below are the responsibilities each team member performed for their designated pages to research.
Collaborate among designers, SEO analysts, and support analysts to identify top visited pages and primary experiences
Conduct qualitative research through user behavior analysis via user sessions in FullStory
Perform quantitative analysis by identifying behavior metrics and user segments based on FullStory sessions.
Create a figjam insights board with screen grabs, annotations, and callouts for UX improvement
Coordinate and present a preliminary readout of these findings to stakeholders with recommendations
Process
Discover: Requirements and constraints gathering
Explore: Activity sampling and task analysis.
Test: Accessibility evaluation and benchmark testing
Listen: Monitor analytics and metrics for trends and anomolies
Discover
Requirement gathering
Our team began by forming a chat to collaborate on times for meeting calls, gathering insights, and creating the final readout. Our SEO analyst had already identified the top 10 most-visited pages, laying the groundwork for us to focus on experiences.
The image on the left outlines the expectations for the final deliverable. I took ownership of the second and fourth bullets since they required extensive UX skills.
Analyzing user behavior in Fullstory
Identifying underlying usability issues
Confirm the severity and impact of the issue with Fullstory segments and metrics
Create a Figjam file to present and make a case to the stakeholders for implementing recommendation changes associated with findings
Project timeline
After our initial meeting and chats during the first week of the project, we began to prepare materials. I focused on getting the Figma file format presentable and organized so that we could dump all our data and insights in the same place in an organized manner.
Explore
Task analysis
The following week consisted of observing sessions in FullStory, identifying the pain points below.
Error clicks
Slow page loads
Crashing/404 pages
Thrash clicking
Dead clicks
Enengaged elements
Test
Benchmark Testing
Small interactive elements
informational hierarchy stunts user engagement
Visual Dissimilarity & Detachment
informational hierarchy stunts user engagement
There were three key insights gained from benchmark testing:
Insight 1: Visual dissimilarity & detachment
The way this dropdown opens up breaks basic visual design principles by not presenting a clearly defined boundary shared between the sub-dropdown and the top bar element. While this element is currently masked for user data privacy in FullStory, the present design lacks a clear visual relationship to the sub-dropdowns and links associated with the selection.
In addition, there is no state-change for the top bar in the drop-down, further disassociating the action-information display relationship.
Recommendation
Update the sub-dropdown design to be built into the page layout so that users more naturally associate the information with it’s parent drop-down.
Insight 2: Poor usability for drop-list function
Scores of users in a month’s time clicked on the “View All Services” link on the Kennestone hospital page. The behavior of the link is unintuitive and takes away the user’s sense of control when engaged.In addition, there is no state-change for the top bar in the drop-down, further disassociating the action-information display relationship.
Recommendation
Update the link functions to keep the user’s current scroll position on the page “fixed.” Alternatively, change the design to horizontal-scroll carousel where users can click pan through the list of service line cards.
Insight 3: Informational hierarchy stunts user engagement
Many users in a 30 day span clicked on the phone number for the Kennestone Regional Medical Center page and a similarly high number of visitors did the same on the Cobb Medical Center page. Conversely, the location introduction paragraph text showed no signs of interaction or engagement on the heat maps for either of these pages.
Recommendation
Swap the positioning of the description paragraph in the page header with the position of the address and phone number information beneath.
Accessibility Evaluation
Below shows an instance identified in which a accessibility concern was addressed.
Small interactive elements
Fitt’s Law is the principle that the smaller an element is, the more time and energy it takes for the user to successfully interact with it. In the case of this carousel as an example, the right chevron arrow is small and hard to click on. In addition, the pagination controls jump up and down to hug the bottom of the tile in view based on how much content is in the tile.
When UI controls are presented as small, “moving targets” this decreases feature’s usability and poses a significant accessibility concern for the user.
Recommendation
Update the pagination component design to have larger chevron arrow icon sizes. Additionally set the carousel parent frame height to a fixed measurement to prevent the controls from moving with each click.
Listen
Usability Bug Reviews
We included a section that shows what components in Sitecore, our organization’s CMS, would be affected by implementing the recommended changes. Links, snippets, and other additional resources were supplied to jumpstart addressing the associated components being used in the experience editor.
Impacted Sitecore components...
Testimonial
“Collaborating with John Mark on the Wellstar.org Mobile Responsive Traffic project was extremely impactful and crucial to it’s completion.
His proficiency in Figma and UX design principles allowed our team to discover insights as well as create a seamless, visually appealing presentation for our findings. I’m grateful for the opportunity to work alongside such a creative and knowledgeable colleague. ”
Outcomes
A figjam readout board of data-driven, poor experiences for users identified in FullStory
Callouts for specific instances of poor UX with recommendations to improve elements found in top-visited pages
Documentation for impacted components in Sitecore
References
*Pelaez, M. (2024, March 11). 75+ mobile surfing: Stats on internet traffic from Mobile Devices (updated). Thrive Internet Marketing Agency. https://thriveagency.com/news/75-mobile-surfing-stats-on-internet-traffic-from-mobile-devices-updated/#:~:text=95.8%25%20use%20mobile%20phones%20to,desktops%20(Source%3A%20Statista).&text=4.,2021%20(Source%3A%20Statista).