How We Designed the Friendability App

Garth Pratt
Feb 21, 2017 · Unlisted

Friendability connects users with compatible friends in the area.

I designed the visual and UI/UX elements. My brother-in-law Michael Johnson came up with the idea and developed everything in Swift and Xcode.

Everyone wants to surround themselves with friends who they are compatible with. However, when you’re new to an area or looking to meet new friends, it can be challenging to find people you share things in common with. This process of finding others with similar passions and personalities can oftentimes be time-consuming, so we created a way to expedite it.

Step 1: The Problem

Today there are several apps and forums that exist to enable networking and dating services. However, there isn’t a platform that exists that brings together based on interests, hobbies and personality traits for the sole purpose of friendship.

Step 2: Research

We started by talking to friends that use apps or online platforms that measure compatibility. An overwhelming trend we found in talking with users of compatibility apps was that they used these platforms for the sole purpose of hooking up for a night instead of to build long-lasting friendships.


Time. My brother-in-law Michael created the concept for this app two years ago and developed a working prototype. Over the course of the past years, we gathered feedback from our users. When Michael was home from college over Christmas break we further flushed out the idea and then we got to work so it could be spec’d and ready to be developed hopefully before Michael left to go back to college. For me this meant designing all of the UI and UX in a three day time period so that Michael could develop the app once he got back to college. Our goal is to have the final product developed in time for a summer launch.

Target audience

The target audience for Friendability overlaps with the target audience for apps like Tinder that are used primarily for hook ups. One of our main challenges was figuring out how to clearly differentiate ourselves and make it clear that the purpose of our app was to create friendships. To do this, I kept the user profile photos small to remove focus from user’s “looks”. I diverted the focus instead to the brightly colored compatibility bar that draws the user’s focus to the compatibility aspect of the app instead.


We didn’t want this to turn into a creepy way to for people to stalk other people and we needed users to feel comfortable sharing their personal information. To work around this, we designed a way for users to make friend requests so that users can protect their information from those they aren’t “friends” with.

Step 3: Design

We spent Christmas break working through the design process of version two of the app from sketched comprehensives all the way to Hi-Fi prototypes.

As mentioned, we launched version one of Friendability on the App Store last year and learned a lot in the process. The app successfully allowed users to take a 25 question quiz and view their results, however, we found that past that people didn’t have a reason to continue using the app.

Our primary goal for version two of the app was to find a way that encouraged users to want to return to the app again and again. To accomplish this, we built a messenger that could be enabled when two people “friend” each other. We also built a feed that populates with new people who you can “friend” and then view their compatibility with you.

Navigation. I wanted the icons to be easy for users to understand from the get go to create a flow and easy navigation through the app. I also wanted the icons to work well across platforms and to be flexible as we modify the app in the future. The new symbols needed to respond well to any range of sizes, screens, and use cases.

Step 4: Launch

Our deadline to launch Friendability on iOS and Android was the summer of 2017. But now that I work for Apple, Michael’s taking over the app. I exported all of the design assets during Christmas break and once Michael develops the app this semester, Friendability will ship!

The following are four lessons we learned as we built this app:

  1. Define core design principles
  2. Don’t get married to personal ideas
  3. A prototype is worth a thousand mocks
  4. Show, don’t tell
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store