NatureSeek
A mobile-first scavenger hunt game app that provides a hands-on way to learn about the world around us.
Background
People who enjoy games and are interested in nature need a way to learn about the flora, fungi, and fauna in the area surrounding them in a hands-on interactive, and social manner because they want to have a unique experience while also being educated in identification and getting to socialize and work together with others.
We will know this to be true when users engage in the app to learn about the native life in their vicinity while also getting to explore the area with others in a social setting
My Role
Solo Project to learn the full UX Design Process, constant communication and feedback from Tutor and Mentor during first iteration. The update consists of feedback and weekly meetings with Mentor.
Objectives
My goal for NatureSeek is to create a Mobile-First app that gets people excited to spend time outdoors with their friends while also motivating them to learn more about the nature around them.
Users will compete against each other to finish their list first and share their achievements on social media to keep things competitive and fun.
Provides an interactive, social, educational, game that requires physical movement to find the scavenger hunt items.
Will bring awareness to the world around the user and hopefully create more mindfulness towards nature.
Scope
Designing a Scavenger Hunt web app for identifying flora, fungi, and fauna in a game-based setting where there are options to work together in teams and share progress on social media to keep things competitive and fun. Provides an interactive, social, educational, game that requires physical movement to find the scavenger hunt items. Will bring awareness to the world around the user and hopefully create a more mindful and informed individual.
Iteration 1
Market Research
Deciding on a project idea and researching the established market to gauge opportunities and proven successes
Topic Research (Why I decided to do this project)
I was drawn to the idea of making an interactive learning app that combined spending time outdoors with learning about the world surrounding us because it there is scientific evidence that most humans learn better when in social settings where they are actively engaged in a lesson. Scavenger hunts based around nature identification felt like the perfect melding of my passions and 98% of the worlds oceans are still undiscovered. Is anyone actually reading this far?
Competitive Analysis
A Competitive Analysis was conducted with products similar to the NatureSeek App, GooseChase and Geocaching, since both include scavenger hunt type gameplay.
Geocaching
Insight about what features an outdoor activity app needs.
How to keep a mobile app functioning when users are in remote locations with limited cell service.
GooseChase
How to integrate social features into an outdoor scavenger hunt.
Insight on future business expansion to market towards schools and corporations as a group activity.
View Competitive Analysis Document
Gain user insight on pain points and frustrations with similar apps.
Gather a list of inspiration for possible features.
Listen to real people from the target audience as inspiration to create user personas to help build a more user-centric end product.
User Research
Insight: An interview participant did not enjoy the outdoors and nothing motivated them to go outside. That interview did not yield much useable data. Qualifying questions to assess if users are in target demographic would have prevented this.
Overwhelming interest in learning about edible or dangerous things in nature for safety and survival.
Weather, insects, time of year, etc will all factor into how motivated users are to go outside and hunt.
Users more likely to participate with group of friends versus strangers.
Nature is seasonal, so hunts will need to be constantly changing/updating with the seasons.
View Empathy Mapping Document
User Interviews and Empathy Mapping
Main Goals:
Create broad range of users to include under-represented groups in the design process.
User Persona Darcy, who is non-binary.
Keep in mind the different situations in which this app would be used.
View the app from multiple perspectives, so to not design with a bias in any particular direction.
View User Stories
User Persona and Stories
User Journey Maps allow me to create specific scenarios each persona would find themselves in and gives me a first hand perspective on the emotional journey they experience. This allows me to design with a higher level of empathy for the user.
View User Journey Maps
User Journey Maps
Information Architecture
More research through analyzing potential tasks users will want to accomplish and utilizing card sorting surveys to understand word associations.
Shaping the information gathered into a Site Map.
During this phase I added the "Guest" persona so I could get a better understanding of how someone without an account who was invited to a hunt is able to participate.
Created "Guest Login" feature that allows invited users to play without creating an account or logging in.
Gave me a better visualization of the navigation structure within the app.
View Task Analysis Document
Task Analysis
Giving the information gather thus far a structure. An exciting step in the process, as the app is starting to take shape.
Wireframes
By creating low-fidelity wireframes on notecards, I was able to rapid prototype and easily get my ideas onto a visual surface for refinement.
During this phase I focused on fabricating the Gameplay feature. This needed special attention as it is the core of the app and needs to be well founded to build a solid foundation for the rest of the app.
Low Fidelity - Pencil and Paper Sketching
The Hunt Tutorial feature created during this phase.
Game functions further refined
Guest Log in and interactions given visual structure
Brand identity begins taking shape
Mid Fidelity - Adobe XD
Gave me insight on what associations people have with certain words.
Compiled a list of words that are most recognizable to house different features.
Profile, Settings, Account, Message Board
Allowed participants to create own categories, came up with Newsfeed and Hunt Dashboard, which proved to be very useful categories in organizing features.
View Card Sorting Details
Card Sort
Iteration 2
Started with a list of prompt options and chose the option of creating a scavenger hunt app that combined my interest in nature and video games.
Usability Testing
Main Objectives:
Assess learnability of the NatureSeek app for new users interacting with nature identification scavenger hunt software for the first time on mobile.
Observe and measure if users understand the app, its value, and how to complete functions such as:
Editing profile
Adding new comment to message board
Selecting and beginning a hunt
Finding an item during the hunt game
View Usability Test Plan
Usability Test Plan
Entering the collected Usability Test data into a Rainbow Spreadsheet allowed me to clearly see any patterns or major paint points with ease. This visual chart condenses a large amount of data into a comprehensive chart.
Rainbow Spreadsheet
After usability tests, felt like I needed more tooltips, but when ideating solutions, realized I needed less. I came to this conclusion by reevaluating the issues I was trying to solve with more tooltips and coming up with different design solutions.
Issues brought forward during testing are listed below:
Usability Test Report
Suggested Change: Add a "Found It!" button at the bottom of Item Details screen. Make details a pop up window on top of map so user location within app is more obvious.
Evidence: Five out of the six participants expressed confusion when they reached the Item Details page, stating they did not know where to go next.
QUOTE FROM USABILITY TEST
Issue #1: (High Severity) Confused about where to go after reaching Item Details page.
Suggested Change: Redo Hunt Tutorial to look more like the actual Hunt Gameplay. Change Exit button to an "X". Make "..." lead to an Options menu within the Hunt. Add labels to Hunt List, Camera, and Chat.
Evidence: General confusion among all six participants when interacting with the different icons on the Hunt Map screen.
QUOTE FROM USABILITY TEST
Issue #2: (High Severity) Icons on hunt lobby and play map screen are difficult to understand.
Suggested Change: Move Search and Saved Hunts to top right corner and add back arrows from those screens. Remove Hunts Nearby hamburger icon and add a handle to the top of the Hunts Nearby list. Add descriptive titles to the tops of the screens.
Evidence: Five out of the six participants were unable to find or did not notice the search and saved hunt features as well as the other icons on the map screen. Once in those locations, participants had difficulty navigating back to their original location.
QUOTE FROM USABILITY TEST
Issue #3: (High Severity) Could not find/did not know how to navigate search and saved hunt options on selection map.
Suggested Change: Make Categories visible by lining them along the top of the map, and change from pins to appropriate category icons to add descriptions without adding words.
Evidence: Three out of the six participants had severe difficulty noticing instructional text bubbles while they were on the map selection screen. They all found it to not be eye-catching enough.
QUOTE FROM USABILITY TEST
Issue #4: (Medium Severity) Text bubble instructions are not noticeable.
Suggested Change: Add a "Next" and "Continue" respectively to screens, and remove the swiping mechanic. Remove "Have an account?" and add "Skip".
Evidence: Four out of the six participants expressed concern about others having difficulty navigating through the onboarding screens due to no obvious navigation buttons. However, no participants had difficulty with this task.
QUOTE FROM USABILITY TEST
Issue #5: (Low Severity) Swiping for onboarding navigation was not obvious.
The usability tests brought up some major issues within the gameplay and hunt selection, This gave me a chance to reevaluate and create a more solid foundation for the Hunt Gameplay feature, which is the core of the app. Overall I consider the usability tests to be a success as they brought attention to aspects of the app that needed more work and I was able to make the necessary improvements.
View Usability Test Report
Output
Iteration 3
Made changes to the app, created a high-fidelity prototype, created a design language system, organized design files to follow best practices for hand-off to dev team, as well as a video walk-through of the high-fidelity prototype version of the app.
Changes made based on Feedback from Usability Test Report - Refined Design
Observation: The majority of usability test participants confused about navigating game, even after completing tutorial.
Insight: The tutorial is not doing good job of familiarizing users with icons and map layout.
Solution: Redesigned the Tutorial to match Hunt Gameplay, with coach marks explaining the various icons on Game Map.
Hunt Tutorial
(Output is high-fidelity changes made based on user feedback) {images and descriptions of high-fidelity prototype}
High Fidelity Delivered Designs
Peer review of the app by posting it within the CareerFoundry Slack channels and asking for feedback from other UX Design students. Received feedback from Tutor and Mentor after presenting the full design and scope of the project with them. (Insert stuff here about what feedback I received)
Peer Review
Observation: Confusion about where to go after reaching the Details screen.
Insight: Users need way to easily backtrack to map screen or reach camera screen to take a photo.
Solution: Made Hunt Details into a pop up window on top of the Game Map, so users have a sense of direction.
Solution: Added a button that leads to the Camera screen for when player finds item.
Item Details
Observation: Hunt Options leading back to Hunt Lobby is not a very useful interaction.
Insight: There is a gap in features, as users are not able to access any hunt settings or information while in an active hunt.
Solution: Redesigned Hunt Options screen by creating a menu with list of players, ability to toggle location on/off, information about hunt including rules and tutorial, ability to invite more players, and option to quit the hunt without saving.
Solution: Increased usability by giving user more control and access to customization.
Hunt Game Options
Changed pins to icons indicating categories to give users this information through visual cues.
Added a handle for a familiar motion to drag list up/down.
Decluttered icons at top of map to create less visual distractions and prevent the user from feeling overwhelmed.
Removed nested menu for categories and placed them along the top of the map for easy access.
Hunt Selection Map
Hunt List style inspired by books with botanical illustrations. Want it to feel like a digital field guide.
Brand font/color scheme and button shapes inspired by sign posts and wooden signs found near campsites and hiking trails.
Used minimal color and natural tones to evoke a sense of nature within the app.
Design Documentation/Style Guide
2021 Version - Deliverables
Video Walk Through
(All of the pieces of the final first version, like style guide, video walkthrough etc) A navigable prototype located on my portfolio, a viewable PDF Style Guide, a video with a walk-through of the prototype, a Design Labeling System within the Adobe XD project file, and designs imported and labeled ready for hand-off to developers.
Navigable Prototype
Through this process I learned a lot about myself as a designer. I have a very structured and organized design style that helps me excel at integrating a long list of features into an app without making it feel overwhelming and crowded. I enjoyed taking the opportunity while creating this app to familiarize myself with programs I have not used before. I look forward to always continuing to learn and grow as a UX Designer.
Insights after 2021 Version
Update NatureSeek by transferring the project into Figma and updating it based on feedback from new Mentors.
Features that would be nice to have with future updates:
Different loading screens unlocked according to hunt area etc
Customizing colors on rewards, like map marker customizations
Animations: touch effects - flower petals or leaves when screen is touched, sound effects, petals raining when item identified.
Ask a biologist, botanist, mycologist section
Next Steps for the Project
Use NatureSeek update in Figma as an opportunity to strengthen my skills in Figma and to modernize NatureSeek’s Design, integrate Google Maps, and reevaluate the navigations and features.
What is happening next?
2024 Update (Coming Soon)
(All of the pieces of the final first version, like style guide, video walkthrough etc)
A navigable prototype located on my portfolio, a viewable PDF Style Guide, a video with a walk-through of the prototype, a Design Labeling System within the Adobe XD project file, and designs imported and labeled ready for hand-off to developers.
Next Iteration
Thoughts behind design choices
Coming Soon
Coming Soon
Coming Soon
Visual Update
Any Feedback
Different loading screens unlocked according to hunt area etc
Customizing colors on rewards, like map marker customizations
Animations: touch effects - flower petals or leaves when screen is touched, sound effects, petals raining when item identified.
Ask a biologist, botanist, mycologist section
Use NatureSeek update in Figma as an opportunity to strengthen my skills in Figma and to modernize NatureSeek’s Design, integrate Google Maps, and reevaluate the navigations and features.