Friends Don’t End with Fri: A UX/UI Case Study
Fri is an app that prevents you from losing meaningful friendships. It makes a list of friends from your contacts and social media and ranks them based on closeness. The app suggests who to hang out with and what you should do with them based on what you enjoyed in the past and makes sure you are hanging out with friends that are at risk of forgetting you.
The Problem
It’s difficult to stop friendships from fizzling out, especially when going through a major life change like graduating or having kids. I’m graduating this year and had to prepare to not see all of my college friends every day anymore, only to be hit with classes moving online due to COVID-19. That’s two months I would’ve been able to prepare to say goodbye that is gone. Will I be able to stay friends with my classmates I don’t see anymore? Fri is an app I was designing that just happened to be able to resolve this problem.
Fri collects information from your contacts and social media to come up with a list of your friends. It sorts them into Cold Friends, Warm Friends, and Hot Friends based on how much you interact with them. Cold Friendships involve people you rarely hang out with and are at risk of fizzling out. Hot Friends are your besties and Warm Friends are in the middle.
Through Fri, you pick friends to make Hangouts with. This can be as simple as a phone call or a party with many people. Hang out with your Cold Friends to bump them up to make sure you don’t lose any friends. After you hang out, you are given a quick survey, which can help Fri make suggestions on what combination of friends you like hanging out with and what you like doing.
Fri can also send alerts to your phone in the form of reminders. These aren’t just for remembering when a hangout is happening, they are for birthdays and anniversaries as well. Anniversary reminders aren’t necessarily for couples, they can commemorate the date of any event you want to be reminded of annually to bring up with a friend.
Research
Researching friendships helped me understand why people lose friends and what type of people are prone to losing friends. Once someone reaches the age of 25, their friend pool decreases through the rest of their lives. Some reasons are that they’re separated from their classmates by jobs or distance, spending more time with a significant other, or their interests simply changed with age. I also found data that could help this apps AI, such as how many people someone contacts a month.
Survey
I conducted a survey to further my research and find out specific problems I could solve, data to help how Fri would work, and what specific functions I should include or exclude from the app. If I do a survey in the future I would have fewer “other” categories as they muddled the results, or include an “other” option as a choice rather than a write-in.
User Personas
Using the data I found through my research, I figured out the audience of my app. I made user personas, which are made-up of people who represent the type of person who would use Fri. This is a helpful reference to use when designing an app because it’s an easy way to remember what problems you are solving and for who.
Process
While conducting my research for the content of Fri, I was also researching the logos and design of other friendship apps. I was getting frustrated with trying to make the type look cool on its own, so I decided to make a mark separate from the type and then work from there. I created the logo to represent a friendship knot, which is a symbol of friendship.
After I finished my research and logo, I used a technique called card sorting to try to figure out how all the pages of the app work. How this works is you write everything the app does on separate cards and organize them in groups. Have other people look at the groups to see if they make sense and ask them to reorganize. After a few people, you’ll have the navigation of your app figured out.
Once the pages were organized, I made a paper prototype. This is similar to card sorting, except each page is roughly sketched out so you can gain a deeper understanding of how the app works and how to navigate it. You decide what buttons to where and if that makes sense. From there, I knew what each page could do and where they led, shown in the user flow above.
After that, I worked on the physical design of the app. I looked at a lot of UI kits online for inspiration and honed in on using big, translucent, overlapping shapes to break up the information and make the app fun to look at while still easy to navigate.
Instructor: Abby Guido
