Collide is an app focused on helping users meet new people and explore their city.

View Prototype


During this project, I worked with the founders to define Collide’s brand identity, and cultivated relationships with potential users to discover their pain points so that we could better create a solution meant to combat the prevalent problem of social loneliness.


Trustworthy Brand

How do you create a brand that is inclusive, vibrant, and fun, while not appearing spammy, ‘uncool’ or similar to a dating app?

Smooth User Flow

How do you create a user experience that adheres to Collides focus for providing experiences that are convenient, casual, and comfortable?


After conducting various tests, and designing different mockups, there were a few main takeaways:

  • Event details are crucial and should be clear at a glance
  • RSVPing to an event should be simple and straightforward
  • Users feel more comfortable when they have easy access to a group chat, or the hosts contact info
app profile screen
app event details screen
app group chat screen


  • User Research: Interviews + Surveys
  • Competitive Analysis
  • User Stories + User Flows
  • Wireframe Sketches
  • Lo-Fi Design + Content
  • Style Guide + Logo Design
  • Mockups + Prototype
  • User Testing + Feedback

User research: Interviews + Surveys

We designed and distributed a survey across 25+ participants and discovered:

  • 53% of those new to a city found it difficult to make friends and meet new people
  • 68% of participants Found current solutions (Meetups, FB Groups, etc.) awkward or uncomfortable
  • The most popular way to meet others is through school

User Personas Highlight

  • 23 - 32 years old
  • New to City
  • Looking to expand social circle
  • Difficulty meeting people close by
  • Social events centered around dating
  • Attend fun events and experience the city with cool, interesting people
  • Looking to expand social circle

Competitive Analysis

We also did a thorough analysis of the competitive landscape and found that:

  • Competitors can be quite spammy (low quality events) or impersonal
  • Brand confusion is prevalent... Bumble is a dating app, couchsurfing for those looking for a place to crash
  • Making a connection with others in person can be awkward
meetup Facebook Groups couchsurfing hangout Bumble BFF

User Stories + Flow

To decrease scope creep and to make the prototype manageable, we came up with the following user stories:

  • I want to RSVP for an upcoming event
  • I want to see available events
  • I want to be able to create a profile
  • I want to be able to sign in
  • I want to be able to update my profile
Rough draft of the sitemap

Initial Sketches

We drafted a few rough sketches of what we thought the prototype might look like, and decided to come up with a few improvements:

  • Change CTA to “Join the Beta” vs. “Join an Event”
  • Stack vertically Features Highlighted section on Landing page
  • Remove Unavailable in Your City page
paper sketches of wireframe
Initial sketches of the app

Lo-Fi Design Iterations

The next step was to draft up the initial lo-fi mockups. Additional iterations were made:

  • Add chevrons for app mobility
  • Show Title of each page
  • Add Collide logo on the top bar
  • Adjust spacing of text for heightened legibility
upcoming events
attending events

Brand Guide

After discussing with the founders, we brainstormed different adjectives that we felt captured the brand essence, and designed the brand guide to capture this feel. The themes we came up with:

  • Fun
  • Vibrant
  • Friendly
  • Energetic

Logo Design

For the logo, our initial thought process was to make it a Venn Diagram to show the interaction of social circles. However we found it a bit too "mastercard esque". We went through a few iterationsn and came up with the final design which we found to be quite clean.

Iteration 1
Iteration 2
Iteration 3
Final Logo

Mockups + Prototype

The next step was to apply the brand guide to the lo-fi designs. From there, we made another round of iterations:

  • Remove background Images from Events Page
  • Group Chat inspo from iMessage + WhatsApp
  • Remove logo from Top Nav
old version
With event image
new version
Without image
Attending Event Chat
Chat interface
Events Card
Detail Page

User Testing + Feedback

After developing the hi-fi designs, we did further user testing and worked to enhance our UI to be even more user-friendly:

  • Addition of Group Chat Button vs. Chevron
  • Cancel RSVP + Logout Buttons changed to be featured in red
  • Highlight active screen in orange within the bottom footer
older version
newer version


This project allowed me to work with a team, brainstorm, ideate, design, and receive feedback to allow for rapid prototyping.

Specific Learnings:
  • Start with inspo from designs users are already familiar with (iMessage + Eventbrite, etc.)
  • User Test / discuss designs & ideas with others to avoid tunnel vision on individual insight
Future Features:
  • Explore how users can see relevant events based on interests (survey option)
  • User Suggestion Feature
  • Collide Host Application