Kelty Resource Centre
Company
Mellenger Interactive
Client
Kelty Mental Health Resource Centre
Project Date
September 2023 - May 2024
My Role
Product Designer
Project Overview
Kelty Mental Health is a comprehensive mental health resource centre affiliated with BC Children’s Hospital, dedicated to providing valuable information for parents and caregivers. The website aggregates a wide range of resources, both from external sources and internal databases. As the lead Product Designer for this project, my primary challenge was to create an intuitive and coherent way to present the nine distinct types of resources. Additionally, I identified an opportunity to enhance the Resource Library with a more guided landing page experience to better direct users toward their next steps.
Problem Statement
There were four main goals of this project:
-
Create a new style guide adopting a new look and feel, while following BC Children's branding guidelines
-
Redesign and re-configure Kelty's robust Resource Library
-
Find a better way to incorporate the Ask Kelty tool
-
Make the Challenges & Disorders pages easier to navigate and scan through
Roles and Responsibilities
This project involved a diverse team with various roles. Our Art Director, Tianna Kwong, developed the new look and feel for the Kelty website. Building on her vision, I designed new components and created a fresh UI kit for the client. As the lead product designer, I focused on architectural changes to enhance the usability and discoverability of the Ask Kelty tool and a better way to display hundreds of resources as well as help navigate user groups to these resources.
​
The team also included a front-end developer, a back-end developer, a project manager, and a strategy manager. On the client's side, the stakeholders were two project managers and the executive director of BC Children's Hospital.
Scope and Constraints
Throughout this project, we faced a few key constraints. One major challenge was the frequent changes in stakeholders on the client’s side, which affected our meetings and decision-making process. Additionally, we had to adhere to BC Children's style guidelines, which imposed certain UI limitations.
​
We also discovered that the client was highly visual in their approach. They preferred to see detailed mockups in Figma before making any design decisions, rather than discussing changes verbally and implementing them directly on the development side. This preference extended the design phase and ultimately led to a two-month extension in the project timeline.
The Working Process
Below is the process our team took to provide the deliverables expected by the client. To start, we will examine the process of re-designing and re-structuring the extensive Resource Library.
Design Challenge: Enhancing the Resource Library Experience
As the lead product designer on this project, our primary challenge was to improve the display and navigability of the resource library, a central feature of the website. The client voiced concerns about the limitations of the current system, specifically that all resources—regardless of type—were constrained to a single card display format. This not only created difficulties for the Kelty team in managing resources on the backend but also posed a significant visual and usability challenge for users trying to navigate the library.
​
The following snapshots illustrate the original design of the resource library and the resource cards.
Transforming the Resource Library into a Knowledge Base: Improving Resource Access and SEO
Our first step in addressing the issues with the existing resource library was to reimagine the browsing experience, shifting it toward a more comprehensive knowledge base. To achieve this, we identified several key changes that needed to be made, both visually and structurally.
​
In the original setup, clicking on any resource would redirect users to an external page, taking them out of the Kelty website. Since most resources in the Kelty Resource Library were external—such as websites, apps, PDFs, etc.—this approach disrupted the user’s browsing experience and was not ideal for Kelty's SEO.
​
To address these issues, we introduced a new content type called the "Resource Page." This allowed each resource to have its own dedicated page within the Kelty site. By doing so, we not only retained users within the Kelty environment but also enhanced the browsing experience by embedding related resources directly within these pages, using both text links and callout blocks. This approach helped users seamlessly navigate the topics they were interested in while boosting Kelty's SEO.
Designing Unique Resource Cards
With the new user pathway established, the next step was to create distinct card UI styles tailored to each resource type. This approach allowed us to develop a clear visual pattern for users to follow, while also offering flexibility in the details and content displayed for each resource type. Additionally, these redesigned cards were designed to be easily embedded within both content and resource pages.
​
Below are the wireframes that explore each resource type and the unique information each one needs to display.
App or Online Tool
-
Resource source
-
Optional icon / image
Book
-
Author name
-
Book cover
Kelty Webinars
-
Playable video thumbnail
PDFs & Medication Sheets
-
Optional image
-
PDF label
*Note: This resource type is what kicked off the idea of redesigning each card to the need of the resource type. PDFs and Medication Sheets were the biggest. casualty of the previous design.
Podcast
-
Season and episode number
-
Podcast player
*Note: We were unable to do any custom design for the embedded podcast player
Video
-
Playable video thumbnail
Design Challenge: Enhancing the Visibility and Usability of the Ask Kelty Tool
Another key objective of this project was to elevate the visibility of the Ask Kelty tool, a valuable resource developed by BC Children's Hospital. Ask Kelty compiles frequently asked questions across various mental health categories, providing answers along with related resources. It also allows users to input their own questions, matching them as closely as possible to existing ones.
​
Before the redesign, access to Ask Kelty was limited to a nested navigation menu. By creating a more guided landing page for the resource library, we saw an opportunity to design an Ask Kelty widget that could be prominently featured within the Resource Library.
​
Additionally, we made visual and structural enhancements to the Ask Kelty page itself, making it easier for users to explore the tool and understand how to use it effectively. See the live page here, and the widget tool here.
Original Design
New Ask Kelty Designs
Ask Kelty Widget Tool Design
Positioned on the newly designed Resource Library landing page, this integration provides users with a more centralized access point to the Ask Kelty tool, offering a simplified and more accessible version to encourage immediate use.
Design Challenge: Enhancing the Accessibility of Challenges and Disorders Pages
The final challenge in this project was to improve the accessibility of the Challenges and Disorders pages, which, while rich in useful information, were extremely long and difficult to navigate. Previously, users had to rely on a scroll spy, text links to resources scattered throughout the page, and a related resources section positioned at the bottom.
​
To address this, we redesigned the resource cards with the specific intention of embedding them directly within content pages like the Challenges and Disorders page. This approach significantly improved the page's scanability and allowed users to seamlessly access related resources directly from the content they were reading. Unlike the old design, where related resources were buried at the bottom of an already lengthy page, the new design places them in context, enhancing both usability and user experience. See this live page here.
