Urban Forest

OVERVIEW

Urban Forest is an all-in-one research tool that helps people discover their ideal neighborhood through a variety of data and connecting them to neighborhood locals.

PROJECT TYPE

Responsive Web Design (Student Project)

MY ROLE

UX Designer, UI Designer, Brand Developer

TIMELINE

2 Weeks

THE PROBLEM

People are looking for a reliable research tool to gain more insight on an area before moving to a new place. Currently, there are various resources available to potential users but a user would need to access a combination of these resources.

THE COMPETITORS

There is currently a wide range of resources made available to the public and three resourceful websites were identified as potential competitors in the market.

Trulia

A real estate website with an option to research neighborhood information, which includes a local review feature.

Niche

An all-in-one neighborhood research tool for prospective students and utilizes a ranking/grading system to give users the best neighborhood.

Neighborhood Scout

A very data-oriented research tool, which allows users to discover neighborhoods that match an existing one.

  • Include a neighborhood local review feature.

  • Provide a neighborhood map.

  • Determine essential neighborhood information to include.

  • Personalize research results for a user.

KEY OPPORTUNITIES

USER RESEARCH

The Interviewees were made up of 7 participants (4 males and 3 females) ranging from their Mid-20’s to Early-30’s. All participants are either single, dating, or married and have relocated within the last 3 years.

The Nature of the Interview included a remote meeting using Discord and FaceBook Messenger for 30 minutes between the hours of 5 P.M. to 8 P.M.

KEY FINDINGS

  • Users want honest and trusted reviews of an area.

  • Neighborhoods and homes are reviewed simultaneously.

  • Users are split between a priority ranking or checklist evaluation method.

  • Relocation typically occurs during a major life change.

MEET THE USER PERSONAS

From the user interviews, two personas were created as a basis for any design decisions moving forward. Samuel is an introvert gamer who highly values a convenient location close to the essentials, while Sarah is an extrovert who is looking to move into a larger space for her growing family.

THE PRODUCT REQUIREMENTS

After synthesizing the research conducted in this project, I was able to discover that people will decide whether a neighborhood is a good fit for them depending on the reviews of locals in the area. This preference for local reviews will either validate a person’s research or cover their entire research.

THE MAIN QUESTION

How might we connect users to neighborhood locals?

THE INITIAL SOLUTION

Use a questionnaire to match users to neighborhood locals and allow for messaging between matches.

SAFETY CONCERNS WITH THE INITIAL SOLUTION

In discussions with fellow UX designers, the local match and messaging feature was seen as a potential concern as there was no safety measure to prevent users from constantly messaging these neighborhood locals.

ELIMINATING THE CONCERN

The issue was then solved by replacing the local match and messaging feature with a Q&A forum to restrict users from freely messaging neighborhood locals.

INFORMATION ARCHITECTURE

Due to the complexity of combining a wealth of neighborhood data, personalizing results, and incorporating a Q&A forum, a sitemap was created as a guide for user flows and wireframes. 

The homepage was split into three neighborhood sections: favorites, highest matched, and recommended. It is proposed that users are able to view their highest matched neighborhoods in the country based on their lifestyle quiz results, and view recommended neighborhoods within a user’s desired city.

Within a selected neighborhood, the information is divided into three categories: overview, buzz, and data. The buzz category was created to allow users to view different perspectives on a neighborhood through reviews and features the Q&A forum. The data category was created based on user values that were determined in the interview phase.

KEY FEATURE TASK FLOW

Prior to creating visualizations of the Q&A forum, the key task flow was outlined to map the route of users accessing local expert answers to their specific neighborhood questions. After users submit a question, the “View Your Questions” button will appear allowing users to access these local expert answers.

LET’S VISUALIZE THE SOLUTION

In initial visualizations of the solution, key wireframes such as the lifestyle quiz, the neighborhood overview, data, and buzz were created. 

Lifestyle Quiz: This quiz is intended to streamline the user’s neighborhood search by matching their answers to neighborhood traits. Once the quiz is complete, users are able to see how well neighborhoods match to their lifestyle.

Neighborhood Overview: This is the first screen users see once they select a neighborhood. In addition to the map and photos of the neighborhood, a match analysis is provided with a brief overview of the neighborhood.

Neighborhood Data: This screen provides users with a wealth of neighborhood data from crime maps to nearby schools.

Neighborhood Buzz: This screen gives users the option to read local reviews, view local experts, or ask a local expert anything they’d like.

WIREFRAMES

VISUAL DESIGN

Urban Forest intends to give users a sense of trustworthiness, calmness, and inviting feeling as moving to a new place can be a very stressful situation! The light color palette chosen was for the purpose of a light-hearted atmosphere when navigating through this app. The logo was iterated three times and the final logo was chosen to represent the brand as it gave a sense of community along with an almost human aspect with the rounded houses.

HIGH FIDELITY SCREENS

By combining the wireframes with the visual design, high fidelity screens were created to give users a real sense of the app. From the wireframes to the high fidelity screens, the Neighborhood Buzz design updates include:

  • Replacing the Local Experts container with Commonly Asked Questions to provide more value to the user.

  • Moving the Q&A forum into a container instead of a separate screen for higher usability.

  • Splitting the Questions and Local Expert Answers into separate screens for better information architecture.

USABILITY TEST RESULTS

A set of usability tests were conducted on the same five users from the interview phase of this project. Several key task flows were tested, which yielded the following results:

SUCCESSES

  1. Users enjoyed simplistic designs and found it easy to navigate.

  2. The map feature was highly valued and connected with multiple users.

  3. The expected audience includes people moving to a new place without any prior knowledge or families looking to move without their current city

REQUIRES REVISION

  1. The orange notification icon was originally intended to represent new answers to user questions, but users assumed the icon notified them when their question has been answered.

  2. There was general confusion around local expert profile icons shown under the “Local Expert Answers” section and produced unexpected results upon clicking on the icons.

  3. There was limited to no interaction with the hamburger menu icon.

  4. Users generally expected a category for commonly asked questions in the “Neighborhood Buzz” section before asking their own questions.

  5. A comment was made that users who may not be familiar with the app’s signature feature (i.e., connecting with neighborhood locals) upon first glance of a specific neighborhood.

DESIGN ITERATIONS

  1. The orange notification icon’s purpose was altered to indicate when user questions have been answered along with the number of answers. The orange icon was removed from local expert answers and replaced with timestamps.

  2. The “Local Expert Answers” section was replaced with “Your Questions”.

  3. The hamburger menu icon was replaced with a notifications icon.

  4. A category for “Commonly Asked Questions” was added under the “Neighborhood Buzz” section.

  5. A button was added to the “Neighborhood Overview” section to direct users to ask a neighborhood local a question.

  6. Removing the word, Neighborhood, from “Neighborhood Data” and “Neighborhood Buzz” for higher usability.

  7. The color palette and UI design was updated to a more current look as the previous color palette and UI design were dated.

BEFORE

AFTER

THE FINAL DESIGN

Urban Forest is a complete research app that connects users to neighborhood locals while providing a variety of data. Through a Q&A forum, users are given trusted reviews from multiple neighborhood residents and can confidently choose a neighborhood that fits their lifestyle.

THE SCREENS

  • Recommended Neighborhoods

  • North Beach Neighborhood View

  • Questions & Local Expert Answers

  • Screens (Left to Right): Lifestyle Quiz, Dashboard, Neighborhood Buzz

THE PROTOTYPE

REFLECTION/NEXT STEPS

This was my first full design project and I had the opportunity to learn that our initial solution to design problems won’t always be the best solution. By getting input from other designers, a major safety issue was rooted out before wireframes.

Urban Forest assists users in search of a new home by giving trusted reviews on certain neighborhoods, but there must be considerations of how to attract neighborhood locals to join the app. Once this has been determined, nice-to-haves such as incorporating a tourism aspect to the app can be considered.