May 2019 - 14 week class project - independent study

Third Space is a location based meetup app for people to have quick personal conversations IRL. I used design research and branding to create a comprehensive social experience.

This is a preview. Full case study in progress.

My Role

UX - user research and user flows
Visual Design - branding and UI

timeline

14 Weeks
May 2019 to August 2019

tools

Notion - planning user research
Lucidchart - synthesizing user research
Figma, Sketch - designing UI and workflows
Principle - Prototyping

01. Problem

How can we help people feel less isolated in their community?

01. isolation
02. No time
03. lack of connection

This project addresses the problems of feeling isolated or lonely in your community. Causes could be anything from moving to a new city, growing apart from your friends, or having a chaotic schedule where it's hard to find time to meet up with people.

Sometimes, people just have trouble meeting the right people. The people they are meeting are nice but don't share any similarities or values. As a result, many people can still feel lonely despite being surrounded by many friendly acquaintances.

Scheduling

"It’s difficult to meet people while working and in the Midwest, it seems like everyone gets married right out of college - they have their own lives."

-K, Engineer in Neenah, Wisconsin

Going seperate ways

I'm not really happy with my current social life. Love all my current friends but we’re all kind of splitting apart and doing our own thing and don’t have a lot of time to talk so it would be good to find some people who are local.

- G, Copywriter in Seattle, Washington

Meeting people is hard

"What was really difficult about graduate school wasn't the coursework but the lack of social life. I was unlucky and didn't manage to meet people in class."

- J, Grad student in Palo Alto, CA

Competitive Analysis: popular meetup apps

Currently most popular apps that focus on platonic relationships are for pen pals and meeting people internationally instead of locally. I focused on analyzing popular local friend making apps people were using. There are less popular meetup apps, but they are either unusably buggy or for niche groups like moms and dogowners.

Bumble BFF is the closest to a mainstream friend finding application there is. Some users felt that this option was intimidating and struggled with creating appealing bios.

Meetup is a great option to meet new people while engaging in hobbies. However, not all cities have active groups that fall within the user’s interests. Meetup times can conflict with schedules so users can't make it meetings. Meetup also isn’t a great option for people who struggle in group situations.

Bumble BFF - Trying too hard

"I tried Bumble BFF when I moved. I just could not handle how hard everyone was trying when I just wanted a casual drink" 

-J, working professional in a new city

Bumble BFF - Time conflicts

"We always had conflicting schedules. I could never find someone who I liked and was free."

- C, nursing student

Bumble BFF - Feeling uncool

"All the girls on there just felt too cool for me. I know I'm cool too but I don't know how to show it"

- F, Undergraduate student

Meetup - No convenient groups

In my city, there aren't many active meetup groups that did stuff I was interested in. The one group I was interested in met infrequently and at inconvenient times that clashed with my schedule so it was hard for me to go to the meetings.

- M, undergraduate student in a new city

02. Objective

Help people meet others in their community to form deeper friendships

03. Solution

Meet new people on your own time

01. discover
02. meet
03. grow

Third Space helps people build new close connections by facilitating quick and casual conservations. The digital app reduces the social friction of meeting new people. It shows users who’s around them who is also open for conversation at that moment at the right time.

This allows people to meet others whenever they have free time. Over time people can build up a network of people they would want to meet again to build deeper and more meaningful friendships. It helps people take the first step in making deep connections by starting new conversations.

Just find people you want to talk to, send them a request, and start talking.

how it works

Spaces

01. go out

Third Space works wherever the user wants to go. Whether they want to chill at their favorite cafe or check out a new bar, they always have the option to meet someone new.

If the user has trouble choosing a place, they can look at Spaces for ideas.

Turn on Profile

02. turn on profile

When users turn on their profile, they're explicitly letting people in the area know they're open to conversation. Users also indicate how long they want chats to last and what are some things they want to talk about.

It makes it easier to approach people when boundaries are clearly communicated.

Discover

03. Discover

Users can see people in their vicinity with cool interests, values, and humor they'd like to get to know better. It's easy to meet because everyone is at the same location at the same time.

There are also no worries about being approached by someone they don't want to talk to. Profiles remain anonymous until both users agree to meet.

Accepted Meet Request

04. meet

If a thumbs up is reciprocated, users can see each others personal profile photos. They can use these photos to find each other in a crowd.

05. early user testing and Design challenges

Problems with discrimination and safety

two early screens

Early generic profiles I made to test out the initial idea of a location based friend finding app.

01. unwanted encounters
02. approachability
03. discrimination
04. stalking

User interviews and testing revealed a lot of potential problems a location based friend making app could have. This only covers feature decisions from one round of mockups, not my visual design decisions or what I learned from my initial user interviews. This is from my first round of user feedback, and how I handled them with the design.

User concerns

User concerns came up when I tested a prototype that used a stereotypical profile setup that had profile pictures of people.

Unwanted encounters

“What if they approach me when I’m not interested in talking to them?”

Approachability

"How do I know if they are actually open for conversation?"

My concerns

1. Discrimination
An unhappy pattern was that people only wanted to talk to other users they found physically attractive, even if they were in a relationship and they did not share anything in common with the fake profiles. It's understandable behaviour if this was a dating app, but physical attractiveness of a friend was not a listed desired trait from user interviews.

2. Stalking
A malicious person can easily use this version of the application to follow a person. The app could act as a radar even if the stalker cannot see the person. As long as the person is in range, the stalker can follow them home.

This concern influenced my decision not to add a visual map feature that shows user locations or the distance between the user and other users.

Design decisions

1. Removing User Uploaded Profile Photos
This helped solve many issues with discrimination and stalking. By adding anonymity until both people agree to meet protects people from unwanted encounters. It also adds clearer intent that both users are consenting to conversation.

However this gave me a challenging problem with creating a visually interesting application without user uploaded photos.

2. Profile Visibility Options
By default, user profile visibility is off. Users only turn their profiles on in areas they want to be discovered. There's a time limit and it's location dependent depending on what users set when they turn on their profile. If the time limit runs out or the user leaves the predefined area, the profile visibility turns off. It removes the unintentional location radar issue.

Making users consciously turn their profile on also makes it clear to other users that they want people to talk with them. This helps with the approachability issue.

04. approach: user research

Understanding user values and translating it into brand values

01. study plan
02. Demographics

user interviews

I knew what kind of application I wanted design so I interviewed people I already knew were socially struggling in some way. I talked to people who have graduated college from the LA area and have since then moved to other cities in various parts of the US post-graduation. I wanted to understand how they’re adapting 1-3 years after graduation, and how satisfied they are with their new social lives.

I also talked with undergraduate students to learn more about how they balance their student life with their social life. In my study plan, I defined what my additional goals were for this interview and created question topics based off them.

Goals
I wanted to learn more about:
When would someone want to expand their social circle?
When and why somebody would want to socialize?
What kind of people would use this service?

Topics
Current social circle
Friendship desires
Traits they look for in friends
Socializing habits and attitudes
Currently used social apps

Demographics and Synthesis

I wanted a diverse interview sample so I talked to 9 men, women, and non-binary people. Around half the participants are straight and the other half are bisexual. While there was socioeconomic diversity, everyone I interviewed completed higher education or is currently in higher education. There are 5 STEM majors and 4 liberal arts majors. Everyone also identified as American, even if they were born in another country. I wanted to focus on American friendships for scope and cultural reasons. There were 3 neurodiverse participants. These people live in Seattle, the Bay Area, Wisconsin, LA, and New Jersey. I had an even spread of mixed race, Asian, and Caucasian participants. I agreed to anonymize their information.for privacy.

01. Everyone is unsatisfied
02. conflicting schedules
03. lack of similarities

Assumptions and surprises

I expected people who are currently in school, undergraduate and graduate, to be happier with their social lives. I was surprised when all 9 people said they were unsatisfied with their social life. However, people currently in school did score their satisfaction higher, around a 6/10, but they would further elaborate that had to do with their close friends groups. Without prompting, they gave a separate score for their school social life as well and the average was 3.7/10.

I was surprised by just how many post-undergraduate people were almost completely isolated despite all of them having very active and vibrant social lives in undergrad. There reasons were that that they had trouble meeting people outside of work and people who shared their hobbies and value systems.

People value connection, trust, security,
and self-improvement

06. Design SOlutions

Balancing fun, safety, information and excitement

Turning on profile

Discover is off when profile is off. Set a time for turning the profile on and how long you want conversations to be.

Third Space takes safety and privacy really seriously. Your profile is turned off if you leave the area and you forgot to turn it off yourself.

Discover

Find new users.

Making a profile

Instead of having a user-uploaded profile picture of their face, users make a profile picture that shows off their personality and interests. The user is given fields to fill out about themselves. Any key words that are connected to decorative stickers are highlighted in blue.

Users can choose a background color, a center figure, and then they can decorate with stickers.

Adding stickers to your profile picture functions like adding gifs and stickers to an Instagram story, but what’s available for profile decoration depends on what the user says about themselves in their profile.

This level of customization and decoration is given to the user to generate colorful, visual, and varied content since users cannot upload personal photos. The profile photos are also supposed to be informative and a glimpse of each user's interests.

The current profiles you see are profiles I had my friends make to test if:
1. They found the segmented profile maker easier for them to write about themselves
2. How creative they could be with a limited profile picture creator.

07. UI and brand evolution

Using brand experience to drive UI

Various visual iterations of the app

01. Designing without Brand
02. Designing with Inspiration
03. Creating Brand Strategy
04. Hyperspace UI Direction
05. Third Space UI Direction

This was a process of learning how brand, user research, and UX vision can work together to create a comprehensive user experience. It helped make the app "fun" and balance out the heavier features. User testing became more than just testing features and bettering navigation. I started to look for how people felt about the visual presentation too.

UI version 1 - no brand strategy

This followed a traditional user profile structure

I tried to create a visually interesting UI with no brand strategy to save time. I tried using animal profile pictures under the premise that people can choose animals they "vibed" with. Other users can make assumptions of the anonymous user based off the animal they chose. "Oh Jen chose a puma? It must be because she's strong." 

This UI was boring and uninformative. People couldn't tell why others chose certain animal pictures. The overall user experience came off as lackluster, dry, and uninteresting.

UI version 2 - no brand strategy, 90s inspo

I can't deny that I love 2000s web design

I was inspired by early 90s and 2000s message boards. They were digital third places that allowed people to bond over similar interests under the safety of anonymity. I wanted to combine those elements with modernity to keep it relative.

Nostalgic elements: 
Color, monospace typeface, anonymity, customization, loading bar elements

Modern elements: 
Emojis, Work Sans typeface, rounded corners, slight shadows

During this time I explored visualizing the similarity of profiles with bars and profile creation. A problem I ran into when asking my friends to create profiles in this version was that they froze at typing up a "bio". They were unsure how to portray themselves.

Another issue with this was that it felt tight and claustrophobic to people. There was too much text and indirect. People didn't want to read the profiles.

profile creation wireframe

brand exploration

Moodboards for Tangible, Unexpected, and Contemporary

It became clear to me that in order for the whole experience to feel right, I would need to come up with a brand strategy. I chose the values of tangible, unexpected, and contemporary. I wanted people who used this to feel like they were experiencing something new and adventurous, yet relevant and familiar to them.

I drew inspiration from my initial secondary research, what I learned about public social spaces, market research, and user interviews. I also did a variety of color studies. It helped me come up with two visual directions, Hypersurface and Third Space.

I had my friends create profiles again to test the new profile creation.

direction 1: hypersurface

Hyperspace user profiles

Hypersurface is inspired by our dimensional world. It focuses on saturation of activity, content, and people. It makes their area feel like it’s bustling with activity. It's eccentric and busy. The user profiles are in your face and full of flavor and information. Profiles take place on “surfaces” (cards), that are full screen when scrolling.

It was a little too busy, and the cards came off as too conventional.

Direction 2: Third Space

I took "Space" quite literally

Third Space is obviously inspired by Oldenburg's third places. It emphasizes casual conversation as the main activity. It uses the principles defined for third places for features and the imagery and exploration of “space” for visual design. It is abstract and experimentative and embodies the qualities of light, floating, and novel. Each user’s profiles “floats” so there is a playful use of grids and motion.

I decided to go with this direction because this perfectly broke up heavy content. People actually wanted to explore and play around with the profiles. I changed the background to white to better showcase user profiles and personalities. I wanted the focus to be on the users, not the app.

08. What I learned

Heading

Want to learn more?

For additional flows, questions, visual development process, study plans, and additional insights, please email me at robincdesign@gmail.com.

Past UI iterations. I wanted to use this project to experiment with unconventional UI design.

06. visual design and brand development

Unexpected, contemporary, and tangible

Brand values

It’s a tangible experience grounded in the “real world”. The experience has elements of surprise because it helps people meet others they may not have considered talking to. The interface has to capture the feeling of these dynamic interactions.

Name

Third Space combines the principles of Oldenburg’s work on “Third Places” and the concept of “space” and what it means to occupy or be a part of a space. Third Space conveys the focus of the application on conversation and casual socialization. “Space” comes into play of the dynamic visual design and language.

06. Next steps: measuring success

Adoption and Happiness

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.