Prototyping

Initial Sketches & Paper Prototype

To begin our prototyping process, we wanted to get a feel for the flow of the site as well as some basic functionality for our features. To do this, we first went through each page of the site and make some basic sketches of our desired layout. Then, we crafted a simple paper prototype so we could test out the control flow of the website and would have something to show users for our initial user evaluation.

Card Sorting

To inform our high-fidelity prototype, we conducted five card sorting sessions. During each card sorting session, the participant was asked to group all of the features of our website in a manner that made sense to them. These sessions took place in-person, but the participants used a website called Mural.co to actually create the groups. Four of the participants are current undergraduate students and one of the participants is a recent alumni at the University of Rochester. The purpose of these card sorting sessions is to make the navigation and organization of our website intuitive for our potential users. Using the results of these card sorting sessions (shown below), we proceeded to creating a high-fidelity prototype of our website.

High-Fidelity Prototype (Digital Prototype)

Since our project is a re-design of the current https://stopaapihate.org/ website, we created a high-fidelity prototype in-line with their brand and current style of their website. In our high-fidelity prototype, we ultimately decided not to include the following: 1. a tool that classifies incidences as AAPI hate crimes by parsing through videos to identify repeated words 2. discussion threads, because based on our need finding, there was a lower need for these features compared to others. With our limited time, instead we wanted to emphasize developing features with higher needs (Form to report AAPI hate crimes, map of hot spots for AAPI hate activity across the U.S., and links to donate to organizations supporting the AAPI community).

Home Page

About Us

News

Reporting Form

Map of Hot Spots for AAPI Hate Activity Across the U.S.

History

Links to Donate

HTML Mock Up

Below is the first iteration of our HTML site based on our initial prototyping and needfinding. It is pure HTML and CSS. We used this mainly to see how we liked the layout of our site which allowed us to make changes to our design confidently.