Citiescape: Urban Compare
.png)
OVERVIEW
BACKGROUND
Moving to a new area without thorough research can cause issues and frustrations that can affect you for years after. You might pick a specific location because it’s close to your work, but you don’t realize it’s far from the closest grocery store. What if there was a website built for urban areas that can help you pinpoint what exact region fits your customized needs?
PROJECT SCOPE
- End-to-End Mobile Platform
MY ROLE
- Research, Visual Design, Usability Testing
TIMELINE
- Ideation to Testing: 12 Weeks
PROBLEM
How do we help prospective movers to a new city or area who have difficulty narrowing down the region that would be central to their needs?
OBJECTIVE
Create a platform that builds a profile for the user based on their personal preferences, and give them personalized insight into areas they are interested in visiting or moving to, filling gaps in their own research process.
DISCOVER
COMPETITIVE ANALYSIS
I started with a competitive analysis to go into depth on the platforms already available to users and find out if there are any needs that aren’t being filled. Teleport is a website more geared towards digital nomads moving abroad, while Walkscore provides a transit analysis and index as well as apartment search tools in the US and three other major countries.
INTERVIEWS
I conducted a round of preliminary interviews to gain personal insights into different reasons why people move and how they make the decision to move to a specific area over another.
SAMPLE QUESTIONS
- What are the most important qualities in an area you are looking at moving to?
- What research did you conduct before moving? What frustrated you in the process? What would you have done differently in planning your move?
- What was the reason(s) for your last move?
COMMON THREADS
- Mostly remote/hybrid
- Living with significant other or roommate(s)
- Closed demographic constraint, women in their 20s
- Bachelor’s degree or some education
INTERVIEW QUOTES
DEFINE
INSIGHTS INTO WHY WE MOVE
Participants from interviews revealed their personal goals and reasons behind them moving. Based on this data, I can ascertain what is important to users during this process as well as find out why someone would choose one location over another.
USER PERSONAS
Sean is a social media marketer who’s moving for personal and professional growth. He’s not sure what part of LA he would like to move to and wants to find somewhere close to nightlife thats accessible without relying heavily on a car.
Linsey is looking to relocate for her job, and prefers a quieter neighborhood in Las Vegas farther away from the strip. She also enjoys the outdoors, and wants to find a suburb close to an organic supermarket and where she can easily commute to her work.
Angeline is a remote worker with more disposable income, focused on getting out of the bay area. She’s looking to feel safer, and wants to get out of the city. Angeline is looking to connect with her surroundings, but doesn’t have area in mind.
Click to enlarge
IDEATE
SITE MAPPING
Insights into what users value when moving were discovered during interviews, which lead to development of key features that were fleshed out later through different stages of fidelity. Competitive analysis helped unearth these features when researching the niche that other similar platforms were missing.
KEY FEATURES
- Interactive Map with with own set of filters and preferences.
- Data Summary Page for an area.
- Account Dashboard complete with account filters and preferences.
- Urban Match to match users with areas that fit their needs.
- Sign Up, Premium Account filters and options.
- Urban Compare, compare and contrast different areas.
KEY FEATURE: COMPARE URBAN AREAS
.png)
In iteration, to use familiar language throughout the platform, this feature was renamed to Compare Urban Profiles.
Compare Urban Areas would allow users to compare and contrast Urban Profiles on different areas based on their personal preferences and filters saved to their account as well as statistical data.
TASK FLOWS
.png)
PROTOTYPE
LOW FIDELITY TO MID FIDELITY
Click to enlarge
MF.png)
%20MF.png)
The main goal was to assist people who are moving to a new city but struggle to choose the right location. I divided this objective into smaller steps in the Define stage. While working in the Design level through different stages of fidelity, those steps lead to producing a user profile from their preferences, and the creation of urban profiles of areas based on users’ personalized information and statistical data. Then, users would be able to compare and contrast areas based on their own wants and needs.
IN-DEPTH COMPARISON
The user goal when accessing the Urban Profile screen would be to view a summary of the area.
Low-Fi includes a short synopsis for the area as well as category ratings. In Mid-Fi, those category ratings became specific to user insights that were uncovered during interviews. Local testimonials were added as a way for the user to connect with personal reviews.
Secondary pages were included, giving the user the option to compare the area to other Urban Profiles, view the Walkscore, and access an analysis of the living cost for the area.
UI ELEMENTS & BRANDING
.png)
The color palette for Citiescape was based off of colors found in a sunset in nature, including oranges and purples evoking boldness, confidence, creativity, and independence. The platform was going to be information-heavy while also not being novelistic, so a singular well designed font family, Roboto, that could be scaled in any direction seemed the best choice.
LOGO DESIGN
The logo concept for Citiescape came from imagery of a city skyline merged with bar graphs, exhibiting the idea of urban information and data.
Early concepts included iconography of maps, location save, buildings, and pie charts. I originally started with a wordmark, but decided on a logo that would be scalable and readable on smaller screens with or without the CITESCAPE tagline.
HIGH FIDELITY
Click to enlarge
KEY SCREEN DEVELOPMENT
TEST
USABILITY TESTING
Participants were asked to access a basic prototype of Citiescape and complete the user task flows finalized in the beginning of the Define stage. I received analysis on a few minor UI changes to help aid design hierarchy and user comprehension, as well as positive feedback on Citiescape as a whole.
INTERVIEW QUOTES
AREA VIEW TAB REVISION
One main issue I ran into was that participants were bypassing the Area View tab on the Search Map screen. To fix this, I moved the Urban Profile button inside the area view, and got rid of it on the main Search Map screen. That way, when asked, “How would you access more information about the area?” It makes sense that the user would open the Area Map Tab, and then to see the overall profile, would click on the Urban Profile CTA within the Area Map Tab.
CONCLUSION
.png)
Coming into this project, I had an idea of the problem I wanted to address with the platform, but did not have an exact plan or execution. The development of Citiescape was a great exercise for me in user analysis. Early research and thorough examination of user needs, behaviors, and attitudes surrounding the moving process led to valuable insights into what is the definitive issue that is affecting users in finding a new area to move to, and how we should be solving this problem.
MOVING FORWARD
I would spend more time in usability testing, before building out other key aspects of the platform like Urban Match, which would match users to urban profiles that fit their preferences, as well as work on a responsive desktop version of Citiescape.
As someone who has had their own frustrations in moving to a new area, this was a passion project for me and it was genuinely validating hearing some of the feedback from participants who saw the value and merit in what I’m trying to accomplish with Citiescape.
I’m working on instead of designing for myself, I want to empathize with the user as part of my design process. I think this will help me in my UX research, to deliver the best possible user experience.
