Case Study: digital solution for immersion in the outdoors through local wildlife engagement
Summary
We designed and prototyped a mobile app for making peoples’ experiences in the outdoors more immersive through improving their appreciation of local wildlife. Our app presents information about local outdoor activities and recreation areas alongside all the fauna and flora one might see upon visiting. After embarking on a particular activity, users can track and take photos of the species they have seen. Afterward, users can share their experiences as “reels” with others while contributing wildlife sighting data to conservation organizations.
Background
Even in nature, one can’t escape the presence of technology. Mobile phones are always within reach, and even a single rogue notification has the potential to completely disrupt a moment of immersion within nature. However, technology in the outdoors does not need to be at odds with immersion in nature. As individuals who enjoy nature but nonetheless bemoan the distraction of technology while in nature, we sought to reverse technology’s deterioration of individual outdoor experiences. Recalling from personal experiences how encounters with local wildlife constituted some of our most engaging experiences in nature, we sought to create a digital app that increases engagement with wildlife and stimulates reflection on wildlife encounters.
Research
When given the broad topic of nature to focus our app on, there were a lot of directions we could’ve gone in. We first thought about who we wanted our users to be, and to do so, we asked the question: who interacts with nature the most? After considering stakeholders, the answer that came to us first was hikers, as we both enjoy going on walks and hikes outdoors, so we zeroed in on the experience of going on a hike. We quickly expanded this scope a bit: we didn’t want to just make an app for hardcore hikers. Instead, we wanted to accommodate for more casual experiences. So we changed our language, focusing our app on one goal.
Goal: enhancing the experience of going on a walk in nature
There were many areas where we found nature walkers could have issues, and the obvious pain points came from finding and organizing walks. However, we wanted to avoid making an app that would just help users find trails near them, and we instead wanted to foster valuable connections between our users and nature. So, we focused on the walk itself: how might we connect users with nature in order to make their nature walks more enjoyable? We talked about making an app that would educate people while in nature, or one that would encourage them to act more sustainably. Then, we zeroed in on the idea of distraction. In our research and personal experiences, we’ve found that, when we are out in nature, we aren’t really focused on the environment around us, and that we are instead looking at our phones, talking to friends, or hung up on the day’s stresses. We also found that users enjoyed knowing more about the nature around them and that it would make them more eager to act sustainably. So, we settled on this HMW question:
How might we enhance the experience of people in nature to include the wildlife while being respectful of it?
From there, we settled on our app idea: we wanted to give users a list of flora and fauna they might see on their hike, emphasizing the rarest ones, so that they will be educated about the nature around them and they will observe nature more actively in the hopes of seeing something rare. We focused on two personas: someone who is experienced with nature and understands it a lot, and someone who is inexperienced with nature, not going on walks or hikes too often due to time constraints. Our design had to account for these two primary audiences.
Lo-Fi’s
When we made our Lo-Fi’s, we focused on a few primary pages: the home page, the map page, and the “briefing” or location page. Both of us had different ideas for these pages, so we created them with Lo-Fi’s to demonstrate and compare our ideas. In the end, we incorporated aspects of both our ideas: the location page was mainly based on Andrew’s, the home page was mainly based on Julian’s, and the map page was a mix of both. Having resolved that issue and discussed the rest of the pages we needed to make, we moved on to the Hi-Fis.
Hi-Fis
We started with the home page, and the first thing we did was to place down this vector art from undraw:
We liked the dark purple and bluish tones, so we based the app’s color scheme on it. This color scheme satisfied our desire to avoid stereotypical green, and although we feared the blues would become too reminiscent of Facebook, the darker, more purple hue distinguished itself. Here is our color scheme:
The other branding choice we made early on was the name: Natureel. Easy to say and memorable, it emphasizes the role of the reels feature in our design and the desire to focus on and reflect upon users’ experiences in nature.
From there, we finished out the Hi-Fis, structuring everything, fleshing it out with images and text, and then reiterating to make things pretty and usable. We used grids heavily, using them to organize our pages sensibly. There’s a lot we can talk about, so we’ll emphasize the most significant design choices we made.
First, we emphasized horizontal scrolling heavily as we went through the process. Lots of components in our app are lists, whether they’re lists of locations, of activities, of reels, or of wildlife. Horizontal scrolling allowed us to keep all that compact and didn’t force the user to see more than they want to. Below is our horizontal scrolling on the home and location pages.
We also had a debate over the drag-up bottom bar on our map page. We feared that, on iPhones in particular, dragging up would trigger the phone’s menu and interfere with the app, but we couldn’t think of a better way to display this info. To resolve this dispute, we looked at the Google Maps app, and we found that they used a drag-up model menu too. We ended up drawing heavily from their design, and the map page became more intuitive as a result. Here is the debated bottom bar:
Sometimes, it’s important to design less instead of more, and this was true with our “Activity Started” page. We wanted to discourage users from peeking at phone frequently on their walk, so we made this page as bland as possible, giving them only two options and not much to look at.
The final major design choice of note would be with the post-activity reflections. We wanted to keep things compact, and for the species checklist, we didn’t want to use horizontal scrolling, since it would be hard to make those checkable in an intuitive way. Still, vertical scrolling provided the same problem from before: how could we keep this page compact? Moreover, how could we include both animals and plants efficiently while keeping them separate? The sliding button group helped make navigation between plants and animals easier, and with the checklists, we made a scrollable frame inside the page. This kept things compact, and to signal that the checklist was scrollable, we added a bit of inner shadow. We also utilized the tried and true method of cutting off one of the items to signal that there was more. The result was a compact and intuitive reflection page! Pictured below.
Revision
As we worked on the first iteration of our Hi-Fi prototype, we met with Jeremy Dunning, Senior Brand Creative Director at JD Sports North America, a sports-fashion retail company. Getting his perspective as a Creative Director, not a UI designer, changed our perspective on design and helped refocus our efforts which were primarily directed towards individual UI decisions back towards our original goals. Placing a high emphasis on the emotions our users would feel using our app, Jeremy encouraged us to consider once again how we hoped to make our users feel immersion in nature through the feeling of wonder at wildlife encounters and to look at our UI decisions through that lens. Taking his advice to heart, UI changes became easier as they were now made in relation to the feelings which they ought to convey rather than simply “what looks good”. For example, we iterated our screens involving rare species to be much more free form and visual rather than highly information-dense and “scientific” as he called it, giving the rare species users have seen or hoped to see visual primacy and more importance on each user’s hikes. Upon actually seeing one of these rare species, the feeling of awe at finding it would reflect the importance placed upon it by our design.
Jeremy also encouraged us to think bigger and beyond our singular focus on increasing individuals’ wildlife encounters, suggesting that we consider the social value of our “reels” and the activist perspective on gathering data on local wildlife. Considering how the word “reel” implies shareability due to its usage by Instagram, Jeremy suggested that we implement a social aspect to our app: making our reels shareable via social media. This would not only heighten awareness of our app but also cause users to reflect on the experience displayed in their reel, furthering our goal of immersion in nature. When we mentioned that our data would be sourced from conservation organizations, Jeremy prompted us to consider how our app could contribute to those same conservation organizations as data regarding sightings of rare wildlife could be useful for said conservation organizations. Providing wildlife sighting data to conservation organizations and environmental activism groups would allow users to contribute to conservation efforts while feeling more connected with nature as a result.
Prototyping
Armed with a better understanding of our app’s purpose and potential, we began the prototyping process by implementing the app’s main feature: creating reels. We connected each component of that feature (finding a location, beginning an activity, and saving a reel) in our Figma prototype and added confirmation pop-ups as needed. During this process, we encountered irregular UI interactions such as a sliding modal view with embedded scrollers that required duplicate screens and much trial-and-error iteration to implement correctly. Beyond that, we faced the issue of having to restrict interaction to a few of each kind of data-dependent list item such as the lists of species for the sake of efficiency at the cost of completeness. The post-activity reflection screen was especially frustrating to prototype since there were many possible sequences of interactions a user could perform. We ended up only implementing one of these sequences (checkbox -> review photo -> notes -> submit), but even then, the number of duplicates of the post-activity screen ballooned up to seven.
User Testing
Upon completing one iteration of our prototype, we conducted user testing through UserTesting.com. While most of our many tasks were successful, we found problems in backward navigation through the main pages of the app. Due to our reliance on back buttons as opposed to a bottom navigation bar, users found it difficult to get to pages they wanted to be on after navigating past the home page. Returning to the home page involved multiple presses of the back button which created confusion. While we did not feel that a bottom menu was necessary due to the scarcity of pages that would be on it, we tried to mitigate this issue with optimized back button connections that moved users to more significant screens as opposed to the previous screen they were on, hoping to create an alternative solution such as a dismissible side navigation menu if we had more time.
In addition, our testers’ differing expectations for what should have been a feature and what shouldn’t have helped us discover some unnecessary features and some potential improvements to communication. Testers expected certain UI elements such as the map to be interactable, but due to the limitations of Figma, we were unable to provide them. In addition, users didn’t seem to see a purpose behind a sign-up / sign-in option, prompting us to remove it altogether. Finally, testers expected more emphasis on the species photos, which we responded to by increasing their size and spacing. Should we conduct another series of tests on our improved prototype, we would have to improve our communication on the app’s current limitations so as not to confuse testers and get more poignant feedback on the features our app does have. In terms of positive feedback, users seemed to understand the purpose of the app, and they mostly felt confident that it would prevent distractions in nature. We had a diverse range of users testing, ranging in age, income, and nationality, and they all understood the core parts of the app, which showed that we succeeded in the most important aspects of our design.
Conclusion
Although our design did not implement every interaction the app would feature, in light of Jeremy’s advice to focus on the bigger picture, how users feel about the app, we are very satisfied with the product of our efforts at the present time, having put over 40 hours collectively into the entire design process from start to finish. We feel confident that we answered our HMW well, based on the good feedback we got from users, and we feel that it successfully accounted for both our personas, being usable and helpful for both experienced and inexperienced nature lovers alike. While there’s more that we could’ve done to make our design truly exceptional, we accomplished what we set out to do with this short timespan.
With more time, this app could have a significant impact on users’ relationship with nature. Should we fully implement sharable reels, our app could help connect users through experiences in nature, creating human connections and stimulating reflection on experiences in nature. Should we secure positive working relationships with conservation organizations, our app would have the data needed to present fully-interactable screens and live up to its potential to be a significant avenue for users to contribute to conservation causes. Such relationships would give users a powerful emotional draw as users would feel like they’re contributing to society, even as they’re just going on average hikes. This app would have a significant impact on society through these contributions to conservation, and this really drove home an important lesson. Designers do more than create pretty, usable apps: they can and should improve society. This project gave us valuable practice for understanding the whole design process, and it helped us understand the true importance of design. We are proud of the work we did here and we will carry its lessons into the future!
See for yourself:
