Interactive Toy - Spring 2024

Digital Pet

UI Design

UI Design

UI Design

Figma

Figma

Figma

Overview

This Digital Pet greatly simulates the popular Tamagotchi from the 90's. The titular character, Sun-Spot, is a loveable and interactable character that can perform a number of tasks for the user, all with the turn of a dial.

Objective

To create an interactive experience with multiple actions, using only a maximum of three inputs

Iterations and Planning

Iterations and Ideas

Site Map

User Flow

Final Designs

Style Choices

The character, Sun-Spot, is stylized after 1930's cartoon characters. This is apparent in their overly exaggerated features, rounded body parts, and "rubberhose" like limbs. Sun-Spot appears on a stage because they always wanted to be the "star" of their own show.


The case is modeled after on old-style television set, with components from multiple different time periods, such as the mood, battery life, and control dial.

Character

Case and Components

Menu and Navigation

All menu interaction is done through the use of the dial on the right side of the television set. Pressing in the dial brings up the menu, with the current mode the user is selecting raised more than the other icons. By turning the dial to the left or right, the user can move to a different mode. Pressing the dial again will take the user to the mode that was currently selected and close the menu.

Main Screens

There are many different activities that Sun-Spot can perform; Dancing, Eating, Sleeping, Magic, and getting Shocked. Different activities can either drain or lower their life force, as well as put them in different moods. Actions can be started by turning the dial to the right to start, and to the left to go back to idling.

As Sun-Spot loses life force, the TV program they inhabit becomes more corrupt and begins to fill with static, until finally, the program is completely corrupted and fries the television.

Prototyping

Wrapping Up

What I Learned

A ton of advanced prototyping went into this project. I learned how to efficiently create drag animation and complex menu interactions without physical buttons to click. The main purpose of this project was to create a large amount of flows and scenarios with only three different ways of interacting with the prototype. Instead of just creating a select, left, and right button, I wanted to explore a more complex and artistic way of interacting with the device.

While this project is highly experimental, it was very fun to learn to create many different assets only using Figma. The 3D look of the case, the dancing and numerous other animations, and character design were all done within Figma itself. This added a bit complexity to the project but was really interesting to incorporate.