Frandle App

Frandle is a product designed out of the User Experience (PT) course at Bitmaker Labs General Assembly. The goal of the app was to explore the problem of adult friendships being particularly hard and providing end users with a solution (through research and testing) that meets and addresses the problem successfully. 

CLIENT: Self
ROLE: Product Designer, Student
AGENCY: Self
TOOLS USED: Sketch, Balsamiq, Photoshop, InVision
YEAR: 2018
TYPE: Product Design, User Interface and Experience Design, Case Study
Frandle_Home_2x
THE PROBLEM

Adult friendships, in short, are hard! After moving from the university or college bubble and entering the workforce, adults find it increasingly hard to maintain solid friendships (and even finding new ones). A quick Google search about this issue shows many articles and blogs written on why this issue exists with some suggesting practical steps one can take to make it easier. The most common reasons pointed out are lack of time, family obligations, distance, and work. 

With the abundance of social media and dating apps, I noticed a lack of solutions that tackled the problem of adult friendship directly. On the one hand, social media apps like Facebook and WhatsApp have made it easy to connect and keep in touch with your friends. However, they don't provide a platform for users to track, help foster, and grow their relationship with others. Similar to how fitness apps are particularly designed to help users pursue a goal, I wanted to explore how I could apply those similar approaches to friendships. 

THE RESEARCH

The initial phase of the research was to conduct user interviews and to gather data on the pain points and frustrations surrounding the difficulty of adult friendships. The process was to ask open-ended questions in order to establish a general idea of how users are currently keeping up with their friendships and what they hope could improve. 

The next step was to develop a user profile from the data collected, followed by storyboarding scenarios, designing a sample user flow, and then a task overview.

Frandle_Scenario
USER SCENARIO STORYBOARDING
Frandle_UserProfile_v2
USER PROFILE
USER FLOW & TASK OVERVIEW
BUILDING THE PROTOTYPE

During the wireframing and prototyping stage, I started off ideating through rough and quick sketching looking at various screens and interface options. I explored ways that an end user could see their list of friends, an instant messenger, a way to find out when their friends were free, and a graph screen where users could track their progress.

The key challenge was finding a way an end user would be able to track their friendship progress and see how they're doing as well, which led to looking at how the levelling up system most commonly found in RPG games is done. With that idea, I implemented a similar system so that an end user would be able to track how their friends are levelling up compared to their other friends and encouraging them with a micro-game.

Frandle_LowFid
LOW FIDELITY PROTOTYPE
Frandle_MidFid
MID FIDELITY PROTOTYPE (BALSAMIQ)
Frandle_logo
Frandle_colours
BRANDING

The official typeface I used throughout the app is Open Sans. It's very optimized for legibility for print, web, and mobile interfaces; and it is neutral, unassuming, and has a friendly slant.

Consequently, I chose to use Open Sans for the logo while making some minor kerning and letter shape changes and giving it a personality that reflected what Frandle was all about.

For the colour palette, I chose a mix of blues, a yellow, and greys because I wanted the app to have a friendly feel but also have a calm and trustworthy feel to it.

USER INTERFACE DESIGN
Frandle_FirstScreens2

For the first screen, users will be presented with a way to sign in or create an account or have an onboarding experience of exploring the app, with limited features, and getting a feel of what the app is all about. The calendar screen presents users with a place where they can see who among their friend list is free, input when they themselves are free (see input screen below), and check their upcoming meetups. The graph/progress screen is a place where users can track how they're doing and compare their progress with their friends.

Frandle_SecondScreens

In the friend list screen, users can see their friend list, be able to add more friends, and check their friend's level. The friend profile page shows more detail about the user's interaction and progress with that friend and also be able to call or message. The chat screen is fairly simple with the added feature of the user being able to create a meetup right there in the chat box (see Input For A Meetup screen below).

Frandle_ThirdScreens

Tapping on the user's profile brings out a sliding menu from the left that reveals additional menu items. Tapping on the bell icon reveals a panel on the right that shows the user notifications from the Frandle Bot. Frandle Bot is an AI bot conceived to help the user progress better with their friends. It sends the user notifications and incentivising the user to earn extra points by completing extra tasks with a particular friend. The Frandle bot basically functions to keep the user motivated and to gain experience points with each friend and not let any of the user's friends fall off the cracks. 

PROTOTYPE WALKTHROUGH
Click here for the InVision prototype.
USABILITY TESTING & FEEDBACK

After the successful completion of a working prototype and running a handful of user tests, feedback was very positive about the use and purpose of the app. The user interface and the experience were noted to be clear to the testers. Users felt the app would be a great tool to help them keep in touch with their friends and see, quantitatively, how their friendship were doing.

Frandle_Feedback
FINAL THOUGHTS & LEARNINGS

Throughout the User Experience course at Bitmaker Labs GA and working on this project from research and planning to the final prototype, I learnt the importance of applying and listening closely to user feedback and learning to personally step away from the process and let the product be designed out of the need and concerns of the users.

Frandle_Collage_2x

View more projects

Frandle AppProduct Design, UI&UX Design

Gears WebsiteVisual Design

Landing PagesVisual Design

Logos & Marks Vol. 1Branding, Logos

Wedding InvitationsPrint Design

Want to get in touch?

Email me at varlien@gmail.com

© CHELMS VARTHOUMLIEN 2018