2022-2023

INTERACTION, UI/UX, ILLUSTRATION

Endangered Species Web App

An educational interactive web app designed for children to learn about some of the most endangered species in the world today. Developed using the Google Maps API, Next.js 14, and TailwindCSS.

Overview

Key Features

KEY FEATURE 01

Follow along with Ranger Quinn.

Ranger Quinn is designed to guide the user throughout the interactive experience.
‍
Creating a character to act as a guide for the user makes the experience more personal. Children are able to engage more with the information because of Ranger Quinn’s friendly appearance and personality.

KEY FEATURE 02

Interact with the information in two different ways.

Having two display modes allows the user to tailor their experience to what they find most engaging. The map view visualizes the endangered species on a geographic scale, while the gallery view shows what the species look like.

On mobile screens, the gallery turns into a swipeable slideshow for easier navigation.

KEY FEATURE 03

Test your learning with a quiz.

Users can better retain the information they learned using the quiz feature.

Ranger Quinn gives feedback on quiz questions, changing her expression and responses based on the user’s answers.

The Design Process

01

The Brief

This web app originally began as a class project for my Interactive Design course. I was tasked to design and develop an interactive web app using a JSON dataset and the Google Maps API.

02

Finding a Story to Tell

I considered three factors when deciding upon the subject of this experience:

1. Visualizing locations
2. Effectively conveying multiple data points
3. Creating a compelling narrative

I ultimately chose endangered species as my subject because I wanted to create something that was educational and about an important topic.

03

Researching and Compiling the Data

Since this experience is intended for children, I wanted to include a small number of endangered species to avoid overwhelming the user with information.

I included a mix of both well-known and lesser-known species to maintain a sense of familiarity while also invoking curiosity.

04

Conceptualizing the Visuals

To make the experience more appealing to children, I chose a "safari" theme for the visual aesthetic, calling back to old cartoons and games I played as a child.

During this stage, I came up with Ranger Quinn to give more personality to otherwise anonymous instructions.

05

Illustrating the Visual Assets

To enhance the experience and be more kid-friendly, I illustrated several safari-themed graphics to use throughout the web app.

I modeled Ranger Quinn’s design off of typical safari guide tropes. To give Ranger Quinn a more dynamic personality, I also drew two expressions (happy and sad) to use as responses for the quiz section.

06

Coding the Experience

Once it was time to code the web app, I implemented the Google Maps API using the JSON dataset. I also customized the map by adding animal icons as markers to bring together visual identity of the experience.

Using several JavaScript plugins, I also created an interactive photo gallery and a quiz feature to make the experience more engaging.

Past Iterations

Evolution of the Design

After finishing this project for class, I redesigned both the structure and visual identity of the experience. The design choices of the past two iterations felt arbitrary, so I reevaluated my audience to be more intentional with my design choices.

Given the nature of the dataset, I decided that my target audience should be young children who would navigate the web app with their parents. Similar to how zoos target their interactive features towards children and their families, the features and visual design of this web app should function similarly.

Learnings

There's always room for improvement.

Revisiting this project a year later allowed me to reflect on what the purpose of this app should be. I was able to design with a stronger focus this time, crafting a story and visual identity that was more appropriate for the dataset.

Take advantage of your skills where you can.

Using my digital illustration skills, I was able to enhance the storytelling of this web app by illustrating assets that were more appealing to children. It helped me understand the strengths of being a multidisciplinary designer and how I can best apply my skills.