Collide

Collide

Duration

20 weeks

Role

UX Designer & Fullstack Developer

Tasks

UX Research, UI Design, Mobile App Development
Problem Statement: Transitioning to a new environment, people find it difficult to make meaningful connections and are fearful of reaching out. We want to solve this by creating opportunities for people, who would have otherwise passed by each other, to stop and talk.

Introduction

Collide is a social mobile app that captures chance encounters and transforms them into spontaneous, organic connections. As you go about your day-to-day life, Collide will ping you if there's a match - someone with whom you share many common interests - nearby.

To try out the app:

1. Download Testflight (only available on iOS)
2. Scan the QR code
3. Make a profile and start Collide-ing!

Collide QR
Collide Features

Needfinding

To discover needs in our problem space of Student Life, we conducted two rounds of needfinding interviews for a total of seven interviews. Focusing on college students, we interviewed people from many different backgrounds in terms of socioeconomic status, nationality, institution type, and grade level. Here are some questions we asked to discover painpoint in transitioning to college:

Then, we broke down the interviews into empathy maps to identify how each person was feeling, thinking, saying and doing.


Points of View (POVs) and How Might We (HMW) Statements


From our user interviews, we created individual POVs to isolate key insights and begin to brainstorm how we might be able to address them:

We met Jared, an introverted sophomore at Northwestern University who has just spent his first quarter on campus. We were surprised to notice that although Jared was an introvert, he would try to strike up conversations with the people he runs into in his dorm bathroom. We wonder if this means he happens to be in the same environment with strangers and without something to be occupied with, he feels the urge to start a conversation. It would be game-changing to use Jared’s urge to help him engage with strangers to form meaningful relationships.


We met Jacqueline, a Korean immigrant and a 25-year-old extroverted college student who goes to a commuting school in New York City. We were surprised to notice that she met her current best friends in line at a nightclub. We wonder if this means in an unstructured environment, she makes her closest friends by chance. It would be game-changing to ‍increase opportunities for Jacqueline to meet more people of her own age who she clicks with.

Ideation / Brainstorming

From our How Might We statements, we start generating ideas and created experience prototypes to test our assumptions. Here is a sample of a mind map we used to develop and flesh out our ideas:
‍‍


We were inspired by the accounts we heard of chance encounters and proximity-based connections. Our final solution was a mobile app that alerts you when you are near a person with whom you share similar interests, creating more opportunities for people to stop and connect in a spontaneous and organic fashion. The user would be able to perform the following tasks:

Design Iterations

Lo-fi wireframes

Task 1: The first task featured a home page where the user can see other users nearby. Clicking on any of the profile bubbles will bring the user to their full profile where they can message them and add them to their network.

Task 1 Lo-Fi Prototype

Task 2: The second task is a “collision” where the user receives a notification and the user with whom they collided. They are given a list of similarities and a choice to accept the collision. After they accept, they can navigate the person to meet up in person.

Task 2 Lo-Fi


Task 3:
The third task features a node diagram where the user can see their existing connections. When clicking on the “plus” button, they are brought to a menu where they can add new friends. After they add a new friend, the friend shows up in their network and they can chat with them.

Task 3 Lo-Fi


We conducted initial usability testing to validate the task flows and identify points in the design that needed to changed in the next iteration. From our usability tests, we created a visual critical incidents log to identify points in that our users especially struggled with or enjoyed:

Incident Log


Based on this initial round of feedback, we made a number of changes in the next iteration of our design:

Before

Near You Before

After

Near You After

Before

Collision Before

After

Collision After

Before

Network Before

After

Network After


Med-fi prototype


Brand Identity


Meanwhile, we started to define the brand identity for our app. We decided on the current logo for its symbolism and simplicity, as two circles - representing people - of different colors interlocked together. For our color scheme, we were inspired by companies like Stripe and Splunk that used a bold and vibrant gradient. We though that this would look more modern and also add to the energy of the social app.

Brand Identity


Concept Video


We also created a concept video to illustrate the core action in our app and visualize how those interactions would occur in real life. This helped us to further develop the purpose and direction of our app when we apply it to real-world settings.


Live Demo


After another round of testing, we did a heuristic evaluation of our med-fi design where our peers identified UI errors and inconsistencies. Finally, we implemented our design in code, which is now available on TestFlight (iOS only).

Other work