Desirée Chek

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

three responsive mockups on a yellow background

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.

Skip to solution

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 projection 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.

diagram showing three layers with annotations reading top to bottom: visual style, layout, and content

Project Goals

  1. Help patients and clinicians understand what the COVID-19 Mental Health Clinic is and what it offers
  2. Help potential patients understand how to get a referral to the clinic
  3. Help clinicians understand how to give a referral
  4. Help patients understand how to book a follow-up visit

Visual Design Strategy

  1. Create a clear visual hierarchy so information is easy to find and understand
  2. Minimize visual clutter and use ample white space to create a clear and uncluttered landing page
  3. 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 
  4. Use a grid system to ensure responsiveness across various device sizes
  5. Evoke a trustworthy and professional feel that is consistent with the UBC Design System

Sketches

Ideating

The client gave me a powerpoint with the content and we discussed their preliminary ideas for how they wanted it laid out. Some ideas included a prominent hero image and three sections for their three different users. 

After hearing their ideas, I offered my suggestions for how we could strengthen them. for example, the clients wanted the CTAs to be hyperlinks, so I explained how using buttons to signal possible actions would be more clear and prominent, making it easier for users to understand where to click and what actions can be performed.

sketches showing different layouts for the landing page

Wireframes

Designing Responsive Layouts

I narrowed down my design in my wireframes. I followed our visual design strategy, creating ample whitespace, clear typographic hierarchy, and responsive design. I paid attention to small details such as ensuring optimal button spacing and line length for text across device sizes according to design best practices.

responsive wireframe

Design System

Creating Visual Consistency

I worked with UBC’s Design System to create the landing page. All the components were easy to find on their website and made it easy to implement.

style tile showing colours, typography, buttons, and responsive header

Iterations

Visual Explorations of the Hero Section

We wanted to create more visual interest with the hero section to grab users’ attention. Below are some of the explorations.

header mockup showing an image of two women socially distanced, three tabs underneath read clinicians, returning patients, and new patients.
header mockup showing two women socially distanced. Heading reads "Covid 19 eMental Health clinic" with an introduction paragraph is underneath.
header mockup showing two women socially distanced. The heading reads "UBC Covid 19 eMental Health Clinic with an introduction paragraph underneath on an offset dark blue background

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.

responsive mockups for virtual clinic landing page

Learnings

Explaining my Design Decisions

During this project, I made sure to explain my design decisions to my client so they understood why I designed things the way I did. I felt confident in my ability to advocate for my designs and explain my thought process.

Collaborating with Clients

I really enjoyed working with the UBC and Telus Health teams. This project was a great learning experience for me when it came to communication and collaboration with clients. I learned how important it is to be prepared going into a client meeting with my meeting agenda and a list of any questions I have for the client. As well, at the end of the meeting, I learned to set a date and time for the next meeting to ensure we stayed on top of things. 

Working with a Design System

For this project, I got to work with the UBC Design System. It was great practice implementing a Design System in my work and creating consistency across experiences.

© Desiree Chek, 2021

Linkedin Mail-bulk