A mobile-first website connecting people who’ve recently moved to their new community.
role
deliverables
timeline
User Persona
Task Flows
Wireframes
Branding
Hi-fidelity Prototype
UX/UI Design
Visual Design
UX Research
Usability Testing
7 weeks
problem
People who move to a new place find it difficult to get to know their new neighborhood and city. It’s a challenge for people to find local events, activities, services, and meet new people in their new community.
goal
Create a website that acts as a guide to help users learn about their new community and make the after-move transition easier.
understanding the user’s motivations through
research
user interviews
who was interviewed?
Six young professionals, between the ages of 26-40
Research participants had moved both in and out of state
All participants had moved within the last two years
users’ top priorities after moving
Settling in the home
Finding restaurants
Exploring the area
users’ top challenges after moving
Navigating the area
Meeting new people
Finding activities and events
Finding reputable services
Getting timely tasks done (i.e., updating address, car registration, etc.)
users’ top ways to find information about their new community:
Google and Google Maps
Social Media
Asking Friends and Family
users’ pain points:
Too much information to filter though on both Google and Social Media
Can’t always trust recommendations online
Can’t ask friends or family if you’re in an area where you don’t know anybody
identifying potential
problems to solve
Meeting new people and finding events
1.
Finding reputable services
2.
Getting timely tasks done after the move
3.
choosing a focused
problem to solve
meeting new people and finding events
I chose this problem because it was the most common challenge amongst the research participants. Plus, there isn’t already an all-in-one platform that focuses on all the different needs of finding events, activities, businesses, groups, and connections in a targeted area.
user persona
Based on the research findings, I created a persona with the user’s needs/goals, motivations, and pain points in mind.
how might we?
Using insights from the user persona, I created a How Might We statement in order to start ideating solutions
how might we help people who’ve recently moved to a new city find local events and activities in their area and meet new people?
ideating solutions
developing task flows
Based on the information from the user persona, I created four different task flows for the user:
Finding an event to attend
Finding a group to join
Finding an activity to do
Meeting new people
Because of time constraints, for this project I was only able to focus on one task flow to create screens for: finding an event to attend.
mid-fidelity wireframes
Based on the user research, most people had issues with the overwhelming amount of information online while researching their city, and the amount of time it took to filter through. How could the process of finding events, things to do, groups, and people in a targeted area be streamlined?
With efficiency for the user in mind, I came up these solutions:
let users tell us their interests
Users will need to sign up to access the website content. During the sign up and onboarding process, users will fill out a survey with their interests.
Once onboarding is complete, users will land on their “My Feed” page. The My Feed page will populate with suggested events, things to do, groups, and people based on the interests they submitted during the onboarding process.
immediately give users relevant content
It was important to include a top navigation bar with different categories of content on the My Feed page for users to quickly access what they’re interested in seeing.
The different categories of content are organized even more once the user clicks the “See All” button on the bottom of the page. Here, they’ll access more content that wasn’t featured on their My Feed.
organize content for the user
allow users to filter and save content
Once on the All Events page, uses can easily filter to find exactly what they’re looking for either using the “Filter” button or clicking the different categories on the top navigation bar.
The heart icon, or “Favorites” action gives the user the ability to save and easily access content later.
provide users detailed information
An Event Details page was important to the flow because it allows the user to get a good overview of what to expect at the event. On this page, users are also able see other people attending the event, giving them the chance to message users on the site and meet people before actually attending the event.
give users clear directions
If a user doesn’t know what happens after they perform an action, then the action isn’t helpful. Having a pop-up notification after a user presses the “Attend Event” button lets the user know they’ll now get notified about event updates via email and they can access the event via their “My Events” page.
high-fidelity prototype
After finalizing the mid-fidelity wireframes, I created the initial high-fidelity prototype for testing. Due to time constraints, I didn’t create high-fidelity screens for the onboarding process. Instead, I started the task flow of finding an event to attend with the My Feed page.
usability testing
testing the initial prototype
I conducted a usability test with five users to test two task flows:
Task flow #2: Find the music festival event to refer to later.
Task flow #1: Find the music festival event to attend.
usability test results
Task #1:
100% completion rate
Task #2:
80% completion rate
What worked:
100% of users thought completing the tasks was an easy, simple and quick process
100% of users thought the overall experience was very intuitive
60% of uses didn’t see the toaster notification after pressing the “Attend Event” button
What didn’t work:
If a user didn’t see this notification, they wouldn’t know how to easily find the event for later.
60% of users thought the My Feed page and Events page were the same
Many users became confused when they pressed the button to go to the “All Events” page and thought they remained on My Feed.
80% of users didn’t see the filter option on the “Events” page
Users couldn’t find the event faster because they didn’t see this button.
40% of users didn’t know the difference between the Attend button and Favorite icon
Users became confused on which action to take when they wanted to save the event for later.
iterations
updated the my feed page to differentiate it from the all events page
I added subtle changes to the My Feed page, like the search bar, welcome header, descriptor under the. My Feed text, to differentiate it from the Events page. This ensures users don’t get confused while navigating different pages of the website.
made the filter button more prominent
I changed the filter button on the All Events page from light blue to the primary orange - allowing users to easily and quickly find exactly what they’re looking for.
made the toaster notification more prominent
Before, when users clicked the Attend button, a toaster notification would appear at the bottom of the screen - where they would read that event would be saved saved to their “My Events” page. Many people missed this notification, so I made the pop-up more noticeable by having the notification appear in the middle of the screen. Now the user will know how to find the event for easy access later.
added pop-up for favorite action
Users were confused about the Favorites action, so I added a pop-up that appears after pressing the heart icon/Favorite action that explains to the user where they can find content they’ve favorited.
final prototype
creating the visual design
making design decisions based on brand values
When choosing the colors, fonts, and logos for this branding, I kept these values at the forefront of my mind:
Community
Enjoy
Welcoming
Connection
Friendship
Reliable
Fun
Exploration
what i learned
focus on one problem at a time
After conducting my user research to discover users’ main challenges after moving, I became overwhelmed. I wanted to solve every problem the user had in one single product. I learned it’s important to focus on one problem to create the best experience for your user.
get feedback constantly
In the beginning of the project I based a lot of decisions on what I wanted. But I learned it’s crucial to get feedback from all types of people - most importantly - your user. Based on feedback, you’ll be able to iterate and improve your product.
next steps
create high-fidelity screens for more task flows
To get a more robust view of how the overall website would work, I’d like to create high-fidelity screens if a user wanted to complete the following tasks:
Onboarding/creating a profile
Finding a “Thing to Do”
Finding a “Group”
Finding a “Connection”
Creating an Event or Group
After the new set of task flows are created, I’ll have to conduct a second round of usability tests to get feedback and make iterations.
second round of usability testing
think of other user perspectives
Businesses would definitely use this site to post events or advertise their services. I’d like to brainstorm how a task flow would work from a business perspective - such as on-boarding or posting an event.