FriendFuse
iOS Socializing App
End-to-End Design of an iOS App That Connects Individuals Through Shared Interests
FriendFuse
iOS Socializing App
End-to-End Design of an iOS App That Connects Individuals Through Shared Interests
FriendFuse
iOS Socializing App
End-to-End Design of an iOS App That Connects Individuals Through Shared Interests
Problem
Problem
Having moved to a new country and leaving old friends, I wanted real friendships. The challenges of forming meaningful friendships in adulthood inspired me to find a solution for this common problem.
Solution
Solution
Creating a mobile application that helps adults find and build meaningful friendships with like-minded individuals.
Project Overview
Project Overview
Timeline
Feb 23 - Jul 23
Timeline
Feb 23 - Jul 23
Timeline
Feb 23 - Jul 23
Team
Solo Project
Team
Solo Project
Team
Solo Project
Role
Ux Designer/ UX Researcher
Role
Ux Designer/ UX Researcher
Role
Ux Designer/ UX Researcher
Tools
Figma, Miro, Google Form, Marvel, Procreate
Tools
Figma, Miro, Google Form, Marvel, Procreate
Tools
Figma, Miro, Google Form, Marvel, Procreate
↓ Keep Scrolling to See the Design Process ↓
↓ Keep Scrolling to See the Design Process ↓
Research | What Makes Making Friends Easier?
Research | What Makes Making Friends Easier?
Shared interests, experiences, and values can facilitate the formation of meaningful connections with others which can make the process of making friends easier and it can increase the likelihood of forming a lasting friendship.
Shared interests, experiences, and values can facilitate the formation of meaningful connections with others which can make the process of making friends easier and it can increase the likelihood of forming a lasting friendship.
To better understand the problem space, I interviewed five users about their challenges in making new friends and uncovered five key insights:
To better understand the problem space, I interviewed five users about their challenges in making new friends and uncovered five key insights:
Competitive Analysis | Surface Matching Limits Meaningful Connections
Competitive Analysis | Surface Matching Limits Meaningful Connections
Platforms analyzed: Bumble BFF, Meetup, Nextdoor
After conducting a heuristic analysis, I identified Bumble BFF as a primary competitor:
Key insight: Bumble BFF emphasizes surface-level matching (appearance and short bios), limiting deeper connections (also confirmed in interviews)
Gap identified: No option to manually filter friend suggestions by shared interests
Platforms analyzed: Bumble BFF, Meetup, Nextdoor
After conducting a heuristic analysis, I identified Bumble BFF as a primary competitor:
Key insight: Bumble BFF emphasizes surface-level matching (appearance and short bios), limiting deeper connections (also confirmed in interviews)
Gap identified: No option to manually filter friend suggestions by shared interests
Bumble BFF Filter Options, 2023
Bumble BFF Filter Options, 2023
Early Ideation | Removing Profile Picture?
Early Ideation | Removing Profile Picture?
Guided by research insights, I decided to design an app without profile pictures to shift the focus away from appearances and toward what truly matters in forming friendships: shared interests, location, age, and other meaningful factors.
To base my sketches on solid groundwork, I first created this user flow:
Guided by research insights, I decided to design an app without profile pictures to shift the focus away from appearances and toward what truly matters in forming friendships: shared interests, location, age, and other meaningful factors.
To base my sketches on solid groundwork, I first created this user flow:
Removing The Profile Picture Feature
Removing The Profile Picture Feature
Additionally, to foster more meaningful connections, I included a video call option that becomes accessible after a few interactions between matched friends.
Additionally, to foster more meaningful connections, I included a video call option that becomes accessible after a few interactions between matched friends.
Filter Feature
Filter Feature
In user interviews, I heard several users say shared interests is necessary but not enough to form friendships; which is why I included a filtering feature so that users can narrow down their search criteria and specify multiple preferences such as interests, age, personality, language, location, etc.
In user interviews, I heard several users say shared interests is necessary but not enough to form friendships; which is why I included a filtering feature so that users can narrow down their search criteria and specify multiple preferences such as interests, age, personality, language, location, etc.
Matching Feature
Matching Feature
During user interviews, I encountered a user struggling to find individuals with similar interests who were also interested in making new friends. To address this concern, I incorporated a matching feature, ensuring that when both parties show mutual interest, they would become a match”
During user interviews, I encountered a user struggling to find individuals with similar interests who were also interested in making new friends. To address this concern, I incorporated a matching feature, ensuring that when both parties show mutual interest, they would become a match”
Once I finished the sketches, I turned them into a quick prototype to test things out early and spot any improvements before diving deeper into the design.
I spotted a few usability problems and addressed them in the wireframes.
Branding & High-Fidelity Screens
Branding & High-Fidelity Screens
Branding
Branding
Upon completing the updated lo-fi screens, I started to think about the branding of FriendFuse. With the app goals in mind, I wanted the brand attributes to be trustworthy, inclusive, and caring. This helped me create a style guide that reflected these things.
Upon completing the updated lo-fi screens, I started to think about the branding of FriendFuse. With the app goals in mind, I wanted the brand attributes to be trustworthy, inclusive, and caring. This helped me create a style guide that reflected these things.
Splash Screen
Splash Screen
To create an inclusive design, I opted for colors rather than images for the splash screen background, showcasing my brand's unique color palette. The combination of yellow, green, and red is blended into a captivating gradient, dynamically moving in the background, giving the interface a lively and vibrant feel.
To create an inclusive design, I opted for colors rather than images for the splash screen background, showcasing my brand's unique color palette. The combination of yellow, green, and red is blended into a captivating gradient, dynamically moving in the background, giving the interface a lively and vibrant feel.
To create an inclusive design, I opted for colors rather than images for the splash screen background, showcasing my brand's unique color palette.
The combination of yellow, green, and red is blended into a captivating gradient, dynamically moving in the background, giving the interface a lively and vibrant feel.
Home Screen
Home Screen
Without profile pictures, I opted for interest-based illustrations. Profiles now have color-coded personalities:
• Green for introverts
• Yellow for ambiverts
• Red for extroverts
• Neutral for users who chose not to display their personality type on their profile
Without profile pictures, I opted for interest-based illustrations. Profiles now have color-coded personalities:
• Green for introverts
• Yellow for ambiverts
• Red for extroverts
• Neutral for users who chose not to display their personality type on their profile
Testing the Design | Iterating to Improve Guidance for Users Facing Unfamiliar Flows
Testing The Design | When users are far from what's familiar, they need more guidance.
I ran two rounds of usability testing to evaluate how intuitive and enjoyable the app was to use. One key insight led to a major design improvement and reinforced an important lesson:
I ran two rounds of usability testing to evaluate how intuitive and enjoyable the app was to use. One key insight led to a major design improvement and reinforced an important lesson:
Issues
Issues
Users mistook the home page profile as their own
One user questioned profile colors
Understanding the bottom navigation buttons required experimentation
Users mistook the home page profile as their own
One user questioned profile colors
Understanding the bottom navigation buttons required experimentation
Iteration
Iteration
Added a brief tutorial for more guidance
Added a title on the home page
Added a brief tutorial for more guidance
Added a title on the home page
Final Solution
Final Solution
FriendFuse is a mobile app designed to facilitate making friends through connecting people with shared interests and values.
FriendFuse is a mobile app designed to facilitate making friends through connecting people with shared interests and values.
Reflection & Takeaways
Reflection & Takeaways
• One of the biggest lessons I learned in this project is: “Don’t make assumptions.”
Usability testing reminded me not to make assumptions; it uncovered a multitude of issues I hadn’t anticipated, from unclear navigation to misunderstandings about profile design.
• As a solo designer, I owned the project end-to-end, from research to high-fidelity designs, which gave me firsthand experience in balancing product strategy and design execution.
• I also realized how small adjustments, like adding onboarding guidance, can make a big difference in user experience.
• Given additional time, I would have loved to further explore the idea of adding icebreaker activities and conversation prompts, which some usability testing participants mentioned would help ease initial communication.
• One of the biggest lessons I learned in this project is: “Don’t make assumptions.”
Usability testing reminded me not to make assumptions; it uncovered a multitude of issues I hadn’t anticipated, from unclear navigation to misunderstandings about profile design.
• As a solo designer, I owned the project end-to-end, from research to high-fidelity designs, which gave me firsthand experience in balancing product strategy and design execution.
• I also realized how small adjustments, like adding onboarding guidance, can make a big difference in user experience.
• Given additional time, I would have loved to further explore the idea of adding icebreaker activities and conversation prompts, which some usability testing participants mentioned would help ease initial communication.
Thank You for Reading My Case Study!
Thank You for Reading My Case Study!
Want to work with me? Feel free to contact me!
Email: faranak.vn@gmail.com
LinkedIn: https://www.linkedin.com/in/faranak-vn/
Want to work with me? Feel free to contact me!
Email: faranak.vn@gmail.com
LinkedIn: https://www.linkedin.com/in/faranak-vn/
