top of page
CONTEXT
Covid-19 changed our lifestyles by introducing Zoom fatigue, lack of exercise, travel limitations, and new social guidelines. Our team brings a solution that captures the essence of travel without having to leave your neighborhood.
MY ROLE
This was a graduate project that involved four students. I led the competitor analysis research, design, and the promotional video. Twice a week our team would meet to contribute to the following: research, ideation, design, and user testing.

The Stroll App

TEAM

Elisabeth Fonden, UX

Anders Herberg, UX

Beth Dunbar, UXR

Kallie Bracken, UXR

DURATION

10 weeks

TOOLS

Figma​

Sketch

DELIVERABLES
Design Research
High-Fidelity Prototype
User Testing
Promotional Video
PROCESS
Research
Competitor Analysis
Diary Study
Survey
Define
User Persona
Goals
Ideate
Design needs
Proposed features
Sketches
Userflows
Prototype
Mid-fidelity
High-fidelity
Interactive
Validate
User Testing
Team Input
Stakeholder Feedback
Confirm Style Guide
Refine
Data Analysis
Document Findings
Further research
Apply changes

The Problem

The COVID-19 pandemic has restricted mobility and travel; for many of us, it has limited our ability to explore new places.

Design Question

How can we utilize technology to promote neighborhood exploration and encourage physical activity while building a bridge for community connection during quarantine?

RESEARCH
We worked as a group to use a combination of methods: Diary Study, Survey, and Competitor Analysis.
DIARY STUDY

We invited 18 participants to walk around their neighborhood and share five pictures of interesting things they encountered and explain why each picture caught their eye.

​Findings
  • Selfies among younger users were incorporated into their exploration photos.
  • Scenic views and hidden gems were what a majority of participants took pictures of.
DIARY STUDY

We invited 18 participants to walk around their neighborhood and share five pictures of interesting things they encountered and explain why each picture caught their eye.

​Findings
  • Selfies among younger users were incorporated into their exploration photos.
  • Scenic views and hidden gems were what a majority of participants took pictures of.
SURVEY
All diary study participants completed a brief survey, gaging their interest in the task, their thoughts on outdoor support for physical and mental health, and how connected they feel to their community.
​Findings
  • 94% of participants reported importance in being connected to their community
  • 78% of participants felt getting outside was important to their mental and physical health during Covid-19.
  • 78% of participants explored their neighborhood at least weekly, either by walking or biking
COMPETITOR ANALYSIS
We gained insight into the exploration industry. We compared seven different competitors, and did deep dives on World Brush, Like a Local, and Google Maps.
​Findings
  • Community connection is lacking.
  • Main features include search, direction, and option to rate.
  • Limited feature sets are seen in apps such as World Brush, that have mystery elements.
  • User content creation is common in explore apps (e.g. adding professional businesses).
RESEARCH INSIGHT #1
People want to see the pretty and the weird.​
 
Quotes:
  • "This mural really inspires me."
  • "Another park you may miss unless on foot. The stairs activate my curiosity."
RESEARCH INSIGHT #2
There's a lack of community connection.​
​
Quotes:

  • "This mural really inspires me."​

  • "Another park you may miss unless on foot. The stairs activate my curiosity."

RESEARCH INSIGHT #3
Getting outside is vital to physical & mental health.
 
Quotes:
  • "Yes, it’s so important to stay connected for mental health."
  • "Yes, with travel restrictions, I want to see what my neighborhood has to offer."
DESIGN GOALS
After synthesizing our insights via data analysis and affinity mapping, my team set goals for our design solution.
ACTION
Our design is intended to get users outside experiencing physical places in their community.
WHIMSICAL
Our design should offer ways for users to experience their local community in a new and exciting way.
LOCAL
It is designed for and shaped by locals; to embody authentic values, interests and culture of the communities. 
CONNECT
Our design should foster a sense of community connection and enhance the user's sense of belonging.
EASY TO USE
The solution should be intuitive and easy to use for people from a broad variety of technical backgrounds.
CREATE
The solution should help users who are contributors connect with their joy of creating content -- taking pictures, sharing videos, etc. 
DEFINE
By designing an application that includes users who want to explore neighborhoods and/or create content, we wanted to cover multiple types of users with different behaviors and goals. Cory Creator wants to leave an impact, share his story, and bring awareness to the community. Wanda Wanderer is a neighborhood newbie and craves a sense of belonging within her community. Tina Traveler used to travel all the time, is now confined to quarantine, and wants to have fun and fulfill her 'travel itch.'
IDEATE
PROPOSED FEATURES​
My team met together for a brainstorming activity, and using the research, design goals, and personas we drafted, we chose six main features to focus on during our project.
 
Note: Early on we were fascinated by the idea of Augmented Reality (AR) and how it could add an element of outdoor exercise and gamification to our product. We were heavily inspired by Google Maps AR and World Brush.
STORYBOARDS AND USER FLOWS
After we solidified our feature ideas, we plotted out some storyboard scenarios and possible user flows. I did the explore ones. 
EARLY SKETCHES​
For our first attempt at design, we each drafted up our own ideas of the apps navigation and core features. After sharing our designs, we voted on the most desirable features and confirmed the expected features of the app. These are all my sketches (except the 2nd one)
MID-FIDELITY PROTOTYPE
Anders and I worked on the mid and high fidelity prototypes. Below is an example of our mid-fidelity prototype made by Anders. This flow focuses on our "Creator" pathway, in which a user is uploading their own content to a "Pin" or point of interest they interact with.
HIGH-FIDELITY PROTOTYPE & ITERATIONS
Here are a few examples of our iterative changes throughout the testing process. We tested our prototype on 5 people via Zoom, using a Figma prototype.
V1 Feedback:
Users loved the combination of an Augmented Reality (AR), real-time view. However, users thought the location marker looked like a video ‘play’ button, and once you click into a pin they were unsure what to do next. Also, they were unsure why the pin was called space needle when it wasn’t directly on it, and what they would actually see once they reach the pin.
V2 Changes:

  • Adjusted location marker.

  • Made CTA language more clear.

  • Added elements to display the pin is user-generated (name of spot, name of post author, etc.)

  • Added more visuals to give sneek-peak of location

HIGH-FIDELITY PROTOTYPE & ITERATIONS
Here are a few examples of our iterative changes throughout the testing process. We tested our prototype on 5 people via Zoom, using a Figma prototype.
01. ON-SCREEN, LIVE MAP
V1 Feedback:
Users loved the combination of an Augmented Reality (AR), real-time view. However, users thought the location marker looked like a video ‘play’ button, and once you click into a pin they were unsure what to do next. Also, they were unsure why the pin was called space needle when it wasn’t directly on it, and what they would actually see once they reach the pin.
V2 Changes:

  • Adjusted location marker.

  • Made CTA language more clear.

  • Added elements to display the pin is user-generated (name of spot, name of post author, etc.)

  • Added more visuals to give sneek-peak of location

02. PIN PROFILE PAGE
V1 Feedback:
Once you get close to the pin, users were confused and one commented that the UI for our arrival screen looked like an ad. Is it the pin spot or something else?
V2 Changes:

  • Adjusted location marker to reflect the pin itself (to maintain consistency)

  •  Adjusted layout of expanded pin to compliment the ‘Start Walking’ screen.

03. USER ON-BOARDING
V1 Feedback:
Users felt like they were unclear about the app's capabilities when they arrived to the home screen. So we needed to make our onboarding very clear so the user knows functions like navigating to "Pins" and how they can share their own content.
V2 Changes:

  • Included more action oriented language to describe the app’s core functions.

  • Switched from tapping ‘Next’ to navigate to the proceeding screen via a drag motion.

STYLE GUIDE
Anders and I experimented with a few different color pallets, and landed on a mix of purple and blue. We wanted the colors to pop and contain an energy related to being outdoors. We chose Montserrat as a header because it had a playful feel as a header, and chose Lato as the paragraph text to make it easier to read on small screens.
FINAL PRODUCT
Welcome Aboard
1
We created a seamless and quick on-boarding experience, where we highlight features and actions within the app.
EASY TO USE
ACTIONABLE
2
Explore Pins
Directly from the home screen, users can discover pins of nearby points of interest and route to a destination. Run into dinosaurs, scenic spots, restaurants, and more!
ACTION
WHIMSICAL
EASY TO USE
LOCAL
3
Interact with Content

Interact with other's experiences by commenting, sharing, or messaging them personally.

WHIMSICAL
LOCAL
EASY TO USE
CONNECT
4
Create and Share
When you're at a pin, share your experience by uploading a photo or review of the location to help others when planning their own new adventures.
CREATE
CONNECT
EASY TO USE
WHIMSICAL
FINAL PROTOTYPE
Anders and I led the prototyping for my team, however completing it was a team effort (via Figma). 
​
View Interactive Prototype
LIMITATIONS
Towards the beginning of the project, we had six features in mind. However, due to time restraints, we were not able to prototype them all. For example, we chose to focus on the interaction path rather than the creator path for the scope of the usability test. We also were not able to fit the app integration experience into the final project. Finally, we were not able to test in a real outdoor environment due to the scope of the class, but this would have been preferred to gather genuine feedback from users.
NEXT STEPS
This project started out in the midst of the Covid pandemic, however I see this project leaving a positive long-term impact on new neighborhood residents, older neighborhood residents that crave to tell their story, and current neighborhood residents who want to find pretty and weird gems within their neighborhood.
 
We also see an expansion of stakeholders, where businesses can promote their new space or product. Keeping it local is important to us because you're just one walk away from a new discovery.
REFLECTION

Why did we choose the mobile platform?

Mobile phones are portable and common devices used for exploration and connection within the US.

​

My personal takeaway:

Throughout this project, I learned many things. The power of collaboration, not getting too attached to an idea, gaining experience designing and prototyping within Figma, as well as mentoring my group. Also, being active in each part of the end-to-end process widened my skillset in research and usability testing. 

Why did we choose AR?

Using Augmented Reality gets people outside and adds an element of novelty and fun.

​

Why did we choose an explore app with navigation?

To create the joy and fresh adventure of ‘travel’ without users needing to leave their neighborhood.

​

Why did we incorporate opportunities to connect?

People crave a sense of belonging within their communities, especially during Covid-19.

bottom of page