Connecting Patients to Accessible Virtual Mental Health Care During COVID-19
Overview
The University of British Columbia and Telus Health are creating an eMental Health clinic to connect patients with qualified mental health professionals. I collaborated with their teams to design and implement a landing page for their virtual clinic.
Role
UI Designer
Duration
4 weeks
June 2021
Client
University of British Columbia and Telus Health
The Problem
The COVID-19 pandemic has left many Canadians struggling with isolation and mental health issues. To address this, The University of British Columbia (UBC) and Telus Health joined forces to create the UBC COVID-19 Mental Health Clinic. In order to operate, the virtual clinic needs a landing page.
Constraints
The team had a short timeline for this project, so we needed to design and iterate quickly and efficiently.
The Solution
Design an intuitive and responsive landing page following UBC’s Design System to welcome patients and clinicians to the UBC COVID-19 Mental Health Clinic.
Goal Setting and Project Strategy
Aligning Stakeholders Around Shared Goals and Strategy
In our first meeting between myself, UBC, and Telus Health, I focussed on aligning the team around shared goals for the project. I communicated my design process and how we would complete this project in the short timeframe they had.
I explained my process for this project as having three layers, the content, the layout, and the visual style. Once their team agreed on the content of the site, I would create wireframes of the layout. After that, I would add the visual style from UBC’s Design System. This helped the process move smoothly and allowed for clear feedback and quick revisions.
Project Goals
- Help patients and clinicians understand what the COVID-19 Mental Health Clinic is and what it offers
- Help potential patients understand how to get a referral to the clinic
- Help clinicians understand how to give a referral
- Help patients understand how to book a follow-up visit
Visual Design Strategy
- Create a clear visual hierarchy so information is easy to find and understand
- Minimize visual clutter and use ample white space to create a clear and uncluttered landing page
- Create a welcoming and engaging introduction to the platform by using imagery of everyday people that reflects the diversity of the clinicians and patients that will use the site
- Use a grid system to ensure responsiveness across various device sizes
- Evoke a trustworthy and professional feel that is consistent with the UBC Design System
Sketches
Ideating
The client and I discussed the project requirements and their preliminary ideas. I offered my suggestions for how we could apply UX/UI best practices to create a clear, responsive, and mobile-first experience for patients seeking mental health care and sketched the layout.
Wireframes
Designing Responsive Layouts
I created wireframes to finalize the visual layout. I followed our visual design strategy, creating ample whitespace, clear typographic hierarchy, and responsive design. I paid attention to details such as ensuring optimal button spacing and line length for text across device sizes according to design best practices.
Design System
Creating Visual Consistency
I worked with UBC’s Design System to create a professional and consistent look and feel.
Iterations
Visual Explorations of the Hero Section
The client requested a strong hero image. Below are some of the iterations.
High-Fidelity Mockups
Finalizing and Implementing the Design
After some final tweaks to the content, the client was very happy with the design. Once the design was finalized, I implemented it using Wix, which was the client’s preferred website builder.
The UBC COVID-19 eMental Health Clinic will help clinicians provide accessible mental health care to Canadians.
