Project Overview

Client: CRANE: Crisis Racism And Narrative Evaluation, an analysis of the spread of sinophobia/xenophobia in the wake of the Coronavirus (a Resiliency Challenge Hackathon project)

Role: User Experience Lead

Awards: Best UX/UI & 3rd Place

Problems/Goals:

• Tracking spread of hate speech and racism before and during the pandemic

• Analyzing types of hate speech spread, focusing on sinophobia and xenophobia

• Create a website that documents our findings with interactive data visualizations, offers implications and observations, and offers a call to action and resources for those affected

How I helped:

• Conducted user research to better understand the effects the Coronavirus has had on Asian American communities and the average citizen’s awareness of such affects

• Studied similar platforms online to see how they engage with their audiences

• Designed and wrote a user research guide that outlines our research methodologies and questionnaires, shares our findings from our preliminary research, and details our suggestions for next steps

• Designed preliminary wireframes and crafted creative copy for the website that explains the data behind the data visualizations, guides visitors through the website, describes the purpose behind the project, and more.

Project Requirements

I consulted with the CRANE team for the Resiliency Challenge Hackathon. Because this consultation began with a hackathon, the guidelines or “requirements” for the project were flexible and self-imposed, except for the final submission. Our team decided in the beginning of the Challenge that the following guidelines were necessary for the success of each deliverable.

UX Research Guide:

I took lead in designing a UX Research guide that outlines the following:

1. The purpose of our UX Research

2. Preliminary findings found in research conducted by our mentor Dr. Gianluca Stringhini.

3. Sociology framework (specifically focusing on racist discourse online and the spread of hate speech via Twitter and other social media platforms)

4. Surveys and accompanying communication templates

5. Ethnographic interview questionnaires and accompanying communication templates

Style Guide:

The UX team set out to create a style guide that outlines the brand identity of CRANE. For the guide, we wanted to create a simple one-pager to outline the fonts, colors, core adjectives, and images used to consistently describe CRANE and develop a recognizable, meaningful brand.

Web Design:

Since the website is where our product would be housed, it was imperative that designed every interaction intentionally. I worked alongside our team’s graphic designer, Svetlana Moldavskaya, and UI designer, Camelia Betancour, to create a website that displayed our data analysis, resources for support, and tangible call to actions.

Final Deliverables:

For our final submission to the Resiliency Challenge Hackathon, we designed the following deliverables:

#1. Website Prototype

#2. Presentation

#3. Recording

#4. Devpost Article

Each of these deliverables outlined our product and how it meant the hackathon’s goal to “bring the talents of the university technology community together with subject matter experts to envision, design, develop, and deliver solutions to help communities, students, and colleges cope with the challenges of the current COVID-19 crisis.”

Deliverables

UX Research Guide

Along with including the parameters for the user research methodologies we used and our findings, this guide also shares our research on sociological studies relevant to the topics of sinophobia, xenophobia, and hate speech online (specifically Twitter) and similar products like ours online (market research).

Style Guide

To create consistency throughout all of our deliverables and to create a sense of brand identity, the UX designed a style guide for our entire team to follow. The style choices we made were purposeful, and are elaborated upon in our Style Guide.

Web Design

The website prototype we designed for CRANE, which can be found here, serves as the primary host for our product. In includes the findings of our analysis, thorough explanations of what our project is, who it serves, and its multiple dimensions, and resources for those affected by hate speech. We created the website off of the wireframes we designed, made with user research in mind.

Final Deliverables

For the final submission of the Resiliency Challenge Hackathon, we needed to create a website prototype (detailed above), a presentation deck, a recording of our team walking through the deck and our final product, and a Devpost article that detailed the production efforts not shared on the website. To view each of these deliverables, click on the associated buttons below. To view our website, click here.