CCHA Website Redesign
The Canadian Congenital Heart Alliance (CCHA) is a grassroots, volunteer-run, registered charity that advocates and supports over 257,000 Canadians and their families living with Congenital Heart Disease (CHD). Their mission is to advocate for and enrich the lives of people with CHD through awareness, education, research and support.
Team Leads: Rahim Bhimani
Visual Designer: Eric Neimanis
Research: Cassidy See
User Testing: Kathy Langton
Team
UI / UX
Visual Design
Ideator
Research
Prototype
Wireframing
Responsibilities
Overview
Our team worked with the CCHA by conducting various research methods that helped us confirm user pain points along with other improvements that needed to be made in our redesign.
The final iteration was sent to the client for approval. Once approved, assets were created and provided to CCHA in a design hand-off for their developer to implement on the Drupal platform.
The new simplified design aims to improve the user experience by:
-
Organizing navigation menu and menu options
-
Consolidating materials and information
-
Creating visible donation call to action (CTA) options on each screen
-
Identifying and repairing outdated links
During the research portion of the project. Some of my responsibilities included conducting:
stakeholder interviews, heuristics reporting, user personas, user testing & site mapping.
Research
The first thing my team and I wanted to achieve was capturing valuable client information by conducting detailed stakeholder interviews. 4 board members were available for interviews and each interview ranged from 20 - 40 minutes.
Stakeholder Interviews
I interviewed the board and gained a lot of insights on how the site had been maintained, what information people were looking for while visiting the site and plans for the CCHA's future.
Heuristic Analysis
At first glance of the website, you can tell the heuristics are all off. I scrolled through the CCHA's website and wrote documentation of all issues & areas for improvements:
Users control of freedom - found multiple dead end links and new windows opening to take users away from the CCHA site.
Aesthetic & minimal design - too many different colours used throughout the site, issue with hierarchy of information, too many font styles used, outdated icons making the site look outdated.
A match between the system & the real world - too much use of internal jargon used in the menu and submenu which confuse users and cause users to find information elsewhere.
We found that by creating user personas, were able to understand our users a lot better, why they were visiting the CCHA website and that a lot of people were looking for a community and involvement within the CCHA.
User Personas
Mary
"[The website] would serve us better, if our community could access it with greater ease. I think the website lacks focus and is disorganized."
Olivia
"I found comfort in the personal stories on the CCHA site. Seeing others talk about their lives and experiences with CHD showed me that my daughter could grow to live a full life."
The project team created test cases for each member to complete. Each test case consisted of a minimum of 5 specific tasks to complete.
Questions were designed to get into the head of a variety of users and fell into categories of:
- Information about the CCHA organization
- Locating medical resources
- Searching for information about CHD
User Testing
Each team member recorded their sessions while verbally documenting their navigation journey.
The purpose of this exercise was to analyze the specific tasks through the navigation of the CCHA website, with the intent to identify critical user flows and areas for improvement with the information architecture.
David
"When I was looking for information on my condition and wasn't able to find anything on the CCHA website, I moved onto other sites to find what I was looking for."
We found from our user testing that much of the site terminology may be hard to understand to new users and caused frustration when trying to navigate through the menu options.
There were a significant amount of broken links as well as links that lead users away from the CCHA platform.
Outcomes
We found that the search bar was limiting to its function. Overall navigating the site proved to be difficult to even retrace steps back to a common page as some of the breadcrumbs were not displayed on every page.
My team and I first used card sorting methods to sort all the menu options into categories and to condense the key pages throughout the site as well as eliminating pages that proved to not serve a true purpose or contributed to cluttering the site.
Once we finished card sorting, we condensed the menu options along with CCHA board members to help make navigation easier throughout the site.
New Site Map
Next we began wireframing and designing in Figma. Once wireframing and hi-fi designs were approved by the CCHA, we would hand off the new design to their developer to implement the new design in Drupal.
UI, Wireframing + Prototyping
Once we presented our research to the client, my team and I began sketching wireframes, focusing on the most important pages that needed to be redesigned, tested and then developed. We needed to keep in mind of the users needs and how we could keep a strong focus on improving donations and gaining members. The design needed to be simple to replicate and maintain as board members would need to update the site frequently.
I used Figma to design the website to present to the client. I drew inspiration from my research on other charity websites and what design elements and layouts would simplify the CCHA's website. I chose bold headings and easy to read body fonts while holding true the the CCHA's brand colours, updated iconography and imagery, to create a hi fi prototype to test on users.
Users found significant improvements in the navigation of the site and much easier journey to their disease sections. The donate button was more prominent to help encourage users to give more to the charity.
The finished product would be passed off to the CCHA's developer who would build the site on the Drupal platform. Due to cost limitations to develop, the CCHA have been trying to raise money to implement the redesign.
User Testing & Final Design
I used Maze to test our new design to ensure the platform is easier for users to navigate and understand. I tested users who fit our research personas during the research phase.
I gained a lot of experience from working on this project. I lead weekly meetings with the client and my team to discuss our progress and received feedback on design elements and page layouts. I facilitated stakeholder interviews with CCHA board members to fully understand what frustrations they were experiencing with the current site. It was challenging designing with such complex content and creating a simplified designs and user journeys. I really had to focus on designing with the users needs in mind.
Lessons Learned
I enjoyed collaborating with my team as we communicated effectively while all of us worked remotely. We communicated through zoom calls daily updating one another on information and which portions of the projects we had to finish, delegated to one another and worked off our strengths.
We learned that the site had minimal content and is disorganized. It was difficult for users to navigate because of the layout. The menu was hard to navigate to find specific diagnosis of CHD.
Some board members had conflicting views, where some saw a lack of community to support each other, others found comfort in the personal stories shared regarding their experiences with CHD.
Key Findings:
Prioritizing easier access to vital information regarding the CCHA, easier journeys to CHD diagnosis, how users can get involved and a better designed donation CTA button.