Brainstreams UX Website Design
My Role: UX/UI Research and Analysis, UX/UI Design, Project Management, Copywriting
Teammates: Ana, Holly, Sahar
Project Duration: A four week long school project for a Design Evaluation course completed in August 2024, extended to a three month long freelance website design project completed in December 2024
Tools: Figma, Google Sheets
The purpose of this study was to assist the BC Brain Injury Association (BCBIA) in enhancing their website, Brainstreams. By evaluating the usability of the Brainstreams website we aimed to assess whether the website meets its goals of providing education and accessible support for brain injury survivors and their family members. Our approach incorporated three primary evaluation methods: an online survey, a heuristic evaluation, and a usability study.
BCBIA is a non-profit organization that aims to provide online educational resources to brain injury survivors and family members. The website also shares recovery stories of brain injury survivors to support the community.
Evaluating the Existing Website
The goal of our research was to assess the three main constructs:
Ease of Navigation: how easily participants can find the information or resources they need.
Content Relevance: whether the information and resources provided on the website meet the needs and expectations of the users.
Accessibility: how accessible the website is to users with varying abilities.
Three methods were used for this study: online survey, heuristic evaluation, and usability study.
For our participants, chose to focus on brain injury survivors and caregivers as their unique insights into the relevance and effectiveness of the information available on Brainstreams would allow us to evaluate how well the website meets their needs and what improvements could enhance the website’s usability.
We recruited 4 participants in total, with ages ranging 48 to 78 years old. Two participants were brain injury survivors with the other two being family members of survivors. Participants 1 and 5 identified as family members of brain injury survivors. Participants 2 and 4 identified as brain injury survivors, with Participant 2 reporting mild to moderate cognitive loss and participant 4 reporting to have moderate to moderately severe cognition loss.
As a note, we initially recruited 5 participants since Participant 3 withdrew, we did not include their data. However, to avoid confusion, we have kept the participant number as it was before their withdrawal.
Survey demographics with 53.8% brain injury survivors, 23.1% family members, and 7.7% for occupational therapist (OT), executive director (ED) for BCBIA, and support respectively.
Usability testing demographics with 2 brain injury survivors and 2 family members.
Key Findings
Difficulty Navigating the Website: In both the study’s semi-structured interview and in the survey, users remarked that the Brainstreams website is bloated with an overwhelming amount of information. Participants mentioned that it would be beneficial if the resources were separated into different categories to allow them to more easily locate relevant information.
Insights from the heuristic evaluation and usability study organized under Ease of Navigation.
Lack of Relative Content: Key content that users commonly look for are resources & services, support groups, and information on brain injuries. However, the current content for resources is outdated and ineffective due to a lack of categorization. Despite support groups being important for brain injury survivors and family members to find, this is currently missing from the website — or at the least, unable to be found by users.
Lacking Accessibility for those with Brain Injuries: The website is relatively easy to navigate, especially for family members. However it was made evident that for those with more cognitive loss, it would be difficult or impossible to navigate on their own. Additionally, vocabulary of the site can be too technical or difficult to understand.
Using WebAIM, the cyan colour (foreground) is tested against a white background which fails to pass WCAG AA or AAA.
On the top is the static hyperlink styled in blue. On the bottom is the hyperlink when hovered on, styled in cyan.
Through our evaluation, we identified several usability issues that impacted how brain injury survivors and their families accessed vital information. Our redesign strategy focused on three core improvements: simplifying the information architecture, creating a WCAG-compliant design system, and cleaning up the navigational flow of the site.
Redesign Strategy
Simplifying the Information Architecture
One of the biggest challenges with the original website was the overwhelming amount of information presented without clear categorization. Users struggled to locate relevant resources, and key content was either missing or buried within multiple pages.
To address this, we:
Restructured the content into clear, intuitive categories based on user needs (e.g., "Support & Services," "Recovery Stories")
Implemented a filtering system to help users quickly find relevant information.
Reduced redundant or outdated content to streamline navigation.
Search and filter system added to the Resources page.
WCAG-Compliant Design System
Brainstreams serves users with varying cognitive abilities, making accessibility a top priority. Our evaluation found issues with low-contrast text, overly technical language, and inconsistent typography.
To improve accessibility, we:
Developed a WCAG-compliant design system with high-contrast color combinations to enhance readability.
Adjusted typography and hierarchy, ensuring clear distinctions between headings and body text.
Simplified complex terminology where possible to make content more digestible for users with cognitive impairments.
On the left, the revised The Journey Ahead page with the implemented WCAG-compliant design system. On the right, the original The Journey Ahead page.
Cleaning up the Navigational Flow
The original website’s cluttered layout made it difficult for users to find key information efficiently. Many participants expressed frustration over the lack of a clear visual structure.
To enhance usability, we:
Introduced a modernized layout with a clean, organized interface.
Designed consistent navigation patterns, making it easier to explore different sections.
Created visually distinct call-to-action buttons to guide users toward essential resources.
This quick-access navigation that I designed on the Home page helps users easily find relevant information based on their role, whether they are a brain injury survivor, caregiver, professional, or someone looking to help.
Usability Testing & Refinements
Once we developed the revised design, we conducted usability testing with key stakeholders, including brain injury survivors and caregivers. The goal was to evaluate whether the changes improved usability and accessibility.
Testing involved:
Task-Based Testing – Users were asked to navigate around the website and point out anything that stood out to them, such as useful information or information they couldn’t find
Observational Feedback – We analyzed user interactions to identify pain points in navigation.
Post-Test Surveys & Interviews – Participants shared qualitative feedback on the new layout, content clarity, and accessibility.
Results & Iterations
Through testing, we discovered that while the redesigned site was significantly easier to navigate, some areas still required refinement:
Further Simplifying Content – Users with cognitive impairments still found some text-heavy pages difficult to process, leading us to incorporate more visual aids and spacing between sections.
Enhancing Search & Filtering – Some users suggested additional filtering options for resources, so we improved search functionality and category labels.
The left side shows the original "Common Topics" section on the Resources page, while the right side displays the revised version. The categories were reorganized based on topic importance identified through user testing, and copy adjustments were made for clarity, such as changing “Health Care” to “Health & Medical.”
Refining Button Placement & CTA Visibility – A few participants missed key action buttons, prompting us to adjust size, placement, and contrast for better visibility.
On the left, the original mobile card design. On the right, the revised card design with the increased “[ Click to Learn More ]” text, therefore becoming more visually distinct, reducing cognitive load and clearly signaling that the cards were clickable
Final Design & Impact
The redesigned Brainstreams website now offers a more structured, accessible, and user-friendly experience for brain injury survivors, caregivers, and individuals with varying abilities. A modernized and streamlined interface and content structure was implemented to make it easier for users to locate essential resources while WCAG-compliant accessibility upgrades, including better color contrast, improved readability and clearer content hierarchy.
After implementing these changes, feedback from stakeholders confirmed that the new website significantly improved accessibility and usability for brain injury survivors and their families. The redesigned Brainstreams website now better fulfills its mission of providing support, education, and community resources in an intuitive and inclusive way.
The website design prototype for both desktop and mobile can be found below.