Project Endangered

Figma | Illustrator | JavaScript React | SCSS

The concept of project endangered is to tell the story of four endangered animals told through an interactive web experience. This is an educational experience that is targeted at students between the ages of 12-17. Our main objectives is to increase awareness about the four endangered animals using an informative website, create a full-stack web application with a client web server and allow users to explore each animals habitat through an immersive experience.

Wireframes

These wireframes were created in Figma to demonstrate the overall look and flow for both desktop and mobile. This allowed better visualization of the navigation, content flow, presentation of content, and layout of the website

For the website’s UI, specifications were created for all interactive components. These specs include definitions for size, spacing, states, typography, and any animations. This was done to create components that behave in a way that will enhance the user’s experience. This also helped to ensure consistency across the website and the immersive experience.

Component Specifications

Branding

For the website’s branding, we also created this logo to use for the website. This colour palette is intended to be the base colour used in the typography and UI elements on the website

Mockups

Mockups were created in Figma for each of the animal pages for both desktop and mobile. Each set of mockups contain all the illustration assets, as well as informative content. These have been used as references during development. These mockups were then taken further to create an interactive prototype. Mockups where also created for each of the immersive experiences to visualize the design on desktop, mobile, and Oculus devices. (All 2D and 3D assets where created by our team).

Usability Testing

We utilized usability testing to enhance the website's functionality and user experience. Initially, we ensured compliance with WCAG's AA guidelines by conducting colour contrast checks for all text and icons to improve accessibility.

We conducted user tests with our target audience. We initiated the process with a user experience questionnaire, allowing participants to explore the functional prototype freely. Following this, participants completed a brief questionnaire addressing their overall experience, preferences, and navigation difficulties. Then conducted structured think-aloud tests with participants. These tests involved participants walking through each page, sharing their thoughts, and completing specific tasks. These tasks assessed layout comprehension, discoverability of interactive elements, and navigation.

Website Demo

This website demo if for the informative section of the project. It's built using the React framework for dynamic functionality and leverages SCSS for styling. To ensure widespread accessibility, we've deployed it on GitHub Pages. Additionally, we've enhanced its accessibility by securing a Google domain, making it accessible via the URL project-endangered.com.