Brainstation
Capstone
Personable
Please view this project on a desktop for a full explanation of my process.
BrainStation Capstone
Personable is an iOS application that connects individuals with others in their area based on how compatible their personalities are. Users start by completing the Meyers-Briggs Personality Type quiz to get a 4 letter result. Personable will then match them with others based on their personality type, similar interests, and further match preferences the user can customize. Once the user connects with a match, they can chat directly in the app, create hangout events, and review plans in the in-app calendar. This app has to protentional to help users create meaningful friendships that can last the test of time. Check out my process bellow!
UX/UI Designer
10 weeks
Figma | Zoom | Canva | Otter.ai | Google Slides | Google Meets
Personable
Role
Duration
Tools
My Design Process
Discover
define
ideate
Design
test
refine
When designing, I used a User Centric Approach in order to address the whole user experience. This approach ensured I stayed on track and kept the user in mind during my entire process.
The problem space
- Loneliness is equivalent to 15 cigarettes a day.
- Loneliness exceeds the health risks of obesity.
- Loneliness costs employers $154 Billion a year in lost productivity.
- Loneliness affects 2 in 5 young adults.
- Loneliness affects 41% of seniors 66 and older compared to 79% of young adults.
What is loneliness?
Loneliness costs employers
a year in lost productivity.
According to social psychologists, they define loneliness as the gap between the social connections you would like to have and those you feel you experience.
$154 Billion
Loneliness is equivalent to
cigarettes a day.
15
Loneliness affects
young adults ages 18 to 34.
2 in 5
Discover
The problem staTEMENT
79% of young adults, ages 18-34, are experiencing loneliness due to a lack of meaningful connections. This spans race, ethnicity, and gender resulting in a rise of depression and anxiety among the younger generation.
What is loneliness?
Loneliness costs employers
a year in lost productivity.
According to social psychologists, they define loneliness as the gap between the social connections you would like to have and those you feel you experience.
$154 Billion
Loneliness is equivalent to
cigarettes a day.
15
Loneliness affects
young adults ages 18 to 34.
2 in 5
Discover
To ensure I was on the right path, I made a testable hypothesis that would continue to inform my understanding of the problem space and start to form a potential solution.
I believe social media has a negative effect on young adults making meaningful connections. I know I’m right when 2 out of 3 of my interviewees confirm they post on social media inauthentically.
Hypothesis
When conducting interviews, I had to ensure my participants fit the demographic I defined in my problem space. In my research findings thus far, I have learned social media, despite its ability to connect people, actually hinders friendship and connection. Its easy to connect with old friends from high school on social media, but incredibly difficult to leverage it and stay close with one another. With that being said, my interview participants needed to be...
1. Between the ages of 18 and 34.
2. An active user on 2 or more forms of traditional social media.
3. At least a high school graduate or more.
Interview Criteria
Interviews
Discover
Social media makes it easy to compare yourself to others which can result in a poor self image and low confidence.
Poor
self image
Forming and keeping meaningful connections is hard when you have a busy life and aren’t sure who you could potentially “click” with.
Meaningful connections
Social media promotes inauthenticity making it difficult to be your true self and see others for who they really are as well.
Being
Inauthentic
To understand the user more thoroughly, I used affinity mapping to pull out key data from my interviews and separate them into pain points, motivations, and behaviors. Doing this allowed me to clearly see 3 main themes and insights that have a protentional for design intervention.
Affinity Mapping
define
Click to view affinity map
How Might We
I used my chosen theme of making meaningful connections to create a How Might We question that defines my design goal and my demographic. Doing this ensures I stay user focused during the design process. I refer back to this statement often while designing and iterating upon my final product.
define
How might we facilitate meaningful connections between young adults, ages 18-24, so that loneliness decreases?
Persona
I used characteristics, goals, motivations, behaviors, and pain points from my interviewees to make a persona. My persona encompasses the needs of my larger user group and will allow me to make more informed design decisions by keeping my personas needs in mind.
define
Experience Map
Creating an experience map gives me more insight on Dylan's current journey before my application would come into play. It gives me an opportunity to access where I can improve his experience and what intervention may be warranted. For example, Dylan is very excited and interested in making a new friend, but finding one on traditional social media leads him to be discouraged because he didn't have a good experience.
define
Ledged:
Task Flow
Trusting my research and process thus far, without being solution oriented, I could now see a clear direction my application needed to go. I used the above user stories to create a task flow that helped me visualize the proposed sequence of steps my users would encounter when interacting with my digital product. The users ultimate task is to find someone they could potentially connect with and make plans to hangout. Users will feel confident in their decision because they will know their personalities are compatible based on a personality test they have taken.
ideate
Screen State
User Action
Sketch to Wireframe
With a clear design solution in mind, I created a UI Design board to start getting inspired about how I wanted my application to aesthetically look. I used the inspo to create several sketch's for each screen state until I was happy with my design. I then made a final solution sketch for each screen that I would use to build my low fidelity wireframes.
Design
In their profile page, the user has the freedom to edit their public profile, sort their match's and access their application settings. Being able to do these actions gives the user more say in who they are matched with, which ties back into some user stories I created. They can also view their personality quiz results and retake it every 6 months if they wish. Personable understands that personalities aren't just black and white, but can change through time, experience, and knowledge.
users profile screen
match screen
On the Match screen, users are able to swipe though who they have been matched with based on their personality quiz. The user is able to see their match's quiz results, their compatibility percentage and can send a friend request. Giving the user this information allows them to make an informed decision of who they connect with.
calendar screen
When a user sends or receives a hangout request, and it is accepted, that event will auto populate to the calendar portion of the app. Users can review information, send ETA's and get directions to the events location here. Having this function allows the user to stay informed and reduces anxiety around wondering if their new friend will show up or not. The user will receive live updates as plans change.
Usability Testing
I conducted 2 rounds of usability testing with 5 participants each. Doing this allows me to see how users will interact with my application and what problems they might be having. Throughout the process, I made acute observations about how my participants used and interacted with my prototype. After each round, I synthesized my findings and made iterations to my design based on the feedback. Below is the final low fidelity wireframe's that were updated after all the usability testing feedback was implemented.
Test
Back
Next
Swipe image for next screen
Match Screen
- A connection request CTA was added to bring the goal on making a connection front and center.
- Card’s were once again added to encase different types of information, and more content was added to bring the personality quiz to the forefront.
- The swipe bar at the bottom received more context, like a name and personality match percentage.
Wire FLow
- They open the app and land on their profile page. The open tab displays their personality test results for their review.
- The user can click on the match preferences tab to sort their matches even further by distance, age, and other lifestyle choices like alcohol usage, for example.
- From here, the user can go to the match screen so view who in their area they have matched with. The personality comparison folder is open to show the user why personable has matched them with this person based on their personality test results.
- They can click on the "about" file folder to view more about the person they have matched with, like their favorite songs or a personal bio.
- The user can click on the "connection request" CTA, and a modal will pop up with an open to input a short message with their request.
- When users submit their connection request, they can return to the match screen or move to the connection page.
- On the connection page, they see their accepted and pending connections.
- They can open the message screen by clicking on the "card" of one of their accepted connections.
- From here, they can chat and send hangout event requests. A modal will pop up with input fields for all the details they would like to include for their hangout event.
- When their hangout event is confirmed, the event will auto-populate to the calendar page where the user can review the details and make any updates as necessary.
Test
Mood Board
Now that my product is user friendly, it is time to develop a brand. To start, I created a mood board what would encompass the overall feel and aesthetic of my application. I wanted a clean, but fun aesthetic that represented connection, friendship, and fresh starts. From these images I pulled a color pallet, line/shape forms, and used it to focus on the feel my application would project.
refine
Color
refine
#DEDCC4
#D0CECC
#F8F7F5
#21242E
#5C7A99
Branding
Once I had a refined color palate, I used it to create a wordmark and brand for my product. I decided on the name Personable because of the meaning behind it. To be personable is to be charismatic and open to conversation. It continues to drive the overall concept of my application. I used inspiration from my images to create my one line side profile. I found the lines of the waves, mountains, and curtains to be specifically inspiring for this.
refine
High Fideliy
Without further ado, I would like to present Personable. Click an image in the gallery to have a closer look at each screen.
refine
view prototype
Whats next
Working on this project for 10 weeks has allowed me to grow and learn as a UX designer. After every turn I was getting new knowledge that challenged me to go back and rework or update something. For example, between my first low fidelity wireframe and my second, I received a lecture on grids and spacing. It was a difficult decision to make, but I decided to completely remake my wireframes to have good and consistent spacing. It was frustrating, but it helped me in the end when I was redlining to create a UI Library. My next steps for this product would include designing, testing, and iterating upon the other functionality Personable has to offer.
Closing
Marketing Website
Have a look at Personable's responsive Marketing Site. I used responsive design principles to create a marketing site to advertise Personable and its offerings. Check it out!
Before you go
