DURATION
4 Months
PROJECT TYPE
Conceptual project focused on a mobile-first approach.
ROLE
User Research
UX/UI
Prototyping + Testing
UX/UI
Prototyping + Testing
TOOLS
Figma / FigJam
Miro
Optimal Workshop
Maze
Miro
Optimal Workshop
Maze
GO ON, KEEP IT MOVIN'.
Knomad helps users find and learn about neighborhoods within the United States.
Moving to a new place is stressful, and finding a specific, suitable neighborhood or area can also be frustrating.
THE PROBLEM
Finding a suitable neighborhood to relocate to can be a challenging task for both new and experienced movers alike.
➜ Difficulties in sifting through and learning about all available neighborhood options.
➜ Stressful to know that there are likely some things that are out of one's control.
➜ Feelings of loneliness in a community where one feels like they don't belong.
GOAL & HYPOTHESIS
Simplify the search
I hypothesized that creating a platform that streamlines the task of searching for a new place to live will help users who struggle with exploring their options decide where they’d like to settle.
SOLUTION
How might we expose users to suitable areas that support integration and a sense of well-being?
Create an interactive map with filter options and input fields in the area's description/about page to enable users to visually explore and learn about their options. This tool provides a visual aid to familiarize users with areas of interest and enhance the overall user experience.
➜ Increased visibility of neighborhoods via interactive map with markers and boundaries.
➜ Tailored recommendation of places based on questionnaire answers.
➜ Allow for bookmarking/saving of places for ease of revisitation.
➜ Up-to-date, conslidated data on a single page, providing thorough information about neighborhood history, reviews, statistics, attractions, etc.
DISCOVER & EMPATHIZE
Get familiar with the market and its users
Identify the problem and the target user audience by conducting Competitive Analysis and User Interviews.
VIEW RESEARCH PLANFind inspiration and identify design patterns
I conducted a comparative analysis of 5 websites to identify strengths, weaknesses, and unique features. The exercise helps inform problem-solving methods in the future.
Exercise building empathy
8 user interviews were conducted to validate my hypothesis and to gain a deeper understanding of user goals, wants, motivations, and pain points.
➜ User goals are to in an affordable place that is safe, welcoming, and close in proximity to favorite/important places.
➜ Pain points are uncertainty of the unknown, noise, high rates, and unsuitable communities.
Living in a suitable area/neighborhood impacts people’s behaviors and sense of well-being.
Listings that lack transparency are quickly dismissed.
Listings that lack transparency are quickly dismissed.
AFFINITY MAPPING
Synthesize data & draw insights
I analyzed the interview data by organizing the responses into groups that uncovered the user's objectives, desires, and challenges. This helped me grasp the user experience and identify any areas where my assumptions needed validation or correction.
VIEW AFFINITY MAP
In the end, people just want to feel comfortable, safe and happy with where they live.
DEFINE
CHALLENGING THE ASSUMPTION
Finding a suitable neighborhood to relocate to can be a challenging task for both new and experienced movers alike.
A pivot happens here with the initial problem statement. Issues before a move also involve deciding what part of town to relocate to. It’s not solely about finding an actual building of residence.
Focus on the target user.
Ensure that the product meets their specific needs and minimizes their struggles.
How might we expose users to suitable areas that support integration and a sense of well-being?
The interactive map serves as a visual cue alongside written text to help users orient themselves and have control over what they want to explore.
FULL FEATURE LIST
MOVING INTO I.A.
Card Sort to understand expectations
A hybrid card sort was used to determine what information users search for and where they expect to find it. The primary findings indicated that it's necessary to:
➜ Modify the terminology
➜ Group relevant topics together
➜ Group relevant topics together
The split screen and interactive map is useful in decreasing the amount of interactions needed to get to where the user wants to go.
Create the site structure & hierarchy
To handle the large amount of information about many neighborhoods, the product includes multiple links and buttons that lead to the same destination. This reduces the number of steps needed to access information and avoids confusing the user.
VIEW SITEMAP
Identify gaps in user flows
I used the sitemap as a guide to create task flows that reflect assumptions of user behavior. The sitemap serves as a blueprint for organizing the website's content and structure.
➜ Create an account
➜ Take the Questionnaire for recommendations
➜ Visiting the interactive map and bookmark a neighborhood of interest.
VIEW USER & TASK FLOWS➜ Take the Questionnaire for recommendations
➜ Visiting the interactive map and bookmark a neighborhood of interest.
DEVELOP
LO-FI WIREFRAMES
Brainstorm layout & organization
I prioritized information/commands that are essential to get the user to their destination.
VIEW LO-FI SKETCHES
I kept accessibility and usability at the forefront, and continued adjusting elements and content throughout the prototyping process.
MID-FI WIREFRAMES
Iterate and polish
I used Figma to create detailed screens by adding placeholder images, text, and shading to the wireframes. During this process, I adjusted the sitemap and user/task flows to match the new designs.
VIEW MID-FI SCREENS
STYLE TILE, BRANDING, TYPOGRAPHY
Build the identity
The color palette, logo design, element styles and typography were carefully selected. The intention is to encourage learning and to foster a sense of trust between the product and end user.
ROLL OUT FOR TESTING
HI-FI & WIREFLOWS
Test to validate
To measure the merit of my design decisions, I conducted a usability test with 14 users and gained insight about their thought and feelings.
The goals were to understand:
➜ User expectations
➜ What areas cause friction
➜ How users navigate around using the search and filter options
TRY PROTOTYPEVIEW REPORT➜ What areas cause friction
➜ How users navigate around using the search and filter options
TAKEAWAYS FROM TEST RESULTS
Iterate, iterate, iterate
The feedback received can be grouped into 5 umbrella themes that cover:
➜ UI Elements/Icons/Transitions
➜ Questionnaire Layout
➜ Content within neighborhood cards
➜ Organization of The Map
➜ Location of Bookmarks
MAPPING➜ Questionnaire Layout
➜ Content within neighborhood cards
➜ Organization of The Map
➜ Location of Bookmarks
➜ UI ELEMENTS / ICONS / TRANSITIONS
Improve wayfinding by duplicating the "sign up" link at the bottom and replacing the social icons with just a Google sign-in.
➜ QUESTIONNAIRE LAYOUT
To provide users with personalized recommendations, a form field is added for users to input their preferred cities. However, users have the option to skip this step as indicated by a link at the bottom.
➜ CARD CONTENT
By including more information, such as reviews and population count, on the neighborhood cards, the "Quick Look" feature is improved. This provides users with more initial context when searching for neighborhoods.
➜ MAP ORGANIZATION
By adding neighborhood borders, increasing the size of location markers, and using color to differentiate areas, the map interface is improved, making it easier for users to understand.
Users can either click or tap the markers on the map, which will take them to the neighborhood page. Once there, they have the option to choose between viewing the description on the marker or the neighborhood card.
Users can either click or tap the markers on the map, which will take them to the neighborhood page. Once there, they have the option to choose between viewing the description on the marker or the neighborhood card.
➜ BOOKMARK LOCATIONS
Users often expect to find their saved bookmarks in the navigation menu, so placing them under the "My Account" page is in line with their expectations.
CONTINUED ITERATIONS
Final deliverables
I began the prototyping process with rough sketches, which then transitioned into more detailed mid-fi and high-fi wireframes. Final wireframes were used for usability testing, and feedback received helped shape the final designs.
VIEW ALL SCREENSTRY PROTOTYPE
TAKEAWAYS
Bring it home
I enjoyed interacting with participants during interviews and tests the most. It was fascinating to see how their feedback could challenge assumptions and I valued the insights gained from analyzing their responses to guide the design process forward.
Not everything can be tackled at once
In UX/UI design, it's important to prioritize and be flexible with the design process to adapt to project constraints and scheduling issues.
Innovation ≠ Invention (sometimes)
In UX/UI design, it's important to consider existing conventional design patterns. Requiring users to learn entirely new patterns can sometimes create unnecessary cognitive load.
IN RETROSPECT... & MOVING FORWARD
To improve Knomad's user experience, we could conduct more research to uncover specific user needs when it comes to finding a new home. If we find any new needs, we could implement them as new features in Knomad to make it a more comprehensive tool.