Small Victories Foundation

Closing the health gap and harnessing technology for social good

Project Summary

For part of my master’s program in social work, I was tasked with completing a self-directed project based on the Social Work Grand Challenges. The project was open-ended and allowed me to use my design skills and background in social work to support the mission of a local non-profit, Small Victories Foundation (SVF), to connect survivors of Traumatic Brain Injury (TBI) to educational experiences in the arts.

The major focus was information architecture, the addition of necessary content, and the visual design of their website.

Often, community non-profits are relied on heavily to support seniors and persons with disabilities (there can be a service gap after survivors leave the hospital or outpatient programs to continue their rehabilitation); I volunteered to assist with their website so they could focus on their direct service delivery. I wanted to support their mission of connecting TBI survivors to educational experiences that could help to advance long and productive lives. I knew I could use UX principles and modern design technology to make the SVF website a better tool for delivering their message (harnessing technology for social good).

The Challenge

I found SVF’s website on a resource page for TBI survivors but struggled to find answers about their purpose and the services they offered. I reached out to them to see if we could make any improvements to increase clarity, and they graciously offered to work with me on this project.

Methods: stakeholder meetings, literature review, usability testing, user interviews, affinity mapping, heuristic, accessibility, and competitive analyses, content audit, user personas, card sorts, iterative sitemaps, sketching, and wireframing

Tools: Figma, Whimsical, Adobe Illustrator and Photoshop

Duration: Part-time project from Summer 2020-Summer 2021. SVF only had a handful of volunteers on their board, so it was important to give them plenty of time to review my work and give feedback.

Contributors: This was a solo project that allowed me to practice the UX design process from end-to-end. I have worked with the SVF board of directors and used insights from research to make suggestions for the copy. Sam Heath (SVF board member) will use my designs to code the website.

Goals

SVF works to close the health gap and advance long and productive lives for survivors of TBI. How could I use technology (design) and my social work skills to understand and support their mission, using the Social Work Grand Challenges for inspiration? My goal was to design and collaborate with these subject matter experts to make the information on their website more accessible, informative, inviting, and easy to use.

Using UX principles and modern design principles to make the SVF website a better tool for delivering their message

Research

Once SVF board members and I discussed the benefits of pursuing the project, I needed to develop a strategy for conducting UX research and design. The methods I used in this step included a stakeholder meeting and a literature review.

Stakeholder Meetings

The first step in my UX design process for this project was organizing a stakeholder meeting with the SVF board members. Their input would be crucial if I was going to aim the rest of my discovery research at the areas they felt were most important for their website. Before our meeting, I familiarized myself with their website and learned as much as I could about their mission. I created a discussion guide so that we could stay on task and start off on the right foot with expectations. In our meeting, I asked some of these questions:

What did SVF want their website to achieve? What were some of the constraints affecting the presentation of this information?
What content on the site was missing or no longer relevant? What new information was needed?
What words would we want visitors to use to describe the new site?

Volunteer SVF board members offered so many excellent ideas about what was needed but ultimately we needed to narrow the focus in the interest of making impactful changes in a reasonable timeframe. We worked together to establish our research and design goals to build a site that would:

Consider the needs of different kinds of site visitors, including people recovering from TBI, case managers, family members, and those interested in donating, volunteering, or becoming instructors
Provide a clear path (with examples where possible) and information about next steps for any of the site visitors mentioned above who might want to become involved
Explain each of the ways a visitor could support SVFs mission and provide a next step
Explain why SVF’s mission is to connect survivors of TBI to educational experiences and why this service is beneficial

In order to address the goals above, SVF board members agreed they’d like to examine the current architecture of the site and add the following pages:

Why Educational Experiences?
Community Outreach
Classes & Instructors
Client Showcases

Literature Review

Small Victories Foundation provides educational experiences to individuals recovering from Traumatic Brain Injury. When I visited the SVF site, I only found brief information about why educational experiences are helpful: “Research demonstrates that learning and appreciating music and varieties of art helps form new pathways in the brain.” In order to make design suggestions for the website, it felt necessary to explore this research to have a better understanding of SVF’s place within the TBI recovery community.

Some notes from my review of the TBI intervention literature

Insights:

the research I reviewed reinforced that creative or non-traditional interventions can be beneficial for individuals recovering from TBI
the brain has neuroplasticity, or the ability to create new neural connections from new experiences
insurance coverage, socioeconomic status, age, race, geographic location, family supports and community supports can all affect an individual’s recovery

Discover

Next, I needed to understand the current design and avoid making assumptions about which aspects were working and which were not - according to users. The methods I used in this step included usability testing, user interviews, affinity mapping, and card sorts.

User Research

I chose to conduct my user interviews with a mix of designers and social service providers in my circle. I felt that the social service providers would be able to share valuable input on the “trustworthiness” of the website (would they refer clients or families to SVF based on their experience?) while the designers could comment more on its overall appearance and usability.

Usability Testing

I prepared task-based discussion guides so that I could watch how users navigated the SVF website to complete tasks such as: finding specific board members, telling me (after a brief first glance) what services they provide, and donating supplies or funds. During this process I encouraged them to share their thoughts aloud and I asked why they looked for information in specific places. I jotted-down their comments about the copy, information architecture, visual design elements, and functionality.

User Interviews

I incorporated questions at the end of usability testing that were more directed at the individual thoughts and opinions of my users (social service providers and designers) so that I would not prime their actions during usability testing. I asked questions like “what makes a website trustworthy for you?” and “would you feel comfortable referring a client to this foundation for services?”. I used open-ended questions to ask for their honest opinions about what worked and didn’t work for them, to see if I could draw out any more commentary.

I took notes during these interviews and re-watched my recordings to pull quotes and build an affinity map (pictured below).

Some quotes I pulled into affinity maps from user interviews

Takeaways:

Users were not sure what services SVF provides after being asked to give a 1-2 sentence summary after having 1-2 minutes to explore the site; users should be confident about the scope of services without having to hunt (this info. should be more obvious)
Users were often frustrated by broken links that affected the functionality of the site
Overall, users wished for more consistency in design and the amount of content on each page (it currently differs greatly)
Users felt they couldn’t grasp the personality of SVF
Users were uncertain why creative experiences are helpful for individuals recovering from TBI and wanted to see case examples or statistics
Social Service providers specifically were looking at the contact info and forms with a critical eye, and didn’t feel that the path for receiving services from SVF was clear to clients or those looking to refer clients

Card Sorting

The insights I gained from conducting user interviews and brainstorming “jobs to be done” showed that users felt that the information on the site should be organized differently. I wanted to see how my users’ mental models would inform the way that they categorized the pages of the website.

Takeaways:

Users placed “events” and “services for TBI survivors” in the What We Do category
Users placed “volunteer with us,” “donate money,” “donate supplies,” “volunteer,” and “become an instructor” in the Support Us category
Users placed “mission and values” and “board of directors” in the Who We Are category
Users each placed the various forms, the blog, and the “Why Educational Experiences?” information that the board members wanted to add in different categories, suggesting that each of these may need their own place on the site

Analysis

In order to suggest revisions to the website, I needed to understand the current design and avoid making assumptions about which aspects were working and which were not - this time by using heuristic design principles, competitor analysis, a content audit, and agreed upon guidelines for accessibility.

Competitor Analysis

I completed a competitive analysis as a means to understand how other organizations and foundations provide information about their operations and services. I was curious how they “introduce” themselves (board members or staff) to users and how they split up copy into the various sections of their websites. More generally I was looking at the usability, features, and appearance of their websites as well.

Since SVF provides services to survivors of TBI in central Texas, I considered these groups “direct competitors:”

After SVF board members told me they wanted to include a page about their community outreach efforts, I also included the “indirect competitor” below because they also provide this service in the Austin area:

The Contemporary Austin

Takeaways:

Other service providers for survivors of TBI had websites without overly complex functions - the designs were simple but cohesive and offered variety without overwhelming the user with flashy features
CTAs which called the user to visit other pages were very common and it was rare for a page to only contain copy related to the title
Varying text sizes, colors, and spacing helped to distinguish the hierarchy of content on each page, but each website had a design system that influenced the appearance
Large menus which contained most of the pages on the site were common; if a page was not included in the menu, there was a CTA for it or it was located in the footer
Some sites broke down the user journey by their particular role, for example, BrainLine had a designated space in their menu for caregivers and professionals
The use of hero images, icons, and cards broke up the copy of the sites, making them more digestible

Content Audit/Current Sitemap

Another step in my process was the content audit; I made notes about what was included on each page and designated a section in my Figma file of full-page screenshots so that I would always have a record of what the design looked like before I started sketching. I used a sitemap to understand more about the information architecture and distribution of content across the website.

The original sitemap that I sketched out

Takeaways:

The site seemed unbalanced, much of the content is on the “About Us” page, while other pages had only a small amount of text or clickable buttons/CTAs
Information I expected to find under a “What We Do” or “Our Services” page was on the “About Us” page
I wondered if the individual board members could be combined on a single page and if all information about donating could be combined as well
The content audit showed me that there was a lack of repetition of information on the website; pages were truly separate and content that “lived” on one page was not alluded to on others

Heuristic Analysis

Before I could start sketching or proposing design solutions, I needed to get some insight into the current website. I studied every page and took note of what was working well for me and what wasn’t, keeping in mind the Nielsen Norman Usability Heuristics for possible improvements in later designs. I documented all of my work so that the board members of SVF could see as well.

You can see the full heuristic analysis in my Figma file.

Takeaways:

Several of the links are broken on the website
On mobile, the user cannot see several of the sub-pages that exist, because the main menu does not expand fully (for instance, the user cannot see the page “donate supplies” unless they visit the website from a desktop computer, pictured above)
Elements of the information architecture are not uniform - for instance, some page titles are differently named from what the user clicks in the menu
There are few ways for users to “recover” if they navigate to the wrong page unless they start again from the main menu (absence of CTAs or breadcrumbs)
The site is lacking in repetition, unnecessarily relying on users to retain information

Accessibility Analysis

Analysis of the current site would not be complete without checking for any roadblocks that might come up for people with different abilities. SVF serves individuals recovering from TBI who may have cognitive and visual challenges, so I decided to pay close attention to:

Visual accessibility
Color contrast
Alt tags

I checked the accessibility of the site to see if it met the standards offered by The World Wide Web Consortium, the Web Content Accessibility Guidelines (WCAG), and ran a report with the Bureau of Internet Accessibility.

Takeaways:

Several sections on the site have text or buttons that do not meet the WCAG standards - you can see this in the image above.
Some of the content was readable but I had difficulty and found myself “skimming” some of the larger sections and missing important content
Those who use alternative technology might have difficulties with the site; some Alt tags are missing, which help to label graphic or non-text content for persons with visual or cognitive impairments
Lastly, some of the form fields were not labeled, so a person would probably need to get help from someone else to get in contact with SVF

Moving forward I will work with the developer to have Alt tags in appropriate places. Designs will include high contrast and the text on the site will be written in a larger, clear font. Information on the site will be repetitive so the user is not expected to retain information from page to page.

Define

I needed to determine how I would design the website and for who. I needed to take all the insights I’d gleaned from research and analysis and narrow down a path for creation. The methods I used in this step included creating a chart of personas and “jobs to be done,” drafting problem statements, and asking “how might we?” questions.

User Personas and ”Jobs to be Done”

The next step was to consider the “jobs to be done” on the site. Different users will come to this space to complete their own tasks. To address SVFs goals for their new website (mentioned above), I defined four different user personas, their relative goals, and what would be needed for them to accomplish these goals.

A chart I made to remember the “jobs to be done”

I kept this chart handy and edited it as necessary throughout the design process - it was helpful to consider the different users on each page to make sure that their path was clear to them. It was apparent to me that users would need concise information that would allow them to build trust with the foundation and also understand the methods for service delivery. Each type of user to the site needed a path they could follow (like an instructor interest form) and it needed to be readily accessible on the page where they would expect to find the information.

Problem Statements

Insights from discovery and user research reveal that the organization and transparency of information about SVF’s role within TBI recovery is not currently giving users a full explanation of the services provided or why they are beneficial. This is evidenced by:

Stakeholder meeting revealed that SVF does not currently have content on the website which explains their role in community outreach
Card Sorting revealed that a page which explains the benefits of educational experiences does not logically fit into other categories and could potentially need it’s own specified space
User Interviews revealed that users could not correctly identify the services provided by SVF within 1 minute of viewing the site and did not feel confident in their necessity: “I’m not convinced about why the educational experiences help recovery specifically”

Additionally, users do not have clear examples of the process, experience, and potential impact of their own role if they wish to be involved as a client, volunteer, or instructor. This is evidenced by:

User Interviews: “I can’t learn more about what it’s like to be an instructor” and “can you put pictures of people participating? I wanna see someone learning to play guitar!”
Stakeholder meeting revealed that the SVF site does not currently have pages which highlight client showcases, describe types of classes that are available, or introduce the user to SVF instructors
Heuristic analysis revealed that five pages are not accessible from the mobile menu, so important information is potentially lost unless the user visits the website from a desktop computer

How Might We…

1) Organize and supplement existing content on the SVF website so that users feel informed about the “why” and “how” of the services delivered, as well as capable and encouraged to take the next step to refer a client, support with a donation, receive services directly, or become a volunteer or instructor?

2) Address the discovered concerns with an accessible, cohesive, and clear design (keeping user personas in mind) that can be tested and further refined to meet the needs of SVF?

Why Mobile First?

Designing for mobile devices encouraged me to be concise and narrow down what was absolutely necessary for each page. You will see below some of the sketches I made when considering the neatest, most engaging ways to include content without overwhelming the user.

Ideate & Design

Finally, it was time to take the insights I gained from user research and my analyses and start brainstorming some ideas. I started with low-fidelity sketches so that I would invest my time appropriately. I kept the aspects we chose to focus on in mind: information architecture, addition of necessary content, and visual design. The methods I used in this step included drafting a new sitemap, sketching out the various website pages for a mobile device, and creating wireframes.

New Sitemap

The redesign of the website architecture was my first concern in this phase so that I wouldn’t unnecessarily create pages and content that would get moved around later. This was the most collaborative part of the project for me, as it was necessary to send drafts back and forth with the SVF board members to make sure we were on the same page. With guidance from user research and the board (and after many lists and sketches) I finally drafted the sitemap below.

New Sitemap

The redesign of the website architecture was my first concern in this phase so that I wouldn’t unnecessarily create pages and content that would get moved around later. This was the most collaborative part of the project for me, as it was necessary to send drafts back and forth with the SVF board members to make sure we were on the same page. With guidance from user research and the board (and after many lists and sketches) I finally drafted the sitemap below.

The changes included:

adding a separate page for information about why educational experiences are beneficial
adding two pages to support SVF’s (user research supported) wish to house information about “client showcases,” “classes & instructors,” and “community outreach” on their website
adding more balance to the menu - not all topics are contained within the first two categories like before
consolidating information about donating into one page
consolidating information about all board members into one page

Sketching

Next I reviewed all the insights I’d gathered and the project goals to start drafting some sketches of what the new pages would look like. I wrote out a list of all the content that was absolutely necessary on each page and remembered to keep my designs concise and neat (not pictured - full trash can of dotted notebook paper).

The new description of content on the website that I used to design each page

Sketches of some of the pages for the new website

Sketching allowed me to explore a lot of different options for each page without feeling bogged-down by perfectionism in prototyping software (shout-out to my iPad Pro because it saved my life). As I went along, my designs became more cohesive and I started to get a “feel” for how to group the content on each page in a visually-pleasing manner.

Wireframing

Creating and delivering wireframes in Figma ended up, surprisingly, being the last step for me in this project. I made a few different versions of some pages since the layout SVF chose would largely be related to which spoke to them visually. My contact person with Small Victories Foundation was a web developer and felt comfortable taking my designs and consulting with the board further on the finer details, like what colors and fonts to use. I specified the font sizes I used in my wireframes and created repeatable design elements that could be translated between pages. I also made some simple icons for them to use (below). Ultimately, they needed to reach consensus on the exact copy for each page, and I wanted them to have several options to choose from for the organization of that copy. I made all my files accessible to them and shared the results of my research so that their newly developed copy would be informed by the UX process.

Some of the wireframes I created and shared with SVF

Project Takeaways

Part of my journey in this project was learning to narrow down scope and to let SVF board members be the masters of their content. I was dually excited about the project because it would serve the population I had prior experience with and presented an opportunity to practice the whole UX design process. It was difficult for me at times to focus on a most valuable product, or MVP. At the time of this summary I have delivered this project to SVF and am awaiting feedback. With the completion of this project I feel that I have addressed the Social Work Grand Challenges (mentioned above) by using the UX process to both justify and deliver design solutions backed by research. At the time of project completion we are all making the shift out of the COVID-19 pandemic and the board is very busy with providing their primary service of connecting clients to educational experiences. If they should decide they would like me to create high-fidelity designs I will be more than happy to revisit this project.

My biggest personal takeaways from this project were:

the value of the stakeholder meeting: the board members of SVF were exuberant to give their opinions and feedback and I found this part of the process to be highly rewarding)
the importance of establishing design goals early on: I wanted to practice the UX method in this project, but might have better served myself and SVF by choosing 1-2 pages or a particular function of their website to examine
assumptions often lead to more work in the end: I will be more assertive in the future to make sure that my understanding is correct - I initially thought that instructors involved with SVF work on a volunteer basis, when in fact, they are paid. This information was not on the website but could have been something I clarified in the stakeholder meeting