Project Overview
Introduction
Medical Staff is a child site of the Vancouver Coastal Health website. It will be redesigned in order to create a meaningful website for all medical staff from all Communities of Care (CoC’s) that offers information for all phases of their career, supports developmental goals, and is easy to navigate and access. Our objective is to ensure that the medical staff has easy access to up-to-date information via the website.
My Role
Marketing & Engagement, Project Management, User Researcher, User Experience Lead, Interface Design, Interaction (micro/macro), and Prototyping.
Users
VCH medical staff.
Board-appointed physicians.
Nurse practitioners.
Midwives and dentists with a permit to practice.
Project Duration
This project is a part of my 4-month internship and it is likely to be launched sometime in June. 🚀
Goal
Increase user engagement & retention.
Provide immersive user experience for both mobile and desktop.
Understand user needs to improve usability.
Improve navigation and content placement.
Restructure information architecture.
Design Process
Before my team and I proceeded with the work, we set up some time where we held multiple meetings and constantly communicated as to how we are carrying each and every step of the design work. I proposed Stanford’s Design Thinking Process to help us keep track of progress. We also followed the RASCI matrix to hold responsibility and accountability. Currently, we are using Notion as our project to manage and organize resources.
Research & Engagement
Engagement Goal
The primary purpose of the engagement is to bring together multiple perspectives from VCH medical professionals in order to create a website that meets their needs, offers information for all stages of a career, supports developmental goals, and is simple to use.
A two-phased approach will be used to consult the website development, as follows:
The first phase: the discovery/user research phase, of engagement, is focused on gathering high-level input from the identified stakeholders for information that will be used to develop the website.
The second phase: the design phase is dedicated to sharing the design of the page and content.
Engagement Methodology
The engagement plan has been developed using the International Association for Public Participation (IAP2) planning methodology, which is an international standard and best practice. The plan has also considered the current COVID-19 environment and resulting limitations as well as past engagement best practices.
The engagement techniques include a combination of focus groups, surveys, engagement sessions, and one-on-one interviews depending on the project phase.
Engagement Objective
Objective 1: To INVOLVE stakeholders in helping develop a website that is medical staff-centric and to make it easy to use, and navigate, with relevant information and resources for the VCH medical professionals.
Objective 2: To CONSULT primary and secondary stakeholders to determine the new functionalities of the new medical website site, as well as resources that will be made available on the website.
Objective 3: To CONSULT stakeholders to gain insights into how users will interact and react with the website. Identifying the usability issues, design flaws, resources available, and other key elements that are important to stakeholders before the website is published.
Objective 4: To INFORM engaged stakeholders on how their input was used.
Collecting Feedback From Users
The engagement is focused on gathering high-level input from the identified stakeholders for information that will be used to develop the website. That includes identifying the content gaps and opportunities. After many hours of meetings, my team & I decided on collecting primary data from users by carrying out surveys & calls with focus groups. It included sending a large group of medical staffs newsletters and using posters that were used across different doctor’s lounges where they can simply scan the QR code and take part in the survey. I designed a poster containing an embedded link that would redirect the users to the in-house engagement tool where they can fill in the surveys. Moreover, we also used automation tools to speed up the process. It helped us automate the process by letting users sign up, sending emails with links for focus groups, and allowing them to select times according to their availability. The data from the feedback will also allow us to iterate through the design process and make any necessary changes.
Poster for newsletter, which reached 3,600 participants (doctors, physicians, nurses etc.)
Design & Wireframe
Initial Wireframe & Prototype
After brainstorming and combining ideas, here are some of the paper sketches I came up with and created wireframes on my iPad. After we conducted several interviews, focus groups, and user research, I sketched several wireframes and developed a prototype based on user persona and feedback. As this was a web redesign project, most wireframes were created on a browser-like background to ensure it fits different screen states.
Low & High Fidelity Prototype
Here are both the images of lofi and hifi prototype that my team and I agreed upon. We used the carrousel image option at the beginning to notify doctors/physicians of any important update that is about to happen. It will be the first thing they see on the website. As they scroll down they get to see the latest news and events and can horizontally scroll the area or even view more. You can see on the other image, I have drafted wireframes and later used ProtoPie to create an interactive wireframe. I have also used Gestalt Psychology to group items together to portray similarity.
Design System
After brainstorming and combining ideas, here are some of the paper sketches I came up with and created wireframes on my iPad. After we conducted several interviews, focus groups, and user research, I sketched several wireframes and developed a prototype based on user persona and feedback. As this was a web redesign project, most wireframes were created on a browser-like background for different screen states. Keeping accessibility in mind, I made the colors less saturated and used fonts that sync well with the VCH branding.
Design System is based on the VCH brand guideline.
Pre-defined text styles, backgrounds, colors, formats, grids, and layouts, to make the design process easier.
Information Architecture
This is the updated IA of the medical staff website. The contents, tabs, and navigations have been changed to best match the user's needs. I created this in FIGJAM. I used psychological principles of organizing to organize these contents and nested each in their corresponding navigation. Each navigation option has been designed in a way that makes it easier for the users to navigate the contents of the website.
Final Design
Here is a preview of the Medical Staff website (under development).
Going Forward
I completed my 4 monthly internships with the team at the end of April. These designs will my handed off to the dev team. The survey reports and feedback has been used to update the usability of the site.
During my time at VCH, I have created lots and lots of survey reports, and summaries. I’ve also conducted many interviews, carried out several content audits, and not to mention all countless meetings. It has been a journey and I am grateful to my manager and my team for helping me out through the process. The past four months may have been somewhat hectic but it was a journey of growth. I know the experiences I have accumulated here will definitely help me speed up my process with my future projects and jobs/internships.
Going forward, I will be going back to school this Summer, and focus a lot more on some other key aspects of other skills like project management. Until my next internship prior to my graduation, I plan on working on several other personal projects, mostly focused on the fusion of both design and development.
Hit me up if you would like to collaborate on a project!!
Other Case Studies 👀
SFU Snap App
Reel
Learning Technologies Project