Problem
Beginning in early spring 2022, the communication department of Big Brothers Big Sisters of Halton and Hamilton (BBBSHH) initiated a review of their website. During the review, it became evident that the website required improvements in the navigation system and overall user experience.
Objective
The objective was to optimize the website's usability and elevate the overall user experience, with a specific emphasis on refining navigation for first-time users, especially potential volunteers, clients, and donors.
UX Objective
01
Conduct Comprehensive Interviews
Conducting interviews with stakeholders at BBBSHH, including community members, potential volunteers, clients, their families, and donors, aimed to gather detailed insights into their needs, preferences, and behaviours when interacting with the website.
02
Design Iteration and Testing
Refine the website's design based on insights gathered from user research and conduct user testing to ensure the effectiveness and usability of the prototype.
03
Design Implementation
Integrate the finalized design enhancements into the website using the WordPress CMS platform.
UX Design Process
Empathize
We initiated our UX approach with the Empathize phase, connecting with stakeholders at BBBSHH, particularly community members such as potential volunteers, clients, their families, and donors, aiming to gather detailed insights into their needs, preferences, and behaviors when interacting with the website.
Understanding the Real User Experience and Stakeholder Interviews
We engaged with stakeholders to understand their perspectives and experiences firsthand. These insights are crucial for ensuring that the project aligns with the needs and goals of key stakeholders.
User Engagement Locations
​The interviews we conducted were in-depth and involved diverse groups of people, including volunteers, donors, and families of youth clients. These interviews were conducted remotely over Microsoft Teams.
Interview Details
A total of 13 in-depth interviews were conducted. These interviews provided detailed insights into various aspects of user experiences, playing a crucial role in informing the design iteration of the website.
Finding
After conducting comprehensive interviews with volunteers, donors, and clients, we have identified key findings and patterns regarding several major usability issues, such as poor navigation and a cluttered layout, on the website that would require design improvement. Here are some of the significant insights gathered from these interviews.
Poor Navigation
Users faced challenges in finding relevant information or navigating the website effectively. For instance, the navigation bar was cluttered and contained unnecessary items, causing confusion and difficulty in locating desired content.
Cluttered Layout
The website had a cluttered layout, which appeared disorganized and overwhelming, making it difficult for users to focus on essential content. For example, the volunteer page was overloaded with a lot of information and overwhelming for some users due to multiple calls to action (CTA) on the same page.
Limited Accessibility Features
The website suffered from a lack of accessibility features, potentially hindering users with disabilities from accessing and navigating the site effectively. For example, it lacked alt text for images and keyboard navigation support.
Lack of Visual Hierarchy
The website lacked a visual hierarchy, causing difficulty in finding important information quickly. This led to frustration and missed engagement opportunities. For example, the program page lacked a clear path to enrollment, especially for programs requiring school referrals, and exhibited inconsistent content.
Ideate
During the ideation phase, we brainstormed creative solutions to address the usability issues identified in our research findings. We explored various concepts and generated ideas to improve the website's design and user experience. Through this process, we aimed to inspire insights and uncover solutions for enhancing navigation, simplifying content, and optimizing engagement opportunities on the website.
Prototype
In the prototype phase, we translated our ideated solutions into a visual and interactive representation of the proposed design changes. We cloned the original site on WordPress to create a testing environment where we could explore various design elements. This enabled us to conduct user testing and gather feedback to refine the prototype further.
Final Testing
We conducted usability testing with 13 participants to validate the new design with current users of the BBBSHH website. The study showed an improvement in task success during the second testing round with the redesigned site.
01
Testing Results
​The test results show significant usability improvements with the redesigned website, including faster task completion, higher success rates, and reduced navigation time. Users' positive feedback highlights the effectiveness of the redesign in enhancing overall satisfaction.
02
Test Measures
-
Improved task completion times: Users were able to accomplish key tasks, such as enrolling a child in a program or finding program pages, more efficiently on the new site compared to the old site.
-
Increased user success rates: The redesigned website led to higher success rates for completing tasks, indicating enhanced usability and user satisfaction.
Design Implementation
The design was seamlessly integrated into WordPress, utilizing HTML and CSS to ensure optimal functionality and visual appeal. As an example, a responsive Google Maps feature was embedded into the contact page to provide users with BBBSHH locations and directions. Click on the link below to explore the new website design.