Interactive Design & Development • 2022
Whale Box.
Whale Box is a guided, interactive web application that invites users to learn about the physical and social characteristics of a narwhal playfully brought to life using animated 3D models and 2D illustrations.
This project was a collaborative effort between Amy Assabgui, Aimy Wang, Amy Zhang, Shay, Saharan, Jenn Shao, Abeeshan Selvabaskaran and myself.
OVERVIEW
Youth, elementary & middle school
AUDIENCE
FORMAT
Web-based multimedia application
Narrative & storyboarding lead, UI/UX design, visual development, asset design and production, sound design
ROLE
Figma, Procreate, Photoshop, After Effects, Blender, Unity
TOOLS
Prof. Michael Corrin, University of Toronto
CLIENT
DOCUMENTATION
DEMO
VIDEO WALKTHROUGH
PROCESS WORK
PRE-PRODUCTION
Whale Box is a guided tour of physical and social characteristics of different whales and marine animals. It is intended for wildlife conservation outreach and education. Although linear narratives (e.g. documentaries) exist to serve this purpose, there are few interactive experiences that invite exploration and educate users at their own pace.
To fill this gap, Whale Box was designed to meet the following objectives:
Create a didactic narrative tailored to our audience that features unique facts about marine wildlife
Develop a visual-focused, interactive application that invites exploration and uses scaffolding to guide users
Design and evaluate the usability of the application
All of the documentation for the project can be found in our design document, which you can read on the right, or access on Figma.
Challenge
Workflow
For this project, we used a design thinking approach. Based on initial research and a scan of existing resources, we identified a need and began by ideating as a group. We iterated on our work collectively within and between each stage of the design and development process.
Team members contributed to different stages of the project, and each stage was coordinated by a team lead. The project itself had an overall manager that delegated tasks and oversaw weekly milestones.
User Journey
The user journey was a collaborative effort between the entire team. Once a content outline was created, members diverged to sketch the potential user experience, and converged to create a collective user journey. This user journey served as the basis for collaborative prototyping, storyboard drafting, animation planning and script writing.
Refined User Journey Map & Storyboarding
After we refined our concept, we created a user journey map to visualize the paths a user may take through the application. Once this user journey map was created, we designed storyboards and animations for sections and hotspots within the application. These storyboards served as the basis for our mid-fidelity prototype, which included interactions and copy.
PRODUCTION & Development
PROCESS WORK
The user interface was designed to be simple and straightforward. Our goal was to make the 3D models and 2D illustrations the focus of our application.
UI Design
Minimalistic, low-poly 3D models of marine life and other animals were a key point of inspiration for this project. We used a similar visual style in Whale Box’s 3D models and carried this style throughout the application.
Asset Design
The cube layout was created to reflect the topics of interest identified in our research. Each section of the cube contained a group of 3D assets that interact with one another to enact a story within each hotspot. We prioritized fun and comprehension by designing simplified, playful versions of real-life interactions.
3D Assets
2D assets were created with clarity and appeal in mind. The final colour palette was chosen to complement the 3D assets while maintaining a distinct style. Subtle animations enacted the story in the hotspot.
2D Assets
Music and sound effects were used to complement the look and feel, and enhance the interactive features of Whale Box. We designed four categories of sound to create a more immersive experience.
Sound Design
We developed a prototype of Whale Box in Unity (version 2021.2.12f1, built-in renderer). We documented all of our learnings so we could easily refer back to our solutions to specific problems. This was incredibly useful for Whale Box, as well as for future Unity projects. A portion of the team went a step further and tested this prototype with our target audience.
Development
We designed, conducted, and evaluated the results of usability testing performed on the Whale Box application. The process and analysis of our findings is outlined in the usability report, which you can read here.