BC 211
Recovery Services
The website that finds you the right recovery service for your needs.
⇩
Project Overview:
BC 211 is British Columbia’s database that connects people to social services. This project only focuses on redesigning their subpage, recovery services, to support users to connect to fulfilling services.
Slow down or fast forward
Below is the short version consisting of key moments and brief summary of my journey of designing a product that met my user expectation, however…
If you want to see the long version consisting of all the nitty gritty details of the whole experience…
If you want to see the grand reveal and fast forward to the end of this short version...
My Roles
UI Designer
UX Designer
Tools
Duration
2 Months
Part-Time
Problem
While I was an outreach worker, I was determined to find suitable treatment for my client, who was struggling with addiction. While I found the recovery services using BC 211's subpage, it wasn't easy to navigate and find the right recovery services that fulfilled her needs due to the following:
1) Filters
Filters doesn’t help users find what they are looking for
2) Profile
Lack of details in the profile, such as reviews
3) Navigation
Lack of a guide to navigating services
4) UI Elements
UI elements that discourage recovery
Solution
Redesign BC 211's subpage to help users navigate to and land on suitable recovery services. Following an user-centred and lean design approach, I redesigned the subpage with the following critical features:
1) Filters
Relevant filters that personalize search results
2) Profile
Detailed descriptions and images of services
3) Navigation
A guide that matches users to services
4) UI Elements
UI elements that inspire optimism, healing and warmth
User Centered and Lean Design Process
Redesign BC 211’s subpage to help users navigate to and land on suitable recovery services. Following an user-centered and lean design approach, I redesigned the subpage by adding a quiz that matches users with the right service, customization features, a detailed profile of services, and UI elements that encourage recovery.
Discovery
Figure out who are the users:
User Interview
User Profile
Profile Statement
Concepting
Brainstorm what the best solution is:
User Flows
Low Fi Wireframes
Mid Fi Wireframes
UI Elements
Design UI to increase usability:
Mood Boards
Style Guide
High Fi Prototype
Mock Ups
Reflections
Reflecting on lessons for the future:
Highlights
Achievements
Note: This project didn’t have user testing as the brief criteria didn’t require it. However, click here to see my project which consists of user testing.
Discovery
I interviewed the participants that best reflected my target audience to understand their needs and challenges as they navigated the current BC 211 subpage. After synthesizing the findings using the Affinity Mapping methodology, I created three user personas.
User Interviews
I conducted user interviews using Zoom with 5 participants representing my target audience with diverse backgrounds in recovery to understand their needs, goals, behavior patterns, and challenges as they navigated the current BC 211 subpage.
Affinity Mapping
After conducting the survey, I synthesized the findings using the Affinity Mapping methodology to look at the big picture and find common themes, such as three user personas.
User Profiles
Below features the 3 different user profiles inspired by the common themes:
Swipe to see the other user profile
Concepting
Considering the user personas and problem statement, I visualized features and functionalities that would assist the users in finding the appropriate recovery service.
User Flow
With the user in mind, I visualized how they navigate the website by creating a detailed user flow that included a “happy path” and alternative paths. With a comprehensive understanding, I improved the user experience by streamlining and adding essential features to help them fulfill their recovery needs.
Wireframes
I transformed these ideas into a visual layout to showcase critical functionalities and features, and to assign screen real estate according to the information hierarchy.
I included the most critical user flow below for brevity, demonstrating my progression from initial sketching to refined UI design.
Fidelity Progression - Finding a Recovery Service
Low Fidelity Wireframes
With a pen and paper, I drew, discarded and reiterated multiple sketches of a basic layout consisting of essential functions and features. Draft after draft, I brainstormed different ways of placing all of the users' important features, such as a guidance quiz for the Newbie, details in the profile for the Connector, and filters for the Veteran.
Swipe to see the version without comments
Mid-Fidelity Wireframes
Transitioning from paper to digital, I fleshed out my product by including basic UI and UX elements with appropriate spacing onto a 4-column grid.
Bridging the gap between early conceptual ideas and fully polished designs, I provided the necessary level of detail to visualize the intended design while still being flexible enough to explore different concepts.
Swipe to see the version without comments
UI Design
After finalizing the basic layout, user flow, and visual hierarchy, I applied UI elements, such as the colour scheme, icons, and imagery, to design a High-Fidelity Prototype. Afterward, I created Design Language System to ensure UI and UX consistency when I handed over my design to my colleagues.
Moodboard
To set the visual direction and aesthetic, I created multiple moodboards to gather inspiration and experiment with design concepts. I asked my participants from the user interviews which embodies recovery the most, and 80% chose the mood board below.
Swipe to see draft moodboards
Style Guide
Inspired by my mood board, I incorporated colours from the sunrise, added optimistic imagery, and included outlined icons inspired by recovery. I established a style guide to provide a consistent framework for design elements, such as typography, colour palette, imagery, and grid layouts.
Swipe to see the pages of my mood board
High Fidelity Wireframe
To provide a realistic representation of my intended design, I reiterated and added the UI elements mentioned above, such as the colour, icons and typography. I further applied the UI elements to establish the visual hierarchy that empathized critical features and streamlined the user flow.
Swipe to see the version without comments
High Fidelity Prototype
I animated the High Fidelity wireframe to make it into my final prototype.
Mock Up
Reflections
After finalizing my prototype, I reflected on my highlights and the improvements I could apply in the future.
Highlights
1) The thrill of harnessing UI design to support users strategically. I previously used art to beautify concepts, but I loved applying art for practical purposes. I enjoyed using colour schemes, visual hierarchy, and principles to strengthen functionality and features.
2) The joy of designing icons. I enjoyed converting a complicated concept, such as treatment, into a simple icon that embodies it.
3) The growth of reiteration. I thrived on generating, discarding and revising designs based on users’ needs.
Improvements for Next Time
Due to the constraints of the brief criteria and time, I only critical components of UX Design. If I had enough resources, I would include the following:
1) Card Sorting. I based my assumptions of how my users would associate words and categorized concepts based on my personal experience with the users from my career as an outreach worker and my user interviews. However, to have an accurate assumption of this, I would love to execute a card sorting exercise to ensure I understood the thought process of my users.
2) User testing is essential to ensuring that users' needs align with the product. I would have conducted an A/B testing to evaluate which UI elements and user flow they preferred and incorporated their feedback to revise the product.
3) Competitive analysis. In the future, I want to conduct competitive research to ensure that the product I am designing is filling a gap in the market and to draw inspiration from fellow competitors to guide my designs.