Sidewalk

Uncovering hidden gems in the urban outdoors

Project basics

Independent project

End-to-end

Tools

Figma, Figjam, OptimalSort, Inkscape

Sidewalk

Uncovering hidden gems in the urban outdoors

Project basics

Independent project

End-to-end

Tools

Figma, Figjam, OptimalSort, Inkscape

At a glance

The problem

For many neighborhood newcomers, exploring on foot helps build a sense of connection to place. But walking in a new area can be intimidating, and it takes effort get a lay of the land and find the best routes.

The solution

I designed a mobile app that reveals delightful neighborhood landmarks and walking routes, rewarding exploration and helping users connect with their community.

At a glance

The problem

The solution

I designed a mobile app that reveals unique neighborhood landmarks and walking routes, rewarding exploration and helping users connect with their community.

Phase 1

Discovering the problem

Phase 1

Discovering the problem

We know moving is challenging - but when we're done, what comes next?

For this project, I wanted to explore the period of time after moving to a new neighborhood, with the goal of identifying a need that people experience in this unique period of time. I was curious about how we settle into new routines, how we engage with our new neighborhood, our hopes and our fears.

Scouting the product landscape

I started by researching existing products that users might turn to after moving to a new neighborhood. I wondered:

What tools exist for this population?
What are gaps in the market?
In what ways are the available products similar or different from one another?

Each product offers different ways for users to engage with local social circles and businesses. None are specifically tailored to neighborhood newcomers.

Seeking real experiences

I interviewed 5 people who had moved recently, in order to uncover the challenges they faced up to 6 months post-move. I wanted to know:

What challenges do people face after a move, and what is the impact?
Where do people turn for help, and in what ways are these solutions effective (or not)?

My interviewees were in their 20s or 30s, living in major metropolitan areas of the US. They had all moved to a new neighborhood in the last 3 years.

I organized my interview data into an affinity map to pull out patterns.

Two key themes emerged:

1) Social connections: People highlighted the rewards of moving to a new place, like making friends and feeling part of a community, but they also mentioned challenges like shyness and feeling like an outsider.

2) Exploring on foot: People emphasized the benefits of walking in a new neighborhood, including fun, exercise, finding interesting sights, gaining confidence by building a mental map of the area, and deepening emotional connections to place.

Personifying user needs

I distilled the most prominent goals, needs, and pain points expressed in my user interviews into two personas, designed to guide decision-making in development of the product.

“Andrew” hopes to get to know his neighborhood by exploring on foot.

“Kelly” seeks social connections.

Choosing a product direction

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.

Idea 1: "Block Party" is an app for people looking to connect with neighbors in a new area. It shows what types of connections neighbors are open to, making outreach easier and less uncertain. (Persona: Kelly)

Idea 2: "Neighborhood Adventure" is an app that lets you fill in a personalized map by visiting places in your neighborhood. It’s a fun way to explore, track favorite spots, and build a deeper connection to your area, perfect for those who love walking. (Persona: Andrew)

I drew a storyboard to imagine "Neighborhood Adventure" in action.

I chose to move forward with Neighborhood Adventure because there was less market competition and strong user interest— all 5 interview participants mentioned enjoying exploring on foot.

Quote from user interviews

"Walking gives you a sense of humanity and appreciation for your neighborhood that driving doesn't."

Quote from user interviews

"Walking gives you a sense of humanity and appreciation for your neighborhood that driving doesn't."

Phase 2

Developing a solution

Phase 2

Developing a solution

Before continuing, I paused to brainstorm the business and user goals I would be considering.

Defining the feature set

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?

I landed on a list of key features:

1) Landmarks: Interesting, non-commercial, hyper-local destinations. Examples could include little free libraries and public art pieces.

2) Routes: A sequence of landmarks creating a walking path.

3) User account: Enables users to save favorite landmarks and routes.

4) Social features: For an MVP release, social features could include user profiles and ratings, with more to come post-MVP.

How will users create a new walking route?

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 offers a design challenge, involving multiple features (landmarks, routes, map) and points of user input.

I began the design process by sketching to generate a range of ideas.

I explored multiple ideas in each sketch to narrow them down to the best ones.

Next, I selected the strongest elements of my sketches, prioritizing key actions and ease of use. I developed a set of responsive mid-fidelity wireframes, focusing on the key screens for the “Add Route” flow.

The first step of route creation, in which a user adds landmarks to the route.

The third step of route creation, in which a user adds additional information to a route.

A completed route.

Building a brand identity

Identifying five key brand values, and creating a moodboard, gave me a solid foundation to build out the brand identity.

Friendly, rounded UI elements in green and yellow suggest a welcoming urban outdoors. The brand name, Sidewalk, references both a pedestrian path and an intriguing detour “off to the side.”

Brand values

Curiosity. Community. Discovery. Outdoors. Local.

Brand values

Curiosity. Community. Discovery. Outdoors. Local.

High-fidelity wireframes

I streamlined the designs and incorporated the new branding and UI. Because Sidewalk was intended to be used while out walking, I felt that only a mobile design would be needed for MVP.

Key design decisions

Phase 4

Validating the solution

Phase 4

Validating the solution

I set out to assess the "Add route" flow with users, looking for stumbling blocks as well as points of success. I designed a usability test and ran it with 5 people using a Figma prototype (some remote and some in-person).

I assessed the success of the design through four main metrics:

Errors: Users made some errors, though they mostly experienced comprehension issues.
Error correction: Participants did not make errors that they could not recover from (e.g. lost progress)
Subjective experience: Users reported an overall positive experience, but felt confused at some points.
Appeal: 5/5 participants could envision using the product.

Usability test findings

Users were enthusiastic about the product, but found some interactions confusing.

Usability test findings

Users were enthusiastic about the product, but found some interactions confusing.

Addressing usability issues

When considering what changes to make at this stage (MVP release) I considered multiple factors:

How many participants encountered this issue?
How severe is this issue?
How complex would it be to resolve this issue?

Guided by these questions, I designed solutions.

"How do I return to the starting screen after I finish creating a route?"

Before

After

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.

"How do I return to the starting screen after I finish creating a route?"

Before

After

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."

Before

After

In search and landmark preview overlay, tags now display with text rather than just emojis.

"I can’t tell what the tag emojis mean."

Before

After

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."

Before

After

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.

"I don’t know how many elevation and terrain options I can select."

Before

After

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."

Before

After

Tags are now displayed for horizontal list items. Route previews now display as photos instead of pins to provide more information.

"It would be nice to see tags in horizontal lists."

Before

After

Tags are now displayed for horizontal list items. Route previews now display as photos instead of pins to provide more information.

"The route pins don’t give me enough information."

Before

After

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).

"The route pins don’t give me enough information."

Before

After

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?"

Before

After

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.

"How do I view routes on the home map?"

Before

After

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.

Updated wireframes and prototype

I incorporated the changes based on the usability test results. You can take a look below.

Potential next steps

Sidewalk was conceived as an independent case study. If it were developed for release, my next steps would involve:

1. Completing the design process for all MVP features: 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.

2. Design handoff: I would work closely with a developer, making sure that they have all of the information they would need.

Takeaways

What I learned

Takeaways

What I learned

Sidewalk was my first end-to-end product design, so I learned a lot. Some lessons:

The designer's mental model might be different from the user's. 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.

Visual design choices that look good on paper may not work in practice. 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 initial concept can evolve. 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.

Back to the top!