.avif)
Viewvault is a web app that aims to enhance the anime watching experience. Viewvault tracks the episodes and series a user has watched and calculates the total screen-time and, in this way, a user can become more conscious of their own watching habits.
This project focused on web coding and practicing my ability to problem solve and use code. While the Double Diamond framework typically starts with problem discovery, this project began with a clear solution in mind. So rather than exploring multiple problems, I focused on validating the idea in the discover and define phases, then building the final solution
Role
UI Designer
Web Developer
Web Developer
Collaborators
Sam Gillepsie
Tools
Figma, React, VS Code, GitHub, Balsamiq Wireframes
Duration
3 months
THE PROBLEM
Manually tracking anime episodes across different platforms can be tedious and time-consuming. Existing solutions that I had investigated did not provide me with the features I wanted, and not only that, I wanted an app that aligned with my aesthetic preferences.
Discover
Investigating and validating the problem space.
Online ethnography
From conducting some online ethnography research, from Reddit and Tiktok, it validated my problem space and consolidated the need for an app that tracks specifically, anime, and even shows outside of anime.
Trakt is unnecessarily tracking my anime, and doing it wrong also. Problems following are incorrect widget lineups in TV Shows and Movies Widget Rows.” r/addons4Kodi
I’m looking for a good app/website to keep track of the shows I’ve watched. For a while I’ve just been using chruchylist, but that doesn’t do anything for shows I’ve watched on Netflix, Hulu, and Hidive” r/anime
competitor analysis
From comparing our concept to similar existing apps, we can better understand the essential features and can even identify opportunities to enhance our app for a competitive edge.
Of the 5 competitors investigated, we identified the following features:
Of the 5 competitors investigated, we identified the following features:
100%
Anime episode tracking
80%
Trending anime
60%
Release schedules
20%
Finished watching list
Define
How can we refine our initial concept?
Goals & objectives
The qualitative data from our online ethnography and interviews were collated and organised into an affinity diagram. By categorising our data, not only were we able to simplify our findings, we were also able to combine and strengthen distinctive findings to create key themes and also use our survey findings to consolidate these themes.
Monitor and moderate a user's screen-time and their viewing habits.
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.
Create an aesthetic and functional interface.
Persona
For this project, I created a persona to put my solution into context - is my solution able to solve the problem that I am aiming for?
.avif)
David
20
Anime Addicted
David loves watching anime in his spare time, however, since streaming services encourage continuous watching, he sometimes gets carried away and watches anime for far too long. David needs to track his watching habits in a way that helps keep him accountable and visualise how much time he spends away from doing more productive activities.
Motivations
ANIME!
Wants to self-improve
Frustrations
Streaming platforms encourage continuous watching
Feels guilty when he watches too much anime
Develop
Starting to design the interface.
Wireframes
I started with some wireframes and annotated each element – clearly identifying its purpose and how it contributed to an intuitive UI.
Mobile Wireframes
Desktop Wireframes
Home
Search
Category Filter
Add Page
Screentime Page
Unwatched Series
My Viewvault
DESIGN SYSTEM
User Testing
I also conducted an informal user testing where I asked users to complete key tasks such as tracking an anime and updating their progress, while observing their interactions and noting any pain points. Their feedback helped to refine navigation, improve clarity in UI elements, and enhance the overall user experience before moving forward with further iterations.
Before
After
Mockups
Home
Search
Add Page
Screentime
My Viewvault
Series Page
DATA MODEL
A data model is essential for structuring and organising how information is stored, retrieved, and managed when building the app. It defines relationships between key entities, such as users, anime titles, watch history, and progress tracking. By establishing a clear data model, it allowed me to visualise what needed to be included in the interface and maintain data consistency over all the anime I was including in the app.
Deliver
Coding the final product.
The mobile prototype
Devlopment
For development, I used HTML, CSS and React, as well as Bootstrap and Chart.js.
Bootstrap
Bootstrap was a helpful framework used to build responsive websites.
Chart.js
Chart.js library was used to help visualise the data I needed to record on the website.
Local Storage
The Local Storage property was another feature I implemented to enable personalisation. This ensured that each time a user accessed the app, their saved anime and progress were preserved.
results
The final webapp was successful in demonstrating all the necessary features that I had aimed for – it provides an intuitive way for users to track their watching habits, as well as stay organised and up to date with their favourite series.
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 file, here.
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 file, here.
challenges & takeaways
Since this was my first time using React, I faced several challenges in understanding its core concepts and navigating the JavaScript library effectively. However, through online tutorials, documentation, and hands-on practice, I built a solid foundation in React’s workflow, allowing me to implement dynamic features more efficiently.
This project deepened my knowledge of full-stack development and user-centric design while also honing my problem-solving skills. I tackled various coding challenges, such as integrating different tools and libraries, working with JavaScript properties, and balancing functionality with aesthetics and intuitiveness.
Currently, I feel more confident working withHTML and CSS and have developed a foundational understanding of React. This knowledge strengthens my ability to bridge the gap between designers and developers, enabling better collaboration.
This project deepened my knowledge of full-stack development and user-centric design while also honing my problem-solving skills. I tackled various coding challenges, such as integrating different tools and libraries, working with JavaScript properties, and balancing functionality with aesthetics and intuitiveness.
Currently, I feel more confident working withHTML and CSS and have developed a foundational understanding of React. This knowledge strengthens my ability to bridge the gap between designers and developers, enabling better collaboration.
-min.png)