WellMed Charitable Foundation

 Project Summary

This project allowed me to use my experience from serving seniors in social work and my UX research and design skills to examine and re-imagine the website for a local nonprofit and senior activity center, WellMed Charitable Foundation.

The Challenge

I responded to a UX research and design challenge to gather insights and create project deliverables for a gym of my choice. My brief was to analyze, and ultimately improve the flow of researching, selecting, and signing up for an online fitness class as well as reviewing and analyzing their website’s functionality and visual design.

My goal was to use the UX process and my familiarity with needs of seniors to improve the usability and accessibility of WellMed Charitable Foundation’s Austin Senior Center’s website.

Details

Methods: User flow analysis, site maps, content audit, heuristic, accessibility, & competitive analysis, user interviews, affinity mapping, empathy maps/user personas, card sorting, sketching, outlining the new content structure, wireframing, creating a style guide, prototyping, and usability testing

Tools: Figma, Whimsical, classic ol’ whiteboard, iPad Pro

Duration: Nov - Dec 2020

Contributors: This was a solo project that allowed me to practice the UX design process from end-to-end. I had support from my mentors at Juno College who provided me with valuable feedback throughout the project. I completed usability testing on my prototype with my peers and presented my work to the cohort.

Market Research

I have worked as a resource specialist and as a case manager in skilled nursing facilities and part of my role included getting seniors connected to information and services in their area. I have a lot of experience making quick judgments about local and national resources based on the clarity of content (and overall trustworthiness) of their websites.

Silver Sneakers is a program that is offered by many health insurance providers that allow seniors to participate in fitness classes online and in-person at various participating gyms and community centers around the US.

To start my project, I conducted a mini-competitive analysis (pictured below) to observe the navigation from the Silver Sneakers website to the websites of various local gyms in Austin, TX to see which ones provided accurate and accessible information.

Insights & Pain Points

The only gym in the Austin area that provided basic information about the Silver Sneakers program was the YMCA. LA Fitness mentioned Silver Sneakers, but gave no information on how seniors could use it (it was described as a perk for paying members). The Austin location of the WellMed Charitable Foundation failed to mention Silver Sneakers on their website at all and there was no link to their website on the Silver Sneakers website.

Once I found the WellMed website on my own, it was confusing from the beginning because the Austin location’s website seemed to be “housed” within the main foundation’s, and there were two menus. I could not find the term “Silver Sneakers” anywhere.

For nonprofits like WellMed Charitable foundation, missing information on the site could mean a senior doesn’t benefit from helpful programs

This could be because they didn’t find the information themselves, or social service providers decided not to refer the resource. It is important for websites to convey simple, clear, informative, and trustworthy information.

Strategy & Stakeholders

Before beginning the discovery work, I contacted the manager of the Austin location of WellMed Foundation and developed some research and design goals to keep in mind throughout the project.

Reaching Out

I reached out to the manager of the Austin location of the WellMed Foundation to confirm that they did, in fact, offer Silver Sneakers programming for local seniors. She confirmed that they offered a few different Silver Sneakers classes but that services were free for area seniors regardless of their ability to pay a gym membership fee (this information was not on the website). She believed that the most frequent visitors to their website were local seniors, family members of seniors, and senior social service providers. I asked about their processes for building their website and she informed me that their corporate office made all of these decisions and sometimes the information was not up-to-date.

Research & Design Goals

• Narrow the focus of the project to the flow on WellMed Foundation’s main website - I had discovered a breakdown in the flow from the Silver Sneakers website as well (above) but I wanted to approach this project with a reasonable scope

• Learn more about each of the types of visitors to the WellMed website and conduct user research with them to understand how to design the new flow to meet their needs

• Understand how the COVID-19 pandemic has influenced:

  • how other local gyms deliver services and share information on their websites

  • how seniors go about researching and engaging with health & wellness activities

  • how case managers and senior service providers judge the “trustworthiness” of a resource to share with seniors

• Use insights from research and discovery to create accessible designs that inform users about the Silver Sneakers program at WellMed Charitable Foundation’s Austin location and allow them to take the next step to sign up for these services (address the user flow)

User Research

I had already discovered that the flow for users to research and select a fitness class at the Austin WellMed location did not exist - therefore I chose not to do usability tests with the current designs to keep from frustrating users. Instead I wanted to focus my questions on what they would need to see in order to feel comfortable signing up for a fitness class during the COVID-19 pandemic.

Empathy Maps

Before conducting user interviews, I created some empathy maps (pictured below). Using these empathy maps, I created two discussion guides, one for my interviews with seniors and another for my interviews with senior case managers. You can view these discussion guides using the links below.

• Senior Discussion Guide

• Senior Case Manager Discussion Guide

User Interviews

I Interviewed a handful of seniors and senior social service providers to understand some of those aspects which cause them to “trust” a non-profit providing direct services. I also asked them about their preferences when choosing between different gyms or health and wellness programs. I acknowledged the context of conducting this research during the global COVID-19 pandemic by asking them about the unique challenges and opportunities around social interaction and wellbeing that had come up for them

User interviews gave me valuable, new information about how seniors and case managers evaluate service providers’ websites for quality and safety of the services they provide

After completing the interviews, I transcribed what users said and pulled quotes about their significant comments. From there, I created an affinity map on my whiteboard and saw several themes from the conversations.

Insights from user interviews:

• Seniors were still socializing during this time in the pandemic - they told me they were actively participating in zoom meet-ups to engage in their regular activities like happy hours, artist critiques, and sharing meals with their loved ones (technology was not as big a barrier to them as I’d originally predicted)

• Particularly during the COVID-19 pandemic, seniors and social service providers have both steered away from health and wellness programs or gyms due to lack of communication about COVID-19 policies and procedures and insufficient details about classes and services they offered (such as how many people would be in each class, the date and time, and how the space would be cleaned)

• The COVID-19 pandemic didn’t stop the seniors I interviewed from having fitness goals or from incorporating health and wellness activities into their daily lives and regardless of their involvement with a gym they still valued routine

• When given a chance to look at the WellMed website, seniors and senior case managers could not tell that the Austin location offered the Silver Sneakers benefit or that it was a gym - they expressed wanting to see more pictures of seniors and the term “Silver Sneakers”

“I would need a website to be organized to trust it - so I can find what I’m looking for”

- Senior social service provider

Card Sort

Next, I used OptimalSort to conduct a card sort to gain insight on how 7 of my peers in the social work field would intuitively group the different pages of the website. I asked them to drag the names of different website pages into categories that they created - I was curious if they had some of the same struggles as me when I was re-imagining the new structure. You can see how I took tallies of the categories users chose for each page in a sample from my notes below.

Insights from card sorting:

• Unexpected insight: the naming of the various services that WellMed Foundation provides really seemed to throw users (including myself) off when deciding where to place the information. Language like “Active Daily Living” or “Stress-Busting Programs” may be familiar to those who have previously received services or who are directly involved but new users seemed unclear on who the services were for.

• Unexpected insight: the current architecture supports navigation for a caregiver but not for a senior.

• Sorting revealed that many of the users did not know where to place information on the Silver Sneakers Benefit or the “Active Daily Living” program.

Analysis

This part of the project was intended to help me get insights about the organization and usability of the website without making assumptions about solutions that were unfounded in research. Completing the tasks below gave me more concrete evidence for the design choices I made.

Site Map

I made sure to document the information architecture of the website before suggesting any changes. Architecture that makes sense, even to a brand new visitor to the website, can improve the user experience overall. You can see the original sitemap below.

Insights from the original sitemap:

• Much of the website content is grouped under “caregiver support” and “charitable giving”

• The term “charitable giving” includes pages that may not necessarily fall under this category, like “privacy policy” and “about us”

Content Audit & Heuristic Analysis

Next, I completed a content audit and heuristic analysis to document all of the existing content and examine the usability of the website. I used the 10 Nielson Usability Heuristics (broad rules of thumb for interaction design) to make comments on each page about usability, as you can see below. The content audit was completed for each page of the existing website and gave me a thorough knowledge of the different paths users could take to find information. You can see the full content audit here.

Insights from content audit & heuristic analysis:

• Consistency - The website is not responsive for mobile and many of the pages are very long without the option to condense information or navigate away without scrolling all the way through. There were two menus (only on some pages) on the desktop version of the website which made the user experience inconsistent and increased the users’ cognitive load to complete tasks. The terms “Podcasts” and “Caregiver SOS” were used interchangeably, and so were “Register” and “Create an Account.”

• Missing information - Seniors, caregivers, and case managers will not know that the Austin location of the WellMed Foundation offers the Silver Sneakers program, because this information is not anywhere on the website. Consistent with the card sorting exercise, there is a missing pathway for seniors to enquire about or sign up for classes with their Silver Sneakers benefit (the pathway for caregivers with clear labeling for different programs seemed to give users in the card sort a more intuitive way to sort the information).

• Organization - Some information, although labeled correctly, was not put into the correct pages; for example, information on “Caregiver SOS” was incorrectly placed on the “Caregiver Coaching” page and Information for providers (regarding the Stress-Busting Program) is somewhat hidden because it’s categorized under “Caregiver Support.” The information available on the desktop site is not the same as what’s on mobile and is organized differently, for example, the “Video” section is not visible from a mobile device.

• Repetition - Much of the information on the website can only be found in one place and with one navigation path. Users might not find the information they need because they look in another place and are not given ways to navigate to the correct location. Increasing the repetition on the website and giving users more chances to find the information they are looking for could be beneficial.

• Broken Elements - There are currently several broken links to internal pages that leave the user with no way of getting important information, for example, the “Email Me” links in Caregiver SOS section do not work.

Accessibility Analysis

The accessibility of a website should always be considered but especially when the website’s purpose is to provide information on services for seniors. The target audience consists of seniors, senior caregivers, and senior social service providers in the area who may want to connect seniors to services. As we age, it becomes more difficult to read small text that doesn’t have high contrast. Design for seniors should make information readily available and repetitive, reducing the need for a user to remember information.

I looked at the contrast of the website for users who might have visual challenges with the WebAim Contrast Checker and the Web Content Accessibility Guideline (WCAG) Standards. I used the Sim-Daltonism application to view the website as it would appear for persons with multiple types of color-blindness like Deuteranopia (no green cones) and Deuteranomaly (anomalous green cones). I also checked to see if images and form fields were labeled for people who use screen readers and checked to see if content was offered in other languages besides English. Switching to another language on a website should not compromise the quality of the information provided.

Insights from the accessibility analysis:

• Overall, the website had readable text that offered enough contrast ✔ but in some places the design includes white text over a lightly-colored background which makes the information less visible ✘

• The site still maintained its functionality despite the color changes with the Sim Daltonism app ✔

• There was no label or title for the list of Caregiver SOS locations so persons with screen readers might not have known what they were reading ✘

• Form fields remained labeled even after I clicked into one form to fill in a response ✔

• Some content on the website is offered in Spanish ✔ but only in a few sections ✘

Competitor Analysis

I explored (and sketched) how other gyms displayed their menus and how topics within the menus were organized to get an idea of competitor website structure. I also observed how other gyms provided updates on COVID-19 policies and safety measures.

The Austin WellMed Senior Center is part of the WellMed Charitable Foundation - a healthcare nonprofit. Their website has a dual function of informing seniors and caregivers of WellMed Charitable Foundation programs and services and requesting donations, while also informing seniors in Austin of what services they can expect at this particular senior center. It made sense, therefore, to also examine the website structure of successful nonprofits with similar missions.

You can see some of my notes from the competitive analysis below.

Insights from competitive analysis:

• Other gyms provided at least 1 method for providing updates or information on how COVID-19 affected their service delivery

• Gyms and nonprofits alike had responsive menus when viewed on a mobile device

• Menus that I tested all had sub-topics that I could click and view from the main navigation, making it clear which information “lived” in each section of the website

• Other websites had an average of around 7 main menu categories and even more sub-topics that users could explore

• The “donate” button was always visible on nonprofit websites

• Designs were repetitive, clear, and had high contrast

• Other websites had more CTAs which allowed users to complete actions like sign up for classes or contact the gym/nonprofit

Problem Statements

Austin WellMed Charitable Foundation’s website is missing a flow that would allow a senior with the Silver Sneakers benefit to research fitness options and sign up for a class. This is evidenced by:

This is evidenced by:

• Initial analysis of the flow and user interviews showed that users could not find the term “Silver Sneakers” anywhere on the website and were not confident that the Austin location offered this benefit.

• Competitive analysis revealed that other gyms and nonprofits have high-contrast menus with a navigation structure that allows the user to see main “topics” and individual pages within those topics. Additionally, COVID-19 information was provided in at least 1 place and informed users on how their experience would be affected.

• User interviews revealed that seniors and senior case managers need to see specific information about fitness classes, especially during the COVID-19 pandemic when many have concerns about safety or that the class is even still offered.

There are many aspects of the website that negatively affect its overall usability.

This is evidenced by:

• The content audit and heuristic analysis revealed that the mobile version of the website is unresponsive and includes different information than the desktop version. Additionally the site has broken links and the language used to define different services and programs is inconsistent throughout the user experience. Lastly, some information was not placed on the correct page.

• Card sorting and competitor analysis revealed that WellMed Foundation has many different services and programs to offer and may need a combined, more extensive menu navigation (like competitors) where users can explore their options by role (like senior or caregiver) and avoid clicking on the incorrect page.

These problems are worth addressing because seniors in the area may miss the opportunity to engage with health and wellness activities during a global pandemic. Creating this flow and improving the usability of the website could also impact social service providers by increasing their confidence to connect a senior to this resource successfully.

How Might I…

• Create a flow for seniors to research and sign up for a fitness class on the Austin WellMed Foundation’s website that provides ample information about the current COVID-19 policies and procedures that affect service delivery?

• Incorporate the senior “role” into a main navigation that includes a clear overview of all the website’s content (reduce 2 menus to 1)?

• Make mobile designs that are usable and accessible, with many repeating elements and consistent language that decreases the chance for a high cognitive load for the user?

I chose to design for the mobile version of the website in order to be more purposeful about the content included on each page. I challenged myself to make a mobile website that would be useful in the palms of seniors.

Sitemap & Information Architecture

Before I built wireframes, I explored a few ways to organize the website content with the insights I had gotten from the discovery phase. I focused on the jobs to be done for seniors, caregivers, community members, and social service providers and wrote a content outline document. I paid close attention to increasing the repetition of important information, particularly in those different places users may look for certain information on the website.

This was the most labor-intensive part of the project but also the work I was most proud of. Condensing two menus into one and demonstrating a thorough knowledge of WellMed’s programs took a lot of consideration.

In this new site navigation design:

• WellMed Charitable Foundation’s program and service delivery is highlighted by the structure of their website. The user can specify if they want more information on services and programs offered in the community (like hosting events and awarding grants locally) or for seniors and caregivers

• The user has multiple ways to find information:

  • Each main navigation item, e.g. “about us” or “programs & services” is clickable and will bring the user to a summary of all those elements contained in the sub-pages

  • The navigation itself shows the users which sub-pages are available

  • CTAs to other pages are added in multiple places in case a user navigated to the wrong page in error

  • The footer contains an outline of the website’s navigation

• “COVID-19 Response” & “Blog” are included under “About Us” per user interview and card sorting insights

• “Volunteer” was given its own category apart from “Charitable Giving” topics, which are all related to money

• Since WellMed Foundation provides the service of awarding grants and organizing sponsored events locally, this information is included in the “programs & services” section under “community services”

Sketching

When sketching out new designs, I had to stop myself from recreating every page entirely. It served me to stop at this point and (once again) consider the project brief and scope of the work. I decided to step away from wireframing and prototyping the entire website in order to focus my attention on what mattered most for this project, the flow for seniors.

I considered (and re-designed) the architecture for the entire website, but my wireframes and prototype focused on the flow for seniors to sign up for services.

I found two opportunity areas on the Austin WellMed page for including this new information. Below, you can see how I re-imagined the “services available” and “become a member” sections with the new flow.

Wireframes

I created wireframes to make a sort of visual outline for myself moving forward, before being choosy about elements like font sizes, colors, and exact spacing. The process of creating the wireframes was useful because I could see some of the “opportunity areas” for new ways to help users recover if they’d navigated to the wrong page. I started to develop a cohesive design that went beyond labeling menu and sub-menu items.

Below you can see some wireframes I created to show the flow from the home page for a senior to register for services or classes. If you’d like to open the image in a separate window, click here.

Usability Testing

I worked with two peers in class to discuss the positive aspects of my design and possible areas for improvement with usability tests. Both users had worked on their own prototypes for similar prompts. I prompted the users to perform different tasks with my prototype by using phrases like these:

• “From here, I want you to find out what you can about the Silver Sneakers program...”

• “Let’s pretend you’re a senior considering a gym but you’re a little wary because of the COVID-19 pandemic…”

• “Try to donate to this organization...”

• “Let’s say you’re a caregiver looking for the Austin, Texas senior center location…”

These tests were extremely useful because I got perspective from fellow designers about how I could improve the user experience. To finish up the project I watched the videos I’d recorded of these interactions to pull quotes and carefully observe which actions my peers took with the prototype. You can see some of the insights I pulled from this exercise below.

 Insights from Usability Testing:

• One peer suggested condensing text-heavy sections of the website with a “read more” option

• Some seniors may not recognize the hamburger menu shape will pull out the menu options with a click, so I could write “menu” instead

• Another peer suggested that I should create “summary” pages for those menu items with sub-topics; for example, if the user wants to learn more “about us” they can click that page instead of having to choose one of the sub-pages in the navigation

• My peers both wanted me to add information on Silver Sneakers to the general “Services for Seniors” page, instead of only coming up in the flow once the user navigated to the Austin location

I received positive feedback from my peers about the designs. They found the information to be concise and the new site easy to navigate through the flow. They appreciated the “front and center” information about COVID-19 and that the donate button was always available from the menu.