The Flutter App

Finding Friends in New Cities

THE APP

TOOLS

Omnigraffle — Initial wireframing, prototyping, testing

Adobe Illustrator — Icon development, UI refinement

THE PROBLEM

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.

USERS

My target user was pretty clearly defined:

• Young: 20-28yo

• College educated

• 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

PERSONAS

To avoid falling into the trap of self-referential design or the “elastic user” I developed design personas to guide my process.

INITIAL RESEARCH

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”

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.

INFORMATION ARCHITECTURE

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:

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.

EVENTS

• 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.

DISCOVERY

• 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.

VISUAL DESIGN

COLOR PALETTE

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.

TYPOGRAPHY

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.

ICONOGRAPHY

I developed a variety of icons to organize information, such the education / employment / interests icons on a user’s discovery page.