top of page
The Stroll App
CONTEXT
The Covid-19 pandemic has completely changed our lifestyles, and introduced new not-so-great experiences such as Zoom fatigue, lack of exercise, travel limitations, and social guidelines of staying 6-feet away from others. Our team brings forward a solution that captures the essence of travel without having to leave your neighborhood.
MY ROLE
Four people were in our group — two student researchers and two student designers (including me). Though the scope of the project didn't include collaborating with engineers, our work was overlooked and graded by our professor. (We got 100%!) Though this was a group project, I led my team in competitor analysis, design (except onboarding adding content flows, which Anders led), and the promotional video. Once or twice a week we would meet to equally work on the following: implementing diary study and survey, creating design goals and user personas, overall ideation, design decisions, prototyping, and carrying out usability testing and analysis.
TEAM
Elisabeth Fonden, UX Designer
Anders Herberg, UX Designer
Beth Dunbar, UX Researcher
Kallie Bracken, UX Researcher
DURATION
10 weeks
TOOLS
Figma
Sketch
DELIVERABLES
Design Research
High-Fidelity Prototype
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.
Scenic views and hidden gems were what a majority of participants took pictures of.
FINDINGS
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
78% of participants felt getting outside was important to their mental and physical health during Covid-19.
94% of participants reported importance in being connected to their community
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.
When looking at photographs participants took, a majority of them were scenic views and hidden gems around their neighborhoods.
"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.
Participants reported high importance of feeling connected to their community yet a much lower figure reported currently feeling connected. Those who were new to neighborhoods craved a sense of belonging.
"It’s important for me to feel a sense of belonging."
"I like feeling connected, but I have also moved many times in my life..."
RESEARCH INSIGHT #3
Getting outside is vital to physical and mental health.
78% of participants felt getting outside was important to their mental and physical health during Covid-19.
"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
Our group created three personas, incorporating our research insights and design goals.
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.
STORYBOARD
Before we started sketching, we first created three different storyboards, covering the explore, create, and onboarding experiences.
Elisabeth Fonden
Anders Herberg
Beth Dunbar
USER FLOWS
After storyboarding, my team put together user flows for the explore, create, and setting experiences.
Elisabeth Fonden
Anders Herberg
Beth Dunbar
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)
PROTOTYPE
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.
Note: Because we were on a tight deadline, we designed other flows in high-fidelity right off the bat.
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
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.
FINAL PROTOTYPE
Anders and I led the prototyping for my team, however completing it was a team effort (via Figma).
View Interactive Prototype
VIDEO PITCH
I also spearheaded the video pitch for me team, by speaking and editing it via iMovie. Feel free to check it out!
Note: Additional edits related to spacing and accessibility were made post this video. The prototype above shows our most recent work.
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