For this project, I wanted to explore the period of time after moving to a new neighborhood. I was curious about:
My goal was to identify a need that people experience in this unique period of time.
Sole designer, independent project
Figma, Figjam, Inkscape
I started by researching existing products that users might turn to after moving to a new neighborhood. I wanted to know:
I explored four products, each offering different ways for users to engage with local events, social circles, and businesses. I noted that none were specifically tailored to neighborhood newcomers.
I held open-ended user interviews to learn from people who had moved recently. My goal was to uncover the challenges they faced up to 6 months post-move.
I interviewed 5 people who had moved to a new neighborhood in the last 3 years. They were all in their 20s or 30s, living in major metropolitan areas of the US.
After finishing the interviews, I organized them into an affinity map.
Two key themes emerged from the affinity map.
People named rewarding social aspects of moving to a new place, such as making new friends and feeling like part of a community. They also brought up challenges like shyness and feeling like an outsider.
People emphasized the many benefits of exploring a new place on foot, including fun, exercise, finding interesting sights, gaining confidence by building a mental map of the area, and deepening emotional connections to place.
I adapted each key theme from my interviews into a persona: “Andrew” hopes to get to know his neighborhood by exploring on foot, while “Kelly” seeks social connections. Additional details from my interviews add depth to each persona.
These personas serve to:
I brainstormed over 40 ideas to address the needs of my personas. Then I narrowed the list down to the two that most directly addressed personas’ needs, and would be feasible to build.
A way for neighbors to indicate their level of interest in meeting others.
Someone who’s new to their neighborhood and wants to connect socially with close neighbors—in a way that will be welcomed. (Persona: Kelly)
It shows users what kinds of connections their neighbors are (or aren’t) looking for, so they won’t have to worry about how their outreach will be received.
A game where you fill in a personalized map by visiting different places in your neighborhood.
Someone who just moved to new neighborhood, wants to deepen their emotional connections to their new area, and enjoys exploring on foot. (Persona: Andrew)
Offers a fun, structured way to explore one’s area and track favorite discoveries, and incentivizes exploring by revealing the map as you explore.
I opted to move forward with Idea 2: “Neighborhood Adventure.” Why?
Before continuing, I paused to brainstorm the business and user goals I would be considering.
I knew that I wanted to design a product that would help users explore on foot and deepen their connection with their neighborhood.
I developed a list of potential features, then organized them by priority. What would meet the needs of my personas while being achievable in an MVP release?
Now, I’d narrowed down to a few key features to pursue.
I didn’t want to rely on assumptions about how users would navigate the product, so I conducted a card sort study.
I had 5 participants complete the 36-topic exercise using Optimal Sort. The results pointed to three main categories of content: landmarks, routes and account.
All 4 included:
All 4 included:
All 3 included:
I started by exploring flows for different tasks within the product.
For this project, I would be moving forward with the design process for a single user flow. I selected the flow for creating a new walking route made up of pre-existing landmarks.
The “add route” flow is:
I began the design process by sketching to generate a range of ideas. I focused on the mobile site first, because users would interact with the product while out exploring the world.
My next step was to choose which aspects of my sketches to move forward with. I considered the sketches through the lens of business and user goals, aiming to prioritize key actions and ease of use.
Then, I developed a set of mid-fidelity wireframes, focusing on the key screens for the “Add Route” flow.
I then adapted the mobile designs for a desktop browser.
Identifying five key brand values gave me a solid foundation to build out the brand identity.
Guided by these values along with a moodboard I had created, I developed a style tile incorporating an original logo, typography, a color palette, and important UI components.
I chose friendly, rounded UI elements and green and yellow color palette to suggest a welcoming urban outdoors. The brand name, Sidewalk, references both a pedestrian path and an intriguing detour “off to the side.”
Working from my mid-fidelity mobile wireframes, I streamlined the designs and incorporated the new branding and UI.
It was time for users to try out the initial design. I created a research plan to assess users’ experience navigating the “Add Route” flow.
My goal was to understand the user’s subjective experience while creating a new route. I hoped to identify stumbling blocks, along with what worked well.
I ran 5 usability tests using a Figma prototype, some remote and some in-person.
I used affinity mapping to organize the usability test results by topic, then grouped the topics based on priority.
Assessing areas of success and those needing improvement also helped me prioritize the changes I planned to make.
Do users make errors?
Users made some errors, though they mostly experienced comprehension issues.
Can users easily recover from errors?
Participants did not make errors that they could not recover from (e.g. lost progress)
Do users report confusion or frustration with their experience?
Users reported overall positive experience, but felt confused at some points.
Can research participants envision using this product?
5/5 participants could envision using the product.
Now that I had set my priorities, I was ready to design solutions for each of the issues I had identified.
How do I return to the starting screen after I finish creating a route?
(5/5 participants)
Ver. 1
Ver. 2
In the top menu on the route listing page, the icon to return to the home map has been changed from a map icon to a house (home) icon.
I can’t tell what the tag emojis mean when they’re not associated with text.
(3/5 participants)
Ver. 1
Ver. 2
In search and landmark preview overlay, tags now display with text rather than just emojis.
I don’t know how many elevation and terrain options I can select.
(2/5 participants)
Ver. 1
Ver. 2
More context has been added for the route elevation and terrain options, and elevation is now formatted as tabs to indicate that you can only select one option.
It would be nice to see tags in horizontal lists.
(2/5 participants)
Ver. 1
Ver. 2
Tags are now displayed for horizontal list items. Route previews now display as photos instead of pins to provide more information.
(2/5 participants)
Ver. 1
Ver. 2
Landmark pins in a route now show tag emoji (like other pins). They now have a badge, and sequence is indicated with letters instead of numbers (so as not to suggest a count of multiple landmarks).
How do I view routes on the home map?
(2/5 participants)
Ver. 1
Ver. 2
On the home map, any landmark pin that serves as the start of a route/routes now has a badge. The map view can also be filtered to display landmarks or routes.
The updated version of Sidewalk incorporates the changes based on the usability test results. You can take a look below.
Sidewalk was conceived as an independent design case study. If it were developed for release, my next steps would involve:
In this project, I focused on the flow for adding a new route. I would need to design additional flows including account creation, login, and adding a new landmark.
I would work closely with a developer, making sure that they have all of the information they would need.
Sidewalk was my first end-to-end product design, so I learned a lot. Some lessons:
Users were confused by the map icon used to return to the home map screen—something I had taken for granted. If I hadn’t designed it, I might’ve been confused too.
I went through a few iterations of Sidewalk’s color scheme. I even created a component library using one palette, but once implemented, it no longer fit.
An early idea involved populating a map as the user explores, but I had to confront the fact that it would be complex to implement. Still, it was an important step in Sidewalk’s evolution.
