CAMH, Intrepid Lab
Web redesign for a leading hub for smoking and vaping treatment, research & education.
PROJECT OVERVIEW
Project: Web Redesign, Intrepid Lab
Industry: Healthcare
Date: March 2024
Duration: 2 months
Role: UX/UI Designer
Tools: Figma, Artboard Studio, Google Docs, Zoom
CAMH Intrepid Lab is a leading hub for smoking and vaping treatment, research, and education, offering a quit-smoking program for individuals who are willing to quit smoking.
Design Process
DISCOVERY & FAMILIARITY FOR THE PROBLEM
Why did I choose this project?
Smoking is a dangerous habit that harms entire body & brain
Most smokers find quitting smoking / vaping challenging and struggle a lot at the beginning of the process
CAMH offers a quit-smoking program, with a functional website, but the users can have better digital experiences while enrolling in their quit program
Who is CAMH?
CAMH (The Centre for Addiction and Mental Health) is Canada's largest research facility and teaching hospital for mental health and addictions, which sets the standards for care, research, education, and social change.
Intrepid Lab (Nicotine Dependence Clinic) is a leading hub for smoking and vaping treatment, research and education.
CAMH's Intrepid Lab (Nicotine Dependence Clinic) offers smokers a quit-smoking program via Stop on the Net that provides them with quick enrollment and quit-smoking kits. While the current website is functional, it still needs a better look and layout. My goal is to give the website a newer, cleaner, and more organized look that complies with UI standards and better information architecture to ease users' digital journey.
The Problem
The Solution
Conducting a heuristic evaluation using Jacob Nielsen's 10 usability heuristics to identify usability problems
Making the website more informative and easing the quit-smoking enrollment process for smokers
Giving the current website a newer, cleaner, and more user-friendly look
Some extra research on smoking
Worldwide, tobacco use causes more than 7 million deaths per year
More than 8 million people a year will die from diseases related to tobacco use by 2030
There are 7,000 chemicals in tobacco smoke
At least 250 are known to be harmful (nicotine, arsenic, benzene)
At least 69 can cause cancerThe overall prevalence of smoking in Canada was 13% in 2015 and 15.1% in 2017
Source: https://www.cdc.gov/tobacco/data_statistics/fact_sheets/fast_facts/index.html
Forms of smoking
More Scientific Reason of Smoking:
Nicotine: A highly addictive chemical compound found in the tobacco plant. It’s a stimulant that speeds up the messages travelling between the brain and body and releases dopamine, a feel-good hormone.
The example below shows how smokers get trapped in the nicotine trap for temporary stress relief or dopamine release.
HEURISTIC EVALUATION TO IDENTIFY USABILITY PROBLEMS
Persona
To start the definition process, I created a proto-persona based on the user data to identify users' motivations, goals, and pain points.
The Existing Defined User Path to Enroll in Quit Smoking Program
The defined path for users to enroll in the Stop Smoking program has three steps, including the homepage with the enrollment button, STOP on the net page where users get more information, and the consent form as the last step.
User Testing For the Current Design
The current user path was tested with five users and potential quitters. Based on the insights, I created a prioritization matrix to measure the importance or urgency of the issues.
Even though the website is functional, many users have difficulty processing some info and enrolling in the program due to redundant, repeating or duplicated information and visuals.
Prioritization MatrixThe Method - Heuristic Evaluation
To redesign the defined path of the website, I conducted a heuristic evaluation, a process in which designers use rules of thumb to assess the usability of user interfaces and identify issues to create more effective redesigns. The method was developed by Jacob Nielsen, and it has ten heuristics. I only focused on the highlighted heuristics below.
Visibility of System Status
Match Between the System and the Real World
User Control and Freedom
Consistency and Standards
Error Prevention
Recognition Rather than Recall
Flexibility and Efficiency of Use
Aesthetic and Minimalist Design
Help Users Recognize, Diagnose, and Recover from Errors
Help and Documentation
Website Annotations for Usability Problems
After going through the heuristics individually, I identified issues and added annotations to pages to point out the problems.
Color Accessibility Test
Using Wave as Web Accessibility Evaluation Tool
Using the Wave tool, I found errors and alerts indicating the website doesn't fully comply with accessibility rules, including contrast and structural issues, as shown in the image below.
Card Sorting
Helping Users Understand and Categorize Information
To help users understand and categorize information most logically, I use the card sorting method to improve information architecture of the website.
Card Sorting 1
Card Sorting 2
Site Mapping
For an Improved Information Architecture
Based on card sorting sessions, new categories and subcategories were identified to create an improved sitemap and enhance information architecture for better organization.
IDEATION & PROTOTYPE DEVELOPMENT FOR BETTER SOLUTIONS
Sketches
Always Starting with Pen & Paper
As the first step of ideation, I started with pen and paper to sketch ideas and create wireframes based on these later.
Wireframes
Low Fidelity Wireframes
I created low fidelity wireframes to test the functionality of the first itereation and build high-fidelity prototype later.
A/B + User Testing #2
User Testing to Test App’s Functionality
I conducted usability testing to measure the functionality and A/B testing to select the most suitable layout for the users. Users had a better experience with the second iteration of STOP on the Net page.
Moodboard
Collecting Inspiration for Redesign
For redesign, I collected inspirational pieces including images, colors, text, and navigation bar.
UI Style Tile
UI Elements of the Redesign
For the UI part, I created a UI style tile to show all design elements, including the logo, color, typography, iconography, navigation bar, images, graphics, and buttons.
Wireframes
High Fidelity
I finally created high-fidelity wireframes to test the functionality and aesthetics of the website.
ONE LAST TESTING
User Testing #3
User Testing to Test App’s Functionality & Aesthetics
For the app's functionality and aesthetics testing, I conducted a user test with five participants. Using a defined script and a prototype, users were asked to enroll in CAMH's quit-smoking program.
Participants: 5
Task: Enrolling in CAMH's quit-smoking program
Total hours: 5 hours
User Insights & Feedback: Users found that the app's interface was easier to navigate and less distracting. They also mentioned that they appreciated the newer look, simplicity, and clear images.
THE FINAL PRODUCT TO PRESENT
Prototype
I created a high-fidelity prototype using the style guide, presented it to stakeholders for feedback and comments, and repeated this process until their feedback no longer led to changes.
A Polished Look of The Final Product
Previous Design vs. Redesign
Previous Design - Homepage
The previous homepage design has a more complex navigation bar with more categories and repeated content
Some cards under "What We Do" aren’t functional, and some offer the same information under different categories
The Learning Health System part look very text-heavy and need a better layout to ease cognitive overload
The events part needs a better design, indicators, and consistency
Redesign - Homepage
The redesign has a simpler navigation with search and login buttons
It offers more consistency, accessible colours, better hierarchy, and spacing between elements
It has a simplified language that is easier to follow and understand. Also, some negative words were removed and replaced with new ones
Previous Design - Stop on the Net Page
The previous Stop on the Net page design has inconsistency and overwhelming content causing more confusion in users' paths to enroll in the quit smoking program
The cards should have a clearer hierarchy, simpler language, and more accessible colors
Some pictures are blurry and should be replaced with new ones
Redesign - Stop on the Net Page
The redesign has a more organized and consistent layout with text, images, CTA buttons, and frequently asked questions
Users have a simpler experience while scrolling down and processing information
Previous - Navigation Bar
The previous navigation bar has five menu items and a separate section for other programs indicated with their logos. Some information under For Patients & Caregivers is repeated, and the global menu creates confusion with the logos and colours for users.
Redesign - Navigation Bar
The new navigation has a simpler and cleaner look, revised categories and subcategories, a dropdown menu, and a new category called Programs with the elements on the menu.
New Navigation Bar with Dropdown Menu
Navigation Bar with Dropdown Menu - Iteration #1
Navigation Bar with Dropdown Menu - Iteration #2
The redesigned website has a new and updated look that complies with aesthetics, accessibility, and simplicity
It gives users a more intuitive experience and makes the enrollment process faster and easier for the ones who want to or plan to quit smoking
Some changes were made to the content language to improve inclusivity and understanding. Repetitive and negative words were replaced with simpler language understandable by all users
Outcomes
BEFORE
AFTER
Thanks for reading!