Human-Centered Storytelling

Creating an empathetic connection through storytelling.

Above, Mockup: A user looking over the instructional page for using the prototype.

Breaking Down Stigma

I put together an interactive storytelling site prototype for a fourth year exhibition on social innovation at Mount Royal University in Calgary, Alberta. I chose to pursue possible design solutions for breaking down stigma surrounding substance abuse to help those suffering from being socially ostracized. My prototype creates an empathetic connection between users and real anonymized stories from Canadians suffering from substance abuse. Users interact with these stories by choosing to reveal hidden information that can often be missed with these stories. Every user has to put in the effort if they want to learn more, or choose the alternative of being oblivious to the actual struggle these Canadians faced. The site lets users experience various emotions to give them enough information to rationally consider if stigmatizing people suffering from substance abuse is appropriate or not. I assembled my prototype through Adobe Experience Design.

Example Pages

Above, Mockup: This is the landing page for the site. It features a brief description of the prototype purpose, and to point out the significance of stigma with substance abuse in Canada.

Above, Mockup: Two screens from the site that illustrate a user revealing hidden information about a woman's struggle with alcoholism. By clicking on the respective substance abuse icon while reading through the story, the user is taken to a screen that reveals the more descriptive reality of the individual.

I chose to keep the identities of the individuals anonymous and to properly blur out their faces, because I wanted users to focus on the feelings rather than the person's identity. The goal of the site was to raise an empathetic connection towards those suffering. Much of the philosophy behind this involves encouraging people to let their feelings influence how they act, instead of acting how society might expect them to (e.g. ostracizing a drug user).

Video Demonstration

Above, Video: This is a short video that shows how navigating through the site is done, and how the revealed screen functionality works.

I kept my design simple and clean. Substance abuse is an incredibly sensitive topic, and I chose to keep my design solution to a minimalistic aesthetic to avoid taking away from my featured stories. I wanted the experience to be simplistic, and to make this topic as approachable as possible for every user.

Process Overview

Above: An illustration of my process for approaching this issue, which begins with identifying the issue, then working through a design process to come up with a solution prototype.

My first efforts were clearly identifying and defining the issue, which is that stigma does not go towards resolving the issue of substance abuse for those suffering from it. From there, I began my research by collecting articles from both academic experts and media outlets that covered this topic. I met with Ryan Magnussen, who is a public speaker and expert on this topic, and learned a lot about the difficulties associated with changing public opinion. Although the solution was a designed site, it was only a small fraction of my project, with most of my efforts invested in research and reflection.

Project Reflection

Above: My mindset and approach involved defining the problem, understanding the issue, creating a solution.

During the exhibition, I spoke with numerous individuals whom opened up to me regarding their experiences with substance abuse. These individuals told me that my approach was respectful, informative, and powerful. This was exactly the experience I wanted from people, and was very moving to hear how difficult substance abuse is on those suffering and the people who's lives are connected to them. If I could change anything with my approach, I would try to meet with even more subject matter experts to learn even more about this issue in a Canadian context.

Mockup layouts by psd graphics

↑Back to Top