WildWise
UI/UX Design & Research
Overview
WildWise is a mobile and smart watch application that provides users with essential details on terrain, wildlife, hazards, and local sightings, complemented by offline trail maps, survival tips, and emergency contacts. Its ultimate mission is to empower outdoor enthusiasts and survivalists, enhancing their experiences with safety and information during their adventures in the great outdoors.
Problem
Many wilderness and hiking apps face challenges such as restricted offline capabilities, absence of real-time updates, inaccuracies in trail information, and a deficit in crucial survival data.
Goals:
1. Create a safe environment for the user
2. Provide current, reliable information
3. Encourage engagement with other users
4. Allow personalization of outdoor experiences
5. Create opportunities for partnerships and collaborations
ROLE
Visual UI/UX Design
UX Research
Concept Development
TIME FRAME
10 weeks
PROCESS
Exploration: Design charrette, initial sketches, lo-fi prototype, mood board and user personas
Refinement: Mid-fi prototype, usability testing, findings, and design implications
Implementation & Final Product: Hi-fi prototype and implementation of design implications
Design Charrette
The primary objective of our Design Charrette was to brainstorm and sketchinitial concepts for WildWise.
We kicked off our session with a group brainstorming activity to gather diverseideas. Each team member sketched independently, allowing for avariety of interpretations and solutions to emerge.
After this, we engaged in a group discussion to refine our individual concepts, combining the best aspects of each into acohesive lo-fi prototype design.
Initial Sketches
Key Ideas:
- Real-time updates on wildlife sightings and weather conditions
- GPS tracking and location sharing for enhanced safety
- Feature allowing users to contribute information to the WildWise community
Lo-fi Prototype
Mood Board
To initiate the visual design ideation for our application, we crafted a mood board. Opting for a "woodsy" color palette, we aimed to capture the essence of its intended use for nature activities, featuring examples of icons and more.
User Personas
As WildWise is ahiking and camping app, we chose our primary target audience as outdoorenthusiasts, and our secondary target audience as survivalists. User personas were created based on this to further understand the needs, desires, and frustrations of our target users.
Next Steps:
Develop digital wireframes and functional prototypes based on our final group sketch. User testing will follow to ensure that our design meets user needs effectively and to make necessary refinements.
Mid-Fi Prototype
Using artifacts from the exploration phase, we refined the lo-fi prototype to create the digital mid-fi prototype for both channels. After a few rounds of ideation, our finalized mid-fi prototype included the following features:
- Home Screen with weather and trail map shown
- Trail Map with potential dangers
- Report Dangers page with various hazard options
- Handbook of camping and survival information
- Weather Page
- Emergency Services Page with different numbers including emergency contacts
Usability Testing
We tested six users' ability to complete five major task flows in the mid-fi prototypes. Participants were also asked warm up questions to determine demographic information and previous experience with outdoor activities and questions relating to difficulty with the application, personal use, value to other users, and improvements they would like to see.
Task 1: Navigate through the app to find the terrain information of your trail
Task 2: Find the page that has specific information on the flower Woodland Phlox
Task 3: Call for emergency services
Task 4: Submit an incident report stating that there is a bear near the trail
Task 5: Find out what the temperature is going to be at 12am
Findings and Design Implications
Trail Map
- No page for choosing different hiking and camping options
- Yellow triangles (caution symbols) caused confusion and frustration as they were not clickable
- There is not enough information provided. The following aspects were expected but missing: Distance of hike and how far the user has hiked, location of safe areas (e.g. ranger stations, campsites), and type of terrain (e.g. location of water sources)
Design Implication:
- Add a page to allow users to find trails near them, save trails, and customization features
- Add the distance of the entire trail and the user’s progress, location of safe areas and points of interest (e.g. ranger stations), and type of terrain (e.g. location of water sources) to the trail map page
- Allow the caution symbols to be clickable, and provide information of the reported danger or sighting when clicked
Missing Login/Account Creation
- Users were confused by absence of login page and a way to create an account
- Concern with being able to save personal information, data, trails, etc.
Design Implications:
- Create a login page
- Allow users to create an account, input personal information, and save specific trails, handbook pages, etc.
Incident Report
- Mobile Phone: Confused with differences between listed categories
- Watch: Users wondered how they would input a danger if it did not fall under any of the categories listed
- Watch: Unable to type on Apple Watch and typing on a smaller screen is incredibly difficult
Design Implications:
- The "Human-Related Danger" category will be removed to eliminate confusion
- Change the text input on the smart watch channel to a categorical menu with different dangers listed
- Add an “Other” category if the danger does not fall under one of the categories listed
- Include a voice input option
Smart Watch Menu
- Unable to close the menu after opening it. Menu stays open, obstructing the view of the rest of the screen
- Menu icons were confusing, users could not identify their purpose and disliked the lack of a weather icon
- Menu icons did not stand out against the page underneath. They overlapped and caused both the menu icons and the information on the page to be difficult to navigate and see
Design Implications:
- Replace current icons with better representations of each menu category
- Add icon labels to each menu icon to further clarify their purpose
- Add weather to the smart watch channel menu
- Add a background to the menu once it pops up to eliminate visual strain and confusion
After analyzing user feedback, we applied the design implications and implemented the proposed changes to curate a more seamless and enjoyable user experience. The aesthetic components and style guide were incorporated into the final hi-fi prototypes for WildWise.
See the hi-fi mobile phone prototype in action →
Interact With Smart Watch Hi-Fi Prototype
Interact With Mobile Phone Hi-Fi Prototype
Login Information
Username: johnsmith@depaul.edu
Password: 12345
Final Thoughts
Throughout this project, our team acquired valuable insights and skills. We developed a deep understanding of teamwork and recognized the critical importance of each phase in the user-centered and iterative design process. One notable lesson we gleaned from usability testing was the realization that "the user is not like me," emphasizing the need to approach design from the user's perspective rather than our own.
Undoubtedly, the significance of multiple iterations became evident as we worked through the project. These iterations challenged us to surpass our personal boundaries and preconceived notions about what we could achieve. The iterative process not only refined our solutions but also encouraged continuous improvement, pushing us to strive for excellence in our designs. Overall, this project provided us with a holistic learning experience, reinforcing the importance of collaboration, user-centric thinking, and the persistence required to create effective and user-friendly designs.