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
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
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
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
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:
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 1Iteration 2Iteration 3Final 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
With event imageWithout imageChat interfaceDetail 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
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)