2020 / Design for America

Campus Safety - Squad

October 2019 - May 2020

8 month

My Role

Design Lead, Project Lead


Leon Zhang, Hannah Mei, Susan Zheng, Andrew Liu, Michelle Pham, Hokwon Kim, Joyce Lin

Project Overview

The risks of college students drinking is a very serious problem often looked within large public schools because of the so-called "party culture". The drinking experience is often glorified and presented in a way that students have to follow a certain behavior that is often false. This leads to serious dangers from alcohol poisoning to rape. As someone who has been amongst the "party scene" and seeing a lot of these problems first hand this is a problem space I truly want to redesign this experience for our campus and leave a positive impact.

Motion Design Showcase

Standard light mode display
Dark mode display
View the full product trailer

Recruiter, Publisher, or Investor interested in learning more about Sword Reverie? Email me for a playable build or more information.

User Happy Path Showcase

This User happy path showcases both how the app would react in an ideal situation and how it will help save a life in an emergency safety situation.

Planning before an event is important for safety, our home screen allows users to discover events friends are planning or start a new one.
Role-playing is fun for our users, before the event starts, select your role based on how responsible you want to be for the night.
The app will send out a push notification once in a while when you are at the venue. When the notification pops up, check up on your squad member!
Going back home safe is as important as drinking responsibly and having fun at a party. Ashley alerts her squad when she is checking out from the event.
After Ashley returns home and checks in, the app asks her to rate the performance of each of her squad members.

Full process walk through

1.0 Research

1.1 Initial Design Thinking:

As a year-long project, I interviewed over 40 applied candidates and selected a team of 6 other talented and dedicated designers to join me on this project. The goal of this project was to build a case study that could potentially become a full-fledged product with the right opportunities, and leave a positive impact on the community.

1.2 Fly on the wall Observation

The goal of these observations is to be nonintrusive and focus on understanding specific topics regarding the context of drinking behaviors. Key focal points of the observations included understanding the context of, environment, technology, types of alcohol, physical surrounding, people attending, social behaviors etc.

1.3 Quantitative Data (Survey)

After a few "fly on the wall" observation sessions combined with our secondary research, we surveyed over 400 college students over the time frame of 2 weeks. Samples were conducted at random to avoid bias. This was achieved by setting up a booth near the library and asking any students who would pass by.

1.4 Qualitative Data (Directed Story Telling)

15 candidates were then selected and interviewed over the course of one week. We focused on listening to the participant's personal stories and paid attention to the details of the stories, noting their specific pain points.

1.5 Synthesize Insights

With both quantitative and qualitative data, our group spent multiple sessions to sort through the large amount of data we collected.

Key insights were drafted for creating user personas and refining our how might we statement.

1.6 Redefined Problem Statement

Based on our synthesized insights we proposed a detailed how might we statement for ourselves as we moved into our design phase.

2.0 Design

2.1 User Persona

We wanted a more holistic understanding of an overarching user journey and how it relates to the persona, therefore we moved on with only synthesizing one user persona.

2.2 User Journey Map (Understanding Key Moments)

By creating a detailed user journey map we were able to understand the key moments of a student's night out, and how each time frame has its own unique challenges and pain points that needed solving.

2.3 Planning Ahead

As we moved further along the design timeline, it was important to set up clear schedules and milestones for the team. Apps that dabble in the safety and well beings of others would need to be tested significantly. Bad designs will have huge consequences. This timeline was created to leave room for in-depth usability testing before our final deliverable.

2.4 Ideation and Down selection

Multiple ideas are brainstormed and explored throughout this process using affinity diagrams and storyboarding. Our group managed to down select into a mobile planning app that doesn't lose track of "fun" but promotes responsibility and safety.

To reflect this, the challenge became designing a gamified planning experience for the product.

2.5 Information Architecture

Using our design requirements for the product, we created our information architecture. Here we defined our core user experience and stripped down features that might distract users. The goal here was to make sure the design directly solves the user's pain points we synthesized from our research before focusing on “fun features”.

2.6 Wire Framing

Based on our information architecture, we white boarded different potential wire frames as a team. To quickly test our concept, multiple iterations were explored. Different designs were presented and critiqued by our team. We aimed to clarify our component designs, and validate our solution concept.

Below are wireframes showcasing how people invite each other to join a "squad", and how people can choose roles.
This is an overview of the entire wireframes created for user testing.

3.0 Usability Testing

3.1 Initial Usability Testing

6 participants were invited to test out the proposed design. (Participants did not want to be photographed)
Each participant was given similar tasks to create a squad, join someone else's squad, update a friend's status during the outing, checking home.
5 out of 6 users were able to easily complete the task.
The one user who had some trouble navigating the prototype was concerned about all the options the app offers during navigating which we noted.

3.2 Synthesized Conclusion

Despite the rather easy completion of tasks by our participants, they said the low fidelity UI sometimes becomes confusing because the icons are unclear. Our group decided to focus on creating a high fidelity with a more streamlined happy path for better testing.

3.3 Medium Fi Mock up

This happy path of the core experience was created to test a simplified scenario of using our app during a party environment.

The gamified nature for planning a safe outing is shown in choosing a role function where a team is similar to a MOBA or team tactic game with different roles balancing each other out.

The room function of Squad shows an abstract understanding of proximity and location of all party members relative to each other since absolute accuracy of maps and GPS tracking is not too useful when everyone is at the same venue.
Leaving the party and returning home is oftentimes one of the riskiest time frames, most of the safety features are designed here, alerting all "Squad" mates automatically if you fail to check in after a set amount of time.

3.4 Medium Fi Usability Testing Party Environment

This design was tested at a real party environment. This is important since seeing how people navigate and complete the tasks during distractions and none sober situations was something we needed to design for.

3.5 Redesigned Validations & Critique Feedbacks

The redesigned mockup was able to produce much better results since the more polished mockups had better signifiers to the testers. We were also able to test out how party members would check in with each other using a wizard of oz prototyping method.

The key takeaway and feedback were at a darker environment many users disliked the bright white UI, this gave us thought to create a dark mode for our final deliverable.
From our observation we noticed users still misclick the emojis during the check up screens.Therefore we simplified our status checking system from picking a certain emoji to scroll emotion indicators through left to right.

4.0 Final Deliverable

Squad is an app that encourages friends to build responsible drinking behaviors together. Squad is designed to compliment outings and drinking experiences, rather than judge or alter the user's experience in a forceful way.

4.1 Final Style Guide

Because our primary users will be using the app at parties and other gatherings that typically in a reduced light environment, we wanted to design a dark mode option.

4.2 Final Video Showcase