top of page

EcoTour

EcoTour App

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 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.

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.

Bob.jpg
Friends of PP.png
BLUE+LOGO.png

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 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 while minimizing distractions.  

EcoTour%20final2_edited.png
Tablet_edited.png

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)

Payne's Prairie.png

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.

IMG_0294.JPG

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

IMG_8400.JPG
IMG_0327.JPG

 

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:  

​

  1. Identify environmental threats to the Alachua Wetland areas

  2. Show how the threats have changed over time

  3. Critique how selective history erases marginalized voices

  4. Define how local threats connect to larger environmental and social justice issues

  5. 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

EcoTour test.JPG

 

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.

​

EcoTour planning
EcoTour Sketches

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. 

EcoTour prototype
EcoTour Kids Corner - Albert
Kids Corner

 

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.

​

EcoTour Field Trip

Development

  • Prototype in Aurasma and HP Reveal

  • User test

  • Refine design and interactions

  • Prototype with Unity/Vuforia

  • Build accompanying website

Ecotourapp home.png

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.

Ecot%20final_edited.png
EcoTour%20final2_edited.png

​

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. 

​

IMG_2438_edited.png

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. 

bottom of page