Wander is an app that encourages people to go outside and explore, making walking fun again. In a new area, stories are placed in certain locations that the user can walk towards to read. These stories are user submitted and can be about an experience they had there, a great picture they took or just anything they want to share. Users can comment, like and save stories they enjoyed as well. Reading stories, adding stories, and visiting new areas all earn points that the user can use to customize their avatar, which is seen while they are walking. The app was prototyped on Figma.
How can we make walking more enjoyable, as a common quarantine activity that people rely on to be able to go outside?
The solution is to gamify the experience and make walks more interesting by providing rewards at the end. Furthermore, it would be ideal to foster a community that allows people to connect with one another even without physically seeing them in person.
“Start to Wander: Explore to discover new areas, read user stories and earn points”
Teenagers and adults aged 16-35. People with enough freedom to go outside on their own and curiosity to explore new areas.
Tone and Manner
Clean, bright and illustrative. An inviting app that can be enjoyed by everyone.
Discover and easily navigate to nearby areas to find stories
The user can search for areas they want to go to through the map, or browse popular areas nearby. You can even save areas that you love to visit. Navigate by using Google Maps and collect a badge when you visit a new area.
Explore an area with your avatar or in AR
When you enter an area, the user will be able to explore and find nearby stories. The user has the option to explore with their avatar or in AR, allowing for a more immersive experience.
Read the stories that others have posted
When you get close enough to a story, it will pop up for the user to read. You can like a story to show you appreciate it, comment to express how you’re feeling and save it if you want to read it again later.
Post your own stories
Share your experiences while you’re in an area! What memories have you made? Or did you just take a cool picture you want to show off? The user can add multiple images and text to their story, as well as choose if they want to be anonymous or not. User submitted stories will be reviewed for approval before being randomly placed in the area for other explorers to read.
And earn points for all of the above!
Points are awarded to the user after they finish exploring an area. Every new area they visit, story they read and story they post will earn them points. Points can be used to customize your avatar. The user can buy new clothes and accessories that will be featured on their avatar as they walk. This creates an incentive for users to contribute to the Wander community!
I created 8 user flows initially for this project: Sign up, Navigate to an area, Explore an area, Report a story, Add a story in an area, Changing your city, the Profile page and the Saved page. The main use flow that I wanted to focus on was navigating to an area, exploring it and adding a story in that area. There are multiple ways that you can start navigating to an area. It can be through the home page: using quick navigation or after learning more information about the area and navigating from there. Or it can be through the Map page found through the bottom navigation. Once you arrive at an area, you can collect your badge and start exploring. When you are exploring, there are two modes you can use: Street mode or AR mode. In an area, you can also add a story. If you do not finish writing it when you are there, it will automatically be saved as a draft and be accessible through the Saved page in navigation.
Low Fidelity Wireframes
For my low fidelity wireframes, I wanted to get a clear understanding of how to format the home page. I decided to have a scrolling list of images for popular areas. On these images would be a button to quickly navigate to it and quick information about it, such as how long it takes to get there and how many stories there are in the area. Deciding on the layout of the homepage made it much easier moving forward to decide on the layout of the whole app.
Mid Fidelity Wireframes
Please select each thumbnail to see the mid fidelity images in full. They are split by user flow and page.
High Fidelity Wireframes
Please select each thumbnail to see the high fidelity images in full. They are split by user flow and page.
What I learned
Planning is important
Creating user flows to plan out an app is essential to creating a functional experience that is easy for the user to understand. Having good user flows help the whole process!
Think of every possibility
…because the user can go in any direction. It is important to consider incorrect paths, pop ups and usability design to help the user easily navigate the app, even if they make a mistake. Every action should be designed.
Listen to the people around you
…they can help! Receiving feedback from my peers and professors helped me create an app that I was proud of. They helped me explore multiple options and let me know when things weren’t working. We all supported each other to create our best work together.