TreeHuggers: Education Through Gamification

UX/UI research and design process for an app concept that helps people learn about the environment in a fun way

Team Members:

Tessa L. — Content Strategist

Connie X. — Art Director

Linh V. — Research Coordinator

Amy S. — Project Manager (I looked over and contributed to research and design)

Tools:

Figma, Adobe Photoshop, Google Surveys, Adobe Illustrator

Skills:

UI design, user surveying, user testing, user research, wireframing, prototyping, market research

Prologue: The Problem

It’s more important than ever to be informed about our actions and the environment, so that we can protect ourselves from the damaging effects we have caused.

My team and I wanted to create an app that can make learning about environmental issues fun, to cater to a wider audience. We also want the app to incentivize learning by showing real-world environmental progress.

How might we educate the public about environmental issues in an interesting way?

Chapter One: Defining the User

Who would be interested in our concept?

We need to know who we are designing for so we can design features that are appealing to our user base.

The youth are becoming increasingly concerned about and interested in environmental issues, especially climate change. Youths are also fairly interested in social media and competitive social gaming platforms, like Animal Crossing or gaming through Discord. Our persona embodies the traits and values of climate-conscious youth.

Chapter Two: Researching Important Features

The Importance Matrix

We decided to use an importance vs. difficulty matrix to plan out what features we wanted to implement first. We first wanted to work on the foundations of the app, which include the type of game users could interact with (including incentives to learn), app/screen structure, graphic content, and types of environmental issues users could choose from.

User Survey

After deciding what to work on, we released a survey asking users like Adelaide for their preferences on certain features, games, graphics, and content. We received 35 responses.

When asked if they’d used a social cause app before, most of our potential users answered “No”. If they had answered “Yes”, some users had put down social media apps, perhaps confusing “social cause” with “social media”.

Users were also asked about preferred methods to log into an app, and if they would share progress through social media. Using Facebook (31%), email (27%), and signing in as a guest (26%) were the top three answers for logging in, and 66% of users would like the option to share their progress.

When asked what type of task they would like to complete after watching a video or reading an article to grow their tree (the game), users mainly chose goal-setting tasks (77%) like answering questions about how the user would improve their carbon footprint in their day-to-day life.

We used these responses as a guide moving forward; potential TreeHuggers enthusiasts would like the social aspect, and would prefer personal goal related questions that can get them engaged. The type of task survey-takers preferred to answer (goal-setting questions) are tasks that can allow users to consider their own lives and what they can do to change, as opposed to answering a straightforward question about the article or video they watch before receiving the task.

Chapter Three: Prototypes & Testing

Testing Round One

We tested the first version of TreeHuggers — a working paper prototype — on five volunteers with demographics similar to Adelaide.

Our Prototype

Paper prototype. The prototype includes an explore page, an end-of-video question, and a “My Forest” page.

Paper prototype of TreeHuggers app

The Results

• Users were able to quickly and easily navigate the simple layout and straightforward process.
• They appreciated the progress bar for leveling up a tree.
• Many were not exactly sure what the “My Forest” page was, and would have liked more context.

Testing Round Two

With an upgraded, mid-fidelity prototype made in Figma, we set out to test our new version again with five volunteers. Our second prototype included a more colorful interface, progress bar for the tree, easy-to-find navigation, a full-screen graphic forest, list of environmental topics, and a simple, familiar layout (familiar when it comes to other well known sites, like YouTube).

The Results

• The quizzes allowed testers to think critically and create real-world personal goals.
• They found the app easy to navigate.
• Many were looking for more graphics and imagery that could enhance the “fun” side of the app.
• Most believed the “About Us” page would hardly be used and is not necessary in the main navigation bar.

Testing Round Three

After an initial test with an updated, high-fidelity prototype, we later tested small iterations of the app with minor adjustments based on user feedback. Our updated prototype included a brighter color scheme, onboarding, a cleaner layout, and compact side and drop-down menus.

The Results

• The color scheme and graphics enhanced and appealed to tester’s experiences with the app by making the learning aspect more playful.
• The updated layout and hidden side menu allowed users to quickly navigate through main content.
• There was some confusion around wording of menu and button items.
• When asked, users would like to see a social media “share” button either on the “My Forest” page, or in a personalized user profile.

The Finale

Our final deliverable sees clearer wording, a smoother layout, and ability to connect with friends through social media sharing. Time constraints did not allow us to implement a full user profile. The final product is a high-fidelity prototype.

View the TreeHuggers app prototype here

Epilogue: What We Learned

• If a user cannot take any action on a screen (except to go to another screen), said screen is likely not important to keep.
• The main/home page should help guide the user to accomplish their goals for the app (i.e. help them do what they came to do).
• Test early, test often. Having a person’s thoughts and goals in mind even in the ideation phase can help drastically improve and speed up the development process.

TreeHuggers II: The Sequel

Two years after the original was created, I decided that it needed an upgrade to a modern, and even more user-friendly, look. Taking most of the original features, I revamped the interface, as well as adding some other features that we didn’t get to previously. Additional features were implemented based on research and their performance and use in popular websites and app .Features include labels for each topic and media type, to allow for quicker navigation; ability to share and save media; a user profile implemented in the “My Forest” page (putting all social aspects of the app in one place); and cleaner organization of articles/videos/podcasts.

View the TreeHuggers Sequel app prototype here

The Fight for the Future

While this project was a way for my team and I to learn more about the UX process, I still believe it is important to stay educated on topics that can impact all of us and our futures. Climate change is no joke, and it’s coming after all of us, unless we take action. Whether that is urging the people in power to propose important policies, or looking at our own everyday habits and making a change. Either way, change begins with education.