designlab ux academy
on your block
Timeline: 6 weeks
Project type: Mobile-first website
Role: End-to-end UX designer
Tools: Figma, Mural
On Your Block combats the issues of isolation and acclimation after moving to a new location by matching new residents with long-time locals.
context
I'd been speaking with a few different friends of mine that had recently moved to a new area, where they didn't know anybody. What I was hearing was that they were really struggling to feel settled and find friends. So I began to think about ways people can get to know their community: Yelp, Google searches, even Reddit and Facebook, but I felt that these were all lacking.
Combining all of these sites, someone may start to know their new area. My initial thought was to create a one-stop website that does all of these.
But as I moved through research, I found that people in this scenario are feeling isolated and depressed, even with these sites. They lack physical friends, knowledge of the area around them, and a sense of connection to their community.
After research, this idea pivoted into getting matched with a mentor who would help new residents get to know their new area; a more personalized approach.
problem:
As a young adult, it's difficult to feel settled in a new location because it's hard to make new friends and learn about the area.
Solution:
A community-centered website that addresses the isolation and the fear behind being alone and trying to make new friends as an adult.
Research
goal
I want to know how people adjust to unfamiliar locations so that I can understand what will make them feel more comfortable and knowledgeable about their new area.
Competitor analysis
Pros
Better sense of community
Shows local event
Cons
Too similar to facebook
Demographic is middle-age, middle-class
Cons
Not in use anymore; last post is from 2019
App no longer works
Interviews
4 people interviewed
Ages 18-26
All had recently moved to a new area
Tools GoogleMeet, Calendly, Otter.ai, Mural.co
affinity map highlights
key insights — what makes someone feel settled in their new area?
100% felt isolated and lonely, that making friends would make them feel more settled
100% mentioned wanting to put themselves out there more.
75% felt that knowing their physical area helps them feel more acclimated
"I've never felt more alone"
"it's really hard to meet people as an adult"
"I need to put myself out there more"
"just knowing what's out there helps"
Define
point of view & how might we statements
With the insights that knowing one’s area and making friends is how they become settled, I created two pairs of point of view & how might we statements that focused in on the problems I want to solve.
pov
I’d like to explore ways to help people who have moved to unfamiliar areas to create more meaningful connections because having close friends is one of the first steps to feeling settled in a new area.
I’d like to explore ways to help people who have moved or are going to move to unfamiliar areas to feel more knowledgeable about the location because understanding one’s surroundings and the area’s culture is a way people feel settled and fit in.
how might we…
help people in unfamiliar areas make close friends so they feel more settled?
help people feel more knowledgeable about their new area so that they feel more settled?
persona
From my user interviews and affinity mapping, a persona became clear. Meet Maggie O'Brien.
Formation of ideas
Up to this point, I thought I’d be making a sort of alternative to Yelp, with an increased focus on friend-making and community. After a brainstorming session with my persona in mind, my idea changed.
By using the formats of creative constraints and analogous inspiration, I came up with the idea of connecting the user with a longtime resident. Specifically, it came from the constraint of feeling like you're going to summer camp and having camp counselors!
To further develop this idea, I created a storyboard. Fun fact! At first, my persona’s name was Kayla.
site maps & flows
As I began to design how the site would work, I considered how users would get matched to their community mentor. Could they start a form and come back to it later? Do they need to complete a certain percentage of their profile before getting matched?
What helped me with these questions were a site map, user flows, and task flows.
design
low-fidelity wireframes
I completed my low-fidelity wireframes in my sketchbook, where it was easy for me to make quick annotations, side screens, and marks showing important call-to-actions.
mid-fidelity wireframes
While creating these, I felt the kindles of the site's personality start to ignite, through the copy and layout I created. The curved buttons marked a sense of friendliness that I knew I wanted the product to have.
branding
curiosity
about the world, meeting new people, and trying new things
belonging
having the sense of community; fitting in
warmth
showing compassion for one another
genuine
connections, and trust in one another.
The logo comes back to the idea of connection in a physical location with two location markers representing the mentor and mentee coming together.
Color palette
I tried many combinations for the color palette before settling on the ones pictured here. Although the colors are mainly cool, they are still friendly and inviting
typography
The typography was chosen for its simple, clean, friendly, and round design. It’s used throughout the whole design, with weights and letterspacing used to distinguish hierarchy
icons
The icons also feature rounded lines and thicker weights, notating a friendly appearance
high fidelity wireframes
Then, with the visual design decided, I created the site's UI component library. This consisted of primary and secondary buttons, top and bottom navigation, form elements including input boxes, and different cards. This was also where I began to create and define the project's styles as well, so I could quickly assign and change elements with ease.
Testing
methods
5 interviews were conducted
Types of testing
Users completed 2 tasks
Answered questions about the website's visual design
Tools
Figma prototype, GoogleMeet, Calendly, Otter.ai
key insights
100% satisfaction with visual design aspects
One user would rather have a text verification over email; it’s easier with iOS because of system affordances
A few users expressed confusion over location
This may have been due to the structure of the test, as location was one of the input boxes that autofilled during the log-in screen
"easy to navigate"
"aesthetically pleasing"
"feels familiar"
iterations
First Change
Added a question for their preferred mentor location to the matching form. That way, it allows users to pick what area they want to learn more about.
Second Change
Added an input box for a phone number & and changed the copy on the verification page so that the code is sent to the phone instead of the email. Verification text codes are easier to use than email codes, as the operating system recognizes codes and allows the user to autofill.
Conclusion
next steps
MENTOR CONNECTION
First, the opportunity to have multiple mentors who either have specific interests or locations. And with that, the ability to search for mentor profiles and reach out to ask for a connection.
TRAVEL MODE
I also am interested in a "travel" mode where travelers can connect with locals to learn more about an area they want to or are going to visit and gain recommendations or a guide for their time there.
MUSINGS
I'm happy and proud of what I designed. Everyone I tested showed interest in using the site, which I count as a great sign! I learned a lot about time management, especially around the interviewing process. Working on this project also showed me just how important the research and definition phases of the whole design process are. Through this, I learned how I really enjoy having research interviews with people and learning about their lives and the challenges they face.
