Jason Eng

ViewVault • 2024

#Web Programming #UI Design #Graphic Design

Tools: Balsamiq Wireframes • Figma • Adobe Illustrator • Visual Studio Code • GitHub • Alpine.js • Bootstrap

THE DESIGN CHALLENGE

The anime genre is extremely extensive, often having lots of new releases every week.

As an avid anime watcher, I and other anime enthusiasts sometimes find ourselves struggling to remember which episodes we're up to, especially when watching multiple series at once on online streaming sites that don’t keep track of the episodes we've watched.

How can we help users to keep track of their watching habits and improve their watching experience?

THE SOLUTION

I wanted the solution to include all the essential features a potential user would need, while also ensuring it was aesthetic and had intuitive functionality.

ViewVault is an app that aims to track a user’s watching habits, particularly in anime. Users can add popular series that are highly rated or add their own new shows to track.

Solution goals:‍

Reveal and keep users up to date with popular anime/shows that are popular among the ViewVault community
Provide a means to help users keep track of their watch history 
Monitor and moderate a user’s screentime and their viewing habits

Although ViewVault is mainly targeted towards anime watchers, the app can still be used by people outside this scope of anime; for movies, other shows and even YouTube videos to record a person’s media consumption. So, the app’s target audience is any user that wants to track their watching habits, help them remember their watch history or moderate their screentime.

WIREFRAMES

Here, I established the foundations of my design.

Each element is annotated, detailing the intended impact of each visual component on the user.

Click on a wireframe to get a closer look.

Developing our design elements...

DESIGN SYSTEM

Hi-fidelity mockups developed in Figma...

HI-FIDELITY MOCKUPS

The Protoype

FINAL PROTOTYPE

SPLASH PAGE

ViewVault was developed using Visual Studio Code and was managed with GitHub, utilising frameworks such as Alpine.js and Bootstrap.

To try out the splash page for yourself, having knowledge of how to navigate VS Code would be helpful. First, click the link, then download and open the zip file. Open the unzipped file using VS Code and follow the "usage" instructions in the ReadMe to open the splash page and test out its features.

Download the splash page file, here.

j.e.

Work

About me

CV

ViewVault