Collide
Collide is an app focused on helping users meet new people and explore their city.
Summary
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.
Problems
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?
Solution
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
Process
- 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
Profile:
- 23 - 32 years old
- New to City
- Looking to expand social circle
Frustrations:
- Difficulty meeting people close by
- Social events centered around dating
Goals:
- 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
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
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
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
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.
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
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
Conclusion
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