Pocket Anime

Prototype

CLASS PROJECT • MOBILE APPLICATION • UI PROTOTYPING

A personal anime cataloging app for recommending appropriate selections conveniently and efficiently.

Focus:
Functionality

Date:
February 2022

Tools:
ProtoPie
GIMP

Level:
Medium Fidelity

As part of a class assignment, I was to make a medium-fidelity prototype focused on micro-interactions and animations with consideration to standards and expectations. User-based Testing was conducted with a think-aloud protocol and an unstructured interview using benchmark tasks to refine the design.

Functionality and Enjoyment were prioritized.

Hovering

Dragging one of the cards, the user will be taken to the “sorting” screen where the card can be stored in a list of already-seen or to-be-watched anime. When hovering the card over the icons at the bottom of the screen, they will expand to confirm the placement.

Wheel Drag

The user may spin the wheels manually with their finger to mimic the sensation of spinning an actual roulette wheel. To create a dynamic experience, the wheels are dragged along by the user’s finger to provide feedback confirming that the user is interacting with the wheel.

Sign-In Button

Upon filling in the text fields, the button labeled “Sign In” will increase in opacity to insinuate that the button is now clickable to allow the user to login.

Profile Icon

Clicking the icon in the top right of the screen will open up a container with several options. The icon increases in opacity to inform the user the icon had been selected.

Lock Toggle

Both wheels each have a lock that when toggled on will make the corresponding wheel static. Following standards, the lock is confirmed by the associated dot moving over and the background changing color.

Spinning Wheels

Pressing “Spin” will rotate the wheels for a fixed duration. While other sites/ apps provide a random recommendation with a simple button, this animation is meant to make the experience more entertaining.

Passage of Time

Movement of the 3 white dots give the impression that the system is loading content and serve as a confirmation to the user's prior action.

Instructional Arrows

This animation is only shown the first time the user reaches this screen. It is meant to grab attention and inform that the user can directly interact with the wheels.

Page Building

Arriving at the daily recommendations screen, 5 different numbered cards are presented. These cards fall in descending order. This animation only occurs once each time the app is opened.

Box Selection

While loading the anime selection (as depicted by the white dots), the rounded box titled “Anime” will contract. Upon loading completion, the box will expand and reveal the anime selection.

Page Transition

Swap between the anime roulette screen and home screen by tapping on the dice icon and the home icon respectively. This swap is represented to the user by the slide-in and slide-out animation.

Following a T-format, the overall design of the medium-fidelity prototype was kept broad to go functionally in-depth for the following two features:

Daily Recommendations

5 card suggestions based on the user's preferences. Cards are sorted into "My Watch List" or "Anime I've Seen List". Preferences will be updated based on or lack of sorting.

Touch and hold a card to drag/ sort the card.

Tap a card to expand it.

"Dragging the files around is fun when it works" - User 1

"You should add something like arrows to show that cards are interactable" - User 2

Anime Roulette

Two rotatable wheels are used to select a genre and sub-genre. An anime recommendation is then pulled from a hypothetical database that correlates to the chosen categories

Wheels can be dragged into a category or spun with a mouse flick while holding down the click, then releasing it.

"I really like the wheels, they are interactive and look real with the subtle delay of the spin" - User 2

A button spins both wheels.

Locks to prevent spinning.

"I want to be able to select what options are on the wheels" - User 1

Reflection

Priority Focus. Addressing your main features first and then building the rest of the features around the foundation. See if these core features work before spending time building something that may turn out differently than expected.

Tool Limitations. Choosing the right tool for prototyping is important. Some tools may be quick and easy to use but lack breadth of capabilities.

Future design efforts would look to make these lists highly customizable and promote personalization, but for this medium-fidelity prototype, they are left as still images. It is the same case for setting up the user’s preferences that inform the daily recommendations, which will be initially set up by a personality survey given when the user logins to the app with a new account.

Back to all projects

Pocket Anime

Focus: Functionality

Date: February 2022

Tools: ProtoPie GIMP

Level: Medium Fidelity

Focus:
Functionality

Date:
February 2022

Tools:
ProtoPie
GIMP

Level:
Medium Fidelity