Ecotour | Shannon Butts

EcoTour

EcoTour is an interactive, award-winning mobile app that helps people understand climate change within their local community. The app guides visitors on a walking tour through Paynes Prairie State Park and uses augmented reality to identify ecological threats, analyze historical events, and evaluate sustainability efforts.

As a result, the app helps people make decisions about local environmental actions. To see the finished product, please visit Ecotourapp.com.

Role: Lead Designer, Grant Writer, Instructor

Responsibilities: Research, Information Architecture, LX Design, eLearning Development, Prototyping, Grant Writing, Narration, User Testing, Evaluation

Audience: Visitors to Payne's Prairie State Park

Tools Used: Adobe Illustrator, Photoshop, Premier Pro, HP Reveal, Unity/Vuforia

EcoTour began as prototype at the University of Florida and then was fully developed in partnership with the Alachua County Conservation Trust, Friends of Paynes Prairie, and the Bob Graham Center for Public Service.

CONTEXT

Climate change is a big issue. How can we impact communities on a local level? I decided to build a learning solution to help people become more environmentally literate, bridging the gap between local ecology and the large-scale issues of climate change.

PROBLEM

People often learn about environmental issues out of context - or at least off site. Pollution, flooding, and a host of other environmental issues become a set of facts rather than relatable actions. In addition, environmental learning tools tend to focus on grand narratives instead of local analysis and problem-solving.

RESULT

The EcoTour mobile app creates an immersive elearning experience that connects users to their surrounding environment - educating learners about local initiatives. EcoTour transforms learning about science, history, geography, and even social justice into a different kind of local "fieldwork."

Approach

Visitors come to Paynes Prairie from all over the world and with varying degrees of technical skill. Thus, the app interface is clean and simple. Minimalistic design helps users clearly identify augmented reality points of interest and divides information by geographic location. Since the AR components are primarily images/video, the navigation avoids images and instead uses large text with clear instructions to tap, swipe, or use the camera. The app provides users simple ways to navigate the area while minimizing distractions.

Design Process

The following sections detail the design process from concept to completion

Research

Design

Development

Evaluation

EcoTour started as an environmental literacy idea, was funded by the Bob Graham Center for Public Service, prototyped as part of a writing and technology course I was teaching at the University of Florida, and was fully developed by myself and a group of four designers. EcoTour is now available at Paynes Prairie State Park through the Park Ranger Station and Friends of Paynes Prairie. We are continuing to collect data from users to update the app or add new points of interest. At the University of Florida, the EcoTour project was also adapted by four additional courses to help teach design, writing, and environmental communication.

Since the project involved making a mobile app while teaching others how to make a mobile app, EcoTour offers a unique example of learning experience design as well as instructional methods.

Research

Study Paynes Prairie (land, locals, visitors)
Analyze environmental threats
Audit information available at the park
Identify knowledge gaps
Assess physical space (boardwalks, paths, structures, signs, access points)

I began the initial research by consulting with local biologists, park rangers, hydrologists, and archives. To understand the target audience, I conducted numerous site visits, interviewed people within the park, and analyzed the current signage and available resources. With a team, I collected drone footage of the area and evaluated information featured at the park compared to other nature preserves or sanctuary areas.

EcoTour was also the final project for a course I was teaching at the University of Florida (How We Make). I began to work with students, showing them how to research, conduct site visits, analyze data, determine knowledge gaps, and draft designs for a mobile app. We discussed experiential learning and how constructivist approaches help learners transfer and apply knowledge. Together, we designed and prototyped EcoTour over the course of six weeks.

Instructional Design

Develop learning goals
Map the learning environment
Identify trigger points and overlays
Sequence activities to build skills
Refine interaction patterns
Create recognizable icons
Design multimedia components

I began the design process by identifying the instructional goals: to help learners define climate change within the context of their local environment and to evaluate how to take action. Since I was also teaching learning design as part of my higher education course, I decided to create learning goals with my students that would help focus the design phase of the project:

Identify environmental threats to the Alachua Wetland areas
Show how the threats have changed over time
Critique how selective history erases marginalized voices
Define how local threats connect to larger environmental and social justice issues
Connect learners to local action initiatives

We used our existing research to write content and design the look and feel of the mobile app - including how the app would use augmented reality technologies to integrate and respond to signs within the park. The tour was broken down into 15 modules, each a specific augmentation or "point of interest" that users would walk to and access in the park space. Points of interest included information about animals, plants, water runoff, indigenous peoples, human development, and current conservation efforts. Modules included audio, video, game, and evaluation elements.

Screen Shot 2020-06-23 at 2.54.26 AM.png

LX Design

Storyboard/Sketch
Assess UX/UI
Test accessibility
Build feedback mechanisms
Refine interaction patterns
Evaluate affective and psychomotor

Seeing Experiencing is Believing. More than merely interacting with a screen, I created a learning experience with an environment. Designs emphasized how learners use a screen to interact with content in the field. Drafts considered the size of device screens, how people would listen to audio outside, where sunlight might create screen glare, how visitors would move along the walkways, where people might stop, the sequencing of activities (both in the app and in the physical space), how people might hold or orient the screen, and the most accessible colors and fonts. I then focused on feedback mechanisms, and how we could address the needs of a diverse audience.

Students created storyboards and sketches for specific modules and we discussed visual communication and interaction patterns in mobile design. Through drafts and wireframes, we decided on a central layout that would reduce distraction, minimize cognitive load, and create visual consistency. Each learning module had image and text components with interactive camera orientations to trigger augmented reality pop ups.

Within the 15 learning modules, we also sequenced in five videos with narration and three game activities that allow learners to practice identifying and responding to environmental issues. Each activity was built using scaffolding techniques: learners begin with a step-by-step video guide through the environmental issues, next they practice identifying issues with extrinsic feedback, and finally they interact with the surrounding environment and analyze issues on their own. After each activity, learners link to additional resources and local initiatives creating sustainable change.

Finally, we added a children's tour elearning module and linking "Kid's Corner" website so that younger visitors to the park could engage activities and participate in an animal scavenger hunt.

The children's tour module includes four animated character guides (Billy the Butterfly, Hannah the Horse, Betsy the Bison, and Albert the Alligator) as well as links to lesson plans that help teachers integrate the children's tour into existing curriculum.

All activities within the children's tour have additional learning objectives that adhere to the K-5 standards for Florida state schools. The visual design remains consistent, but reduces text, moves phone triggers to kid height, and adds more colorful images and interactive elements like tapping and swiping to keep kids engaged.

Development

Prototype in Aurasma and HP Reveal
User test
Refine design and interactions
Prototype with Unity/Vuforia
Build accompanying website

Prototypes of EcoTour were built in two augmented reality platforms: Aurasma and HP Reveal. These platforms provided a ready made infrastructure so that students could focus on elements of design and user testing instead of back-end development. In addition, the platforms were free, offering an accessible design and teaching tool. I conducted several rounds of user-testing with the prototypes, collecting data on design, learning objectives, feedback mechanisms, and rhetorical appeal to create summative evaluations.

After evaluating and refining the prototypes, I worked with colleagues to develop the stand alone app through Unity/Vuforia. We integrated all of the content from prototypes, added an introduction and conclusion video, and refined the look and feel to create a more consistent color scheme. We then created an accompanying webpage in HTML5 to allow users to "visit" the prairie through an interactive map. Iterations have been documented through several publications that detail how mobile AR interfaces can improve cognition, retention, experiential learning, and mastery.

Evaluation

Formative and Summative evals
Interviews
Focus groups
Surveys
User comments

Screen Shot 2020-06-28 at 5.38.10 PM.png

Evaluation happened through the design, making, and testing stages. While creating sketches and storyboards, students collected formative evaluations for each module as well as summative evaluations for the overall EcoTour project using the Kirkpatrick method (Reaction, Learning, Behavior, Results). We conducted interviews, focus groups, surveys, and gathered informal user comments from members of the community. Evaluation results drove each iteration of the modules to help refine content and design. Evaluation also shaped the learning metrics for the finished product.

EcoTour wasn't designed to get learners to a point of mastery, but rather to introduce content, encourage critique, and connect users to resources. Additionally, the goal was to test out new methods of experiential learning and create a platform for new types of elearning modules and design thinking. Through beta testing and with the final product, learners consistently recognized environmental threats, could connect specific local problems to climate change, and were able to evaluate local initiatives.

EcoTour is now available at Paynes Prairie State Park through the Park Ranger Station and Friends of Paynes Prairie. We are continuing to collect data from users to update the app or add new points of interest. At the University of Florida, the EcoTour project was also adapted by four additional courses to help teach design, writing, and environmental communication.

Back to Portfolio

Tactile Technologies

SHANNON BUTTS

CONTEXT

PROBLEM

RESULT

Design Process

Research

Instructional Design

LX Design

Development

Evaluation