Healthy Duke Word Cloud

Dynamic, realtime, word cloud visualization for the Healthy Duke Initiative.

 

Overview

This project, in collaboration with Healthy Duke, is meant to be a source of inspiration for people as they reflect on the ways they rejuvenate their mental health. The website allows people to input what they do to rejuvenate and their responses show up in a dynamic, realtime, word cloud visualization.

 
 

Setup

Mental health on college campuses has come into focus in recent years, as more people speak out about the problems they face. These challenging educational and social environment, often don’t validate the problems students face and thus they don’t seek help. To combat this many universities have made supporting mental and physical wellbeing a core tenant of their strategy.

At Duke University, the administration created Healthy Duke to achieve towards this end. Healthy Duke is a campus wide initiative aimed at help ing students and faculty, to take better control over their mental and physical health. Healthy Duke is a part of the Duke Health system and is associated with Duke Hospital

One of their goals for the upcoming semester was to create a forum for people to share the ways in which they rejuvenate their mental health. The normal way to go about this on campus is to hang up a poster with a prompt and post-its in dining areas. The problem with this approach is that these posters usually have poor engagement and are prone to defacement. The idea for this project was to bring the concept of a public poster board directly to the students via their phones. 

On this project I was fully responsible for the design, development, and release of the project. In addition we had a small budget and needed a turn around time of around a week.

Process

Design

The main requirements for the project from the university were:

  • The site had to be responsive, working equally well on mobile or desktop

  • The backend system had to filter out profane and inappropriate responses

  • There needed to be separate word clouds for Duke Health and Duke University, in addition to a join one

Thinking about the experience of using the word cloud I added the following requirements as well:

  • A user should get a sense of how many responses have been submitted

  • A user should get a sense of how popular different submissions are

  • Given that an individual user has limited ability to affect the shape of the cloud, there must be ample feedback during submission

  • The word cloud should always be up to date

The ideation and design phases were brief given the quick turnaround needed for the project, but I took the concept through from sketches to high fidelity designs and finally development

 
 
PNG-Bild.png
 
 

Development

On the highest level, the app is composed of a Firebase backend and React frontend. 

I chose Firebase for the backend because of the realtime database capabilities, low maintenance costs, and easy to setup. I also made extensive use of Firebase Cloud Functions to validate, count, and process submissions. When responses are submitted from the frontend they are saved in /responses. This triggers a firebase creation hook, that chunks the response into keywords and saves the counts under /cloud/{filter}/data/{keyword} based on the current filter.

 
 
cloud functions-5.png
 
 

I chose React for the frontend because the end product was a fairly simple application. A larger framework would have been to heavy handed. (side note: I used Redux as well, which was also a bit of overkill, React Context would have worked just fine). I also made use of a framework named react-redux-firebase to handle communication with Firebase. The WordStream, WordCloud, and CloudInput were the only components that could talk to firebase and only the later could write.

 
 
cloud functions-6.png
 
 

Result

The final result turned out much like the designs and functions as intended. We deployed the project on time and it received modest usage from the student body.