The Flutter App

Finding Friends in New Cities

 

THE APP

 

Discovery Profile — find new friends, learn about their education, career, and interests.

 

Events — meet new friends in group settings centered around social activities

My Profile — what others see. Change your settings and preferences to personalize your discovery pool.

Discovery Ad   — Swipe right or tap the CTA to learn more/ purchase. Swipe left or tap the x to pass.    

Discovery Ad — Swipe right or tap the CTA to learn more/ purchase. Swipe left or tap the x to pass.

 

My Events — plan a new event or view your existing events.

Messages — Begin conversations with new matches at the top, or continue in-process conversations below.

 

Plan an Event — plan a new event to meet new friends.

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”

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.

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:

 

discovery.png

Discovery / Home

Allows users to swipe “pass” or “interested” on potential friends’ profiles

messaging.png

Messaging / Matches

Allows users to view matches’ profiles, and send messages

profile.png

My Profile

Allows user to view and edit their public profile, change settings and preferences

events.png

Events

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

 

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.