Kinship
My first UX/UI Case Study
Project tools: Miro, Marvel Prototype App, Adobe XD & Photoshop
January 20th, 2022 reiterations continued on September 19th, 2022
About Kinship
Kinship is an app designed for young adults who want to build new, authentic and long-lasting friendships.
Problem Statement
Adulthood is noted as a time filled with excitement and change. This age group is also met with long periods of loneliness, as old support systems slowly begin to disseminate and are replaced with new ones.
​
With more apps and modes of communication than ever before, why are we having a difficult time building and forming new friendships? Why are current friend apps in the market a hit or miss for users? The Kinship app aims to answer and solve these problems.
My UX Roles
primary and secondary research, building persona, low and mid-fidelity frames, developing screeners, affinity mapping, empathy mapping, user flow, red routes, lo-fi prototyping, and usability testing.
My UI Roles
visual design mockups and high-fidelity frames.
The Design Process
.png)
Discover
-
Conducting primary and secondary research to identify the needs of stakeholders and users.
-
Screeners & User Interviews
-
Heuristic Analysis of Competitors
-
Target User
-
How Might We?
Target User
-
Mid 20’s to early 30s
​
-
have currently moved to a new city or experiencing a shift in their career and personal life
​
-
have a smaller friend group
​
-
comfortable using technology
Secondary Research Highlights
When researching this topic, it was important to learn from scholarly articles and organizations (such as the CDC), to understand the causes of loneliness and why mental health illnesses have been more pervasive in younger generations.
-
Increased screen time used for entertainment instead of interaction has created more isolation within the Gen-Z group.
-
Age heavily influences support groups and lifestyles. “Emerging Adulthood” (ages: 18-25) noted significant shifts in life. Emerging Adults are graduating, moving from their hometown/college town, or accepting new work positions which often leads to increased loneliness and anxiety.
-
Circumstances to making friends organically are no longer at play once you get older.
Target User Interview
Due to the nature of this app, it was important to interview individuals who fit my target user. At this stage, I created a screener and selected participants who most aligned with the app's potential audience.
​
Out of 21 screener responses, I selected 5 to participate in the interview.
​
​
.png)
Response Highlights
.png)
These responses aligned with similar insights found in the secondary research.
-
Most participants experienced peak loneliness after college graduation.
​
-
Participants harp on the impacts of social anxiety on following through with meeting other users outside of the apps.
​
-
Participants noted often being ghosted or lack of communication while pursuing online friendships.
​
-
Participants who have used groups or meet-up apps state that they feel unsafe or “sketchy”.
​​
-
Participants had difficulty connecting with individuals who matched their values and interests.
Heuristic Analysis of Competitors
The final part of the discovery phase was participating in the heuristic analysis of competitors. This is where I studied 3 direct competitors (Yubo, Bumble BFF, Meetup) to not only study their strengths but to specifically study 3 of the 10 usability heuristics and recognize what I can add (or avoid) to my own app design.
​
The three heuristics I chose were: Visibility of System Status, Natural Mappings, User Control, and Freedoms.
_edited.png)
Kinship Project Goals
After compiling the information from my research, created 4 outcomes when designing this app.
How Might We
How Might We increase feelings of credibility of group meet-ups?
How Might We identify/spot users who are genuinely seeking friendships?
How Might We alleviate the stress of meeting new people after talking on an app?
How Might We create a site which retains users to continue using the app?
**How Might We make the process of finding friends more enjoyable?
Goal 1
To create features that ensure safety and reliability for users who decide to participate in an in-person event or group.
Goal 2
To take into consideration mental health, such as anxiety, for users who want to form long-term connections.
Goal 3
To make it easy for users to spot individuals who match their values and are authentic in their pursuit of forming new relationships.
Goal 4
To allow people to have fun and easy-going experiences when making friends through Kinship.
Defining
-
Personas
-
Empathy Mapping
-
Jobs to be done
User Persona
Another way to conceptualize my potential users is through creating a visual representation called a "persona".
Empathy Map
Similar to a persona, empathy gives even more clarity as to the needs and desires of the target user. In this case, the empathy map provides direct quotes and/or thoughts I might expect from my persona.
Jobs to be done
.png)
Ideation
This is where I combine my research and background knowledge regarding my persona and develop possible solutions.
-
Affinity Mapping
-
Concept Map
-
User Flow
-
Red Routes
Affinity Mapping
Participant 1
Participant 2
Participant 3
Participant 4
Participant 5
.png)
Using the Affinity Mapping methodology, I highlighted important insights from each participant then categorized insights by different themes.
Red Routes
Following the Affinity Mapping, I was ready to identify my top 3 red routes for the Kinship app. Red Routes are the screens that not only outline the primary function of the app, but they are the screens that provide the most value to my users.
.png)
Red Route 1: Profile Set-up
The first route I identified was the profile set-up. Making a high-quality profile provides value to users due to the nature of the app. Users come to Kinship to build life-long friendships, thus, to identify quality users I must allow them to make quality profiles.
.png)
Red Route 2: Group Search
The second red route identified was the "group search route". This is important since users will be able to identify potential friends by the groups they are interested in. It is crucial that users have a fun experience when doing so.
.png)
Red Route 3: Swipe Feature
The final red route identified was the swipe page feature. Aside from users being able to find big groups of individuals that match their values and interests, users also have the option of finding friends 1:1 and individually viewing their profile.
Concept Map
Now it was time to bring my red routes together and create a concept map. The concept map clearly displays how one screen and route relates to another as a whole.
_edited.jpg)
Each color relates to the level of an app. As seen above, green represents the main menu of Kinship.
User Flow
To get an even clearer visualization of the red routes, I developed a user flow in Miro.
Friend Swipe Flow
Profile Creation
.png)
.png)
.png)
.png)
.png)
Now that I have clearly defined the screens and crucial routes my users must take to achieve the most value, I am now ready to sketch my screens.
.png)
.png)
Group Search
.png)
Prototype
This is where I combine my research and background knowledge regarding my persona and develop possible solutions.
-
Lo-Fidelity Prototype
-
Mid-Fidelity Prototype
-
Hi-Fidelity Prototype
-
Wireframe (detailed) User Flows
-
**Initial Visual Design Guide
Lo-Fidelity Prototype
Using the flow above, I began sketching the screens and then uploading it to the Marvel app to create my first lo-fidelity prototype.
.png)
.png)
.png)
.png)
Mid-Fidelity Wireframes
Using the flow above, I began sketching the screens and then uploading it to the Marvel app to create my first lo-fidelity prototype.
_edited.jpg)
_edited.jpg)
_edited.jpg)
Initial Design Concept & UI Elements
When deciding on the color scheme for the app, I created a mood board that directly reflected the emotions I wanted users to feel: hopeful, safe, and warm. During the visual stage, I reflected on the message and purpose of kinship. While “Kin” is a term that translates to “of blood”, I aim for the relationships that are built on the app to be strong and authentic as that of family.
.png)
.png)
.png)
.png)
.png)
Additionally, I strongly emphasized the “ship” aspect of the design as the ship represents the user's journey during adulthood. It is ultimately a reminder that though the voyage may be difficult, lonely, and confusing there is hope for a new future on the horizon. The vibrancy of the gold sunlight directly represents this. As a result, I chose blue to represent the sea and gold to represent the sun.
Hi-fidelity Wireframes
.png)
.png)
Testing
-
Usability Testing Highlights
-
Reiterations
Usability Testing Insights
Using the high-fidelity prototype, I did a virtual 1:1 moderated usability test with three users who matched my screener demographics. I participated in 2 separate usability testing and reiterated my design 3 times.
-
Based on the feedback, I completely changed the color scheme. Users felt that the original prototype’s colors were too bold and sharp.
​
-
participants mentioned the app being overwhelming and cramped. The spacing was a repeated issue on both usability tests.
​
-
users were confused with the menu option. Some elements in the menu were repetitive and can be found on the home page.
​
-
Additionally, all users wanted easier access to their bookmarked events and groups.
​​
-
Furthermore, the original home button, which was supposed to represent a lighthouse, was also not well-liked. Thus, I took into consideration the feedback and changed the menu icons and options.
Hi-fidelity Wireframes
After 2 usability tests and 3 re-iterations later, this was my final design...
.png)
.png)
.png)
.png)
.png)
My Lessons
As Kinship was the first project I ever worked on, it was also the app I fondly refer to as a "labor of love". Throughout this process, I overcame many challenges and learned some of the most insightful lessons. Above all, I became a better UX/UI designer for my future projects in this portfolio.
Lesson 1
-
Know when to stop. ​
​​
During this project, I iterated and re-iterated the design about three times. While a project is never truly complete, I gravitated toward making bigger design changes with elongated the project. I learned that I can make changes without changing the integrity of the original design.
Lesson 2
-
Select more diverse participants.
​​
During the participant selection process, I sought out individuals to interview through my slack channel, work colleagues, and those in my personal life. However, most of my participants ended up being women. I often wonder how my design would be influenced if I had balanced feedback with both men and women participants.
Lesson 3
-
Mental health and its role on social platforms.​
​​
I chose kinship as a way to learn how to design an effective social app. While I did learn how to create wireframes and participate in usability testing, I learned how mental health plays a role in our designs. User-friendly is not only about how effortless it is for users to use the platform, it is also about how much they enjoy using it.
