The Flutter App
Finding Friends in New Cities
Omnigraffle — Initial wireframing, prototyping, testing
Adobe Illustrator — Icon development, UI refinement
Millennials, particularly recent American college grads, are more geographically mobile than ever. It is quite common to grow up in one state, go to college across the country, and then take a job in a city you don’t know a soul in. Many of my college friends experienced this, moving to major metropolitan areas they’d never visited to take high-paying jobs, choosing professional advancement over familiar social settings. Once there they met a few people at their new jobs, but still felt relatively alone.
The solution to their newfound loneliness was to attempt to meet new people in the easiest, fastest way they knew how — swiping through dating apps like Tinder. This solved the immediate problem of having someone to talk to, but not the lasting platonic relationships my friends were looking for, as most dating app users are interested in romantic relationships.
So my question was: How might we help millennials meet people and develop friendships in new cities?
I wanted my solution to tap into my users’ pre-existing behaviors and strategies for making connections so that it would be easy to adopt, thus a dating-esque swipe-based app seemed most appropriate — a “Tinder for friends.” An algorithm would display other users with similar interests as potential friends in a specified geographical location.
My target user was pretty clearly defined:
Just moved to a new city (either after college, or relocating after a brief time in the workforce) where she/he has few acquaintances
Social media and tech savvy, has a lot of apps on their phone
Uses or is open to using dating apps
Glued to their phone
To avoid falling into the trap of self-referential design or the “elastic user” I developed design personas to guide my process.
I looked at existing dating apps, specifically Tinder, Bumble, The League, as well as apps attempting to provide a platonic version of dating apps, namely Bumble BFF and Hey! Vina. I created detailed content maps of these apps to understand their information architecture and the extent of their features.
I asked millennials who had experienced being in a new city with few acquaintances what they look for in new friends and what they would like in a “Tinder for Friends” type app:
“I don’t care so much about how they look, so photos aren’t really important.”
“I want to know that we share similar interests and have hobbies in common”
“It’s important that they have at least a college degree”
BUMBLE BFF RESEARCH
I asked people about their experiences with Bumble BFF, the “friend making” feature of the dating app Bumble, so I could build a more effective solution.
“It never really works — people don’t really seem interested in putting much effort into making friends on Bumble BFF”
“The problem is you have a dating profile, and you’re using it to meet your potential friends”
“There’s a lot of single moms on Bumble BFF — I just graduated college, that’s not where I’m at in life”
“People prioritize the dating part of Bumble, so BFF falls to the wayside”
“Swiping is addictive”
HOW MILLENNIALS CURRENTLY MANAGE NEW SOCIAL CONNECTIONS
I asked how they make new friends in a new place:
“I try to get involved with the local universities, and meet people there at events”
“I made a lot of my friends here through this one girl I met on Tinder. We never actually dated, we decided to just be friends, and she introduced me to all her friends at Stanford.”
“When I’m in a new city I go to Meetups [events organized and advertised via meetup.com]”
FACTORS TO INCLUDE
EASY ADOPTION — FAMILIAR UI: I imagined an app which would feel very similar to the UI of apps like Tinder or Bumble, so users would not have much of a learning curve — if any — when using this app.
PERSONALITY OVER APPEARANCE: To decrease the focus on appearance (the primary criteria of most dating apps), users can only upload one small photo, taking a backseat to the textual information which conveys more of their personality.
SIMILAR LIFE STAGE / EDUCATION LEVEL: To make users feel more comfortable, the matching algorithm displays profiles that match the user’s preferences in terms of age, education level, and common interests.
EVENTS: A feature similar to meetup.com to help users make friendships in a similarly organic way.
I started by creating a sitemap based on my research and the organizational structures of comparable apps.
I decided to base my UI on the Tinder / Bumble UI — a card-based “discovery” screen users could swipe left (for “pass”) or right (for “interested.”) A simple four-button menu bar at the bottom led to:
Discovery / Home
Allows users to swipe “pass” or “interested” on potential friends’ profiles
Messaging / Matches
Allows users to view matches’ profiles, and send messages
Allows user to view and edit their public profile, change settings and preferences
Browse existing events
Create their own event
Change RSVP to events
SITE MAP EVOLUTION
My first site map was simple and strongly resembled the sitemaps of other similar apps. As I continued working on Flutter, and conducted user testing, I became aware of more personalized needs Flutter users might need.
- Initially designed as swipable cards, I created a separate tab for events so they could be browsable based on feedback like: “I want to be able to go to a specific place, to see what events are available, see a lot of them at once, and change my RSVP if I have to.”
- Removing the approval process from self-organized events to increase event creation and build trust.
- Monetization: incorporating swipable ads (easier app adoption than a subscription, seamless UX)
- Removing Rewind: Flutter users spend more time on each match (as reading takes longer than glancing at a picture) so they are unlikely to accidentally swipe left.
I wanted a very clean, simple, bold UI, so I started with a simple black, white, and red color palette to be fun and gender neutral. The feedback was that it felt too simple. I was encouraged to use more colors, specifically more shades of red, and to give the backgrounds more dimension with slight gradient greys.
Monochromatic red color palette: #FF2600, #680904, #400900, #bf1b17
Red — bold, empowering, in your face, eye catching, fun, inspires confidence, exciting.
I built my initial prototypes in the clean but overused Helvetica. I later switched to the more distinct yet still clean Lato to develop the app's distinct identity.
I developed a variety of icons to organize information, such the education / employment / interests icons on a user’s discovery page.