Stroll
Team
UX Design: Elisabeth Fonden, Anders Herberg
UX Research: Beth Dunbar, Kallie Bracken
Duration
10 weeks
Tools
Figma, Sketch
Deliverables
Research • Design • User Testing • Promotional Video
Context
Covid-19 shook up our routines with Zoom fatigue, limited travel, and social shifts. Our remedy? Introducing Stroll – a solution that lets your neighborhood become a world of its own. With Stroll, we transformed mundane walks into captivating journeys using Augmented Reality. Our app doesn't just let you explore, it lets you share and bond, turning neighbors into a tight-knit community.
My Contributions
As a graduate project, our four-student team collaborated twice a week. I took the lead in competitor analysis, design, and crafting the promotional video. From research to ideation and user testing, our teamwork made Stroll a reality.
Style Guide
We 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.
RESEARCH INSIGHT #1
People want to see the pretty and the weird.
"Another park you may miss unless on foot. The stairs activate my curiosity." - Participant A
RESEARCH INSIGHT #2
There's a lack of community connection.
"I like feeling connected, but I have also moved many times in my life." - Participant A
RESEARCH INSIGHT #3
Getting outside is vital to physical & mental health.
"Yes, it’s [getting outside is] so important to stay connected for mental health." - Participant C
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.
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
02. 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.'
Design Goals
After synthesizing our insights via data analysis and affinity mapping, my team set goals for our design solution.
PROCESS
03. Ideate
01. Research
Our initial challenge revolved around the repercussions of the COVID-19 pandemic. This led to our fundamental design query: "How can we utilize technology to promote neighborhood exploration and encourage physical activity while building a bridge for community connection during quarantine?"
We engaged 18 participants in an immersive Diary Study and comprehensive Survey. We also undertook an in-depth Competitive Analysis, dissecting three analogous applications in-depth. The results showed that people really appreciate local walks because they do wonders for their mental health. There's also a strong desire for better local connections, and they are skilled at jumping between different apps to check out nearby events and places.
We used our insights to put together features requirements, storyboards, user flows, sketches, and prototypes. It was important to us that we tie each design decision back to the user goal.
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).
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.
04. Prototype & Iterate
We carried out usability testing on 5 people via Zoom, using a Figma prototype. We created a script and took turns moderating during the tests. Afterwards, we analyzed themes and patterns in the data and refined where necessary. Below are a few examples of our iterative changes throughout the testing process.
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
Features Requirements
Storyboards and User Flows
Mid-Fidelity Prototype
Early Sketches
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.
05. Final Product
Onboarding
We created a seamless and quick on-boarding experience, where we highlight features and actions within the app.
Easy to Use
Actionable
Explore
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
Connect
Interact with other's experiences by commenting, sharing, or messaging them personally.
Whimsical
Local
Easy to use
Connect
Create
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
05. Learnings
Final Prototype & Promotional Video
Anders and I led the prototyping for my team, however completing it was a team effort (via Figma).
View Interactive Prototype
Reflective Questions
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.
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