Winter 2021
Resisting Stigma
-
Nuxt.js -
Sass
tl;dr
Resisting Stigma is an interactive tour and learning module that documents the people and places of the Downtown Eastside. Built with Nuxt.js, the site provides an interactive single-page application that lets users tour the many resources available on the DTES and watch powerful video interviews featuring the people who help run them.
Background
Nurses that work on and around the Downtown Eastside (DTES) are typically taken on a tour to familiarize themselves with the people and places that they will be working with. Due to concerns around COVID-19, and to make the tour more accessible to VCH staff members, our team was brought in to design and implement a virtual tour that would mirror this experience.
Goals
People who use substances living on the DTES are often stigmatized and labeled with negative stereotypes, including within the healthcare system. Through a virtual tour, the project aims to:
- Decrease stigma in healthcare.
- Enhance providers’ understanding of the community.
- Build healthcare providers’ skills and confidence working with clients who use substances.
Role
As the sole developer on this project, I had the opportunity to work closely with a talented team consisting of an Instructional Designer / Project Manager and a Designer. Taking the lead on front-end development, I utilized Vue.js and Plyr to implement a dynamic,
The Experience
Resisting Stigma is a self-paced course for VCH staff, split into two parts:
An interactive module that introduces stigma in the context of the overdose crisis. Learners answer questions as they go and explore interactive panels, like a timeline of the crisis and overdose statistics.
An interactive documentary. Learners choose locations on an illustrated map and watch video interviews with the peers and services found there. The map tracks which locations they’ve visited.
The tour closes with reflection questions about the learner’s own practice, then sends them to LearningHub, VCH’s learning platform, to share feedback and complete the course.
Development
I chose to statically generate the site with Nuxt.js. Every page is plain HTML, so it loads quickly and is simple to host on our own server.
Video that plays everywhere
The tour is built around full-bleed video interviews, so playback had to be solid. I stream each video using
Getting video to play reliably on every device staff might use took some extra work:
- Streaming with a fallback. Not every browser supports HLS, so the player checks first and falls back to a regular MP4 when it can’t stream.
- Blocked autoplay. Browsers often refuse to start a video on their own. Rather than leave learners on a frozen frame, I show a play button when that happens.
- Preloaded posters. I load each video’s poster image on the page before it, so the next interview appears right away.
Progress that follows the learner
The course doesn’t have to be finished in one sitting, so I save tour progress in a cookie. When learners come back, the map remembers which locations they’ve visited, and it resets once they complete the course. Since pages are pre-built without knowing anyone’s progress, I render anything that depends on it in the browser instead.
Expanding the tour
In 2022, we expanded the tour to include community services beyond the DTES. To make room for more than one map, I restructured the tour around regions and split the map into shared components. Then I added a second, Coastal map covering Richmond, the North Shore, Squamish, the Sunshine Coast, and Powell River. Learners now choose a region first, and the land acknowledgement changes to match the region they’re exploring.
Results
11 peers and 19 community services share their stories, all streamed and subtitled.
The tour grew from the DTES to Richmond, the North Shore, Squamish, the Sunshine Coast, and Powell River.
Nearly two hours of interviews with the people who live and work in these communities.
With Resisting Stigma, VCH staff can get to know the DTES through the people who live and work there, without needing an in-person tour. The idea came straight from the community: peers in VCH’s Street Degree program wanted to share their experiences of stigma with healthcare providers, and this site gives them a way to do that.