A-M-V.ORG
Website Redesign
AMV.org is a legacy multimedia archive to browse and watch anime music videos. Despite its rich library, the platform’s navigation and discovery workflows caused confusion and friction for users seeking to explore videos or browse. The challenge was to optimize key user workflows to improve discoverability and reduce drop-off, ultimately supporting deeper engagement across varying user goals.
Primary Designer
Ongoing
UX Strategy, Workflow Optimization, usability research
Design Process
Discover
Research
Ideate
Design
Test
Problem & Opportunity
THE PROBLEM
Users struggled to seamlessly discover related media and navigate between content. Users often exited the site because they couldn’t easily find what to explore next
Design Challenge
Optimize core navigation & content discovery workflows to support smoother task transitions and sustained engagement across the site.
Navigation too small & convuluted
Search bar is tiny and not clearly visible
Too much white (and gray) space in margins
Logo button switches between the main site and the forum, which is confusing.
News/Updates is consistently outdated and not relevant to users
Role & Scope
I led the end-to-end user experience design for this redesign, including user research, workflow analysis, navigation optimization, and UI component definition. My work focused on simplifying core tasks — such as content discovery, browsing efficiency, and task transitions — while establishing reusable patterns to support scalability and consistency across the site.
Research & Insights
Survey
90% of 45 survey respondents cited confusing navigation and upload processes as reasons for disliking the site. Below is what active users primarily use it for:
Competitor Analysis
A few of our competitors included YouTube, Vimeo, Dailymotion, Ted, & Facebook/Meta.
This analysis highlights features that our competitors uses for exceptional user experiences, including:
-
Browser/app video upload
-
Simplified Search Function
-
Notifications
-
Playlist Feature
-
Comments and Likes
-
and more!
Affinity Map
A few common themes came up in research:
-
Users want to upload & find content easily
-
Users are confused by the site navigation
-
Users want more control of their content
I focused on the first 2 priorities while finding a solution that met user needs and preserved the site's goal of cataloging all AMVs.
"I would appreciate [it if] the [method] to upload AMVs and explore the [website] is easier."
- Annonymous Participant
"At first glance, the look can feel a bit much and make it hard to tell what button/link it's suppose to be for."
- Annonymous Participant
Personas
Using survey and interview data, I created these personas to prioritize the most useful features for users.
Problem Statement: Ellen is a veteran editor who needs to easily find videos because she wants to find inspiration for her content.
Problem Statement: Gerwas is a newbie editor who needs an easier way to upload his work because he finds it difficult to understand how the interface works.
Research Insights
Content Management Issues
Profiles and videos are hard to manage, as a lot of it it requires admin requests.
Limited Interaction
Users find it hard to interact with others, besides the forum or external channels.
Outdated Updates
Updates to the news page is irrelevant and almost always outdated.
Navigation Confusion
Users find it difficult to navigate, and the feedback is not intuitive.
Initial User Flow from Research
Key Findings
-
Users frequently struggled to find related videos after finishing watching a piece of content.
-
First-time visitors felt overwhelmed by information density in the navigation.
-
Repeat users expressed frustration when core actions (like contributing or saving favorites) were buried.
-
Lack of clear paths caused users to exit the platform early instead of exploring more.
How Might We
Improve clarity and efficiency of content navigation
How Might We
Support sustained engagement through clear discovery paths
How Might We
Define reusable UI patterns to enhance consistency & scalability
design strategy and flows
Mapping User Workflow
The following user/task flows were created to address some of the opportunity areas identified in the research:
-
Navigation hierarchy is too deep
-
Related content not surfaced at optimal moments
-
Back button + breadcrumbs underutilized
TASK FLOW 1: VIDEO UPLOAD
TASK FLOW 2: ONBOARDING
Interaction & UI Patterns
Sketches
Lo-Fidelity Prototype
The new design has a focus on accessibility, intuitive navigation, and a more simplistic upload process.
Landing Page
Editor Profile
Upload Video
Video Page
Design Systems & Components
Defined reusable UI components and interaction patterns to support consistency and scalable implementation across the site.
COLOR PALETTE
PRIMARY COLORS
Primary | #F97924
Call-To-Actions
Focused/Active states
Secondary | #58A0D7
Links
​
Tertiary | #86C440
Accenting
Illustrations
TEXT COLORS
Dark | #0E0E0E
Overlays
Shadows
Headings
Text | #1E1E1E
Body Text
​
​
Subtle | #575757
Helper Text
Deemphasized Text
​
ACCENT COLORS
Success | #31D0AA
Valid fields
Success messages
Accent | #FFF0D8
Accent color/Hairlines
Subtle backgrounds
Light | #F1F1F1
Light mode background
Dialogs/alerts
TYPOGRAPHY
Title/Header
Asap Bold 60px
Header 2
Asap Bold 48px
Header 3
Asap Bold 36px
BUTTON TEXT
Asap Bold 18px
Body Text Bold
Inter Bold 18px
Body Text
Inter Regular 18px
Link Text
Inter Bold 16px
Hi-Fidelity Prototype
The hi-fidelity prototype addressed the issues from the research by:
-
Reducing information overload by simplifying the navigation and placing it at the top of the page
-
Clarified task success with clearer labels
-
Reduce number of steps for the user to upload a video
Landing Page
Editor Profile
Upload Video
Video Page
testing & outcomes
Usability Results
-
Users completed core navigation tasks (finding related content) with fewer errors & less hesitation in post-iteration testing.
-
Participants reported content discovery felt “more intuitive” & "less frustrating.”
1. Users care more for contests than videos; the featured event section is moved to the top for immediate visibility.
BEFORE
AFTER
Priority Revisions
Using info from usability tests, I applied the following changes to the prototype:
2. I reorganized the navigation into four main categories: Contests, Forum, About, and Support Us. I also refined the logo and reduced the header size to save space.
BEFORE
AFTER
3. Users felt overwhelmed by excessive info on the login page. Shifting some details to the FAQ and providing a footer on pages without an infinite scroll should ease some anxiety.
BEFORE
AFTER
Strategic Reflection
These improvements addressed:
-
Clearer workflows
-
Increased accessibility of related content
-
Smoother paths between discovery and consumption
Lessons Learned & Next Steps
I thoroughly enjoyed this project, from discovery to high-fidelity prototyping. As an editor, contributing to it was rewarding and pushed me to find creative solutions to solve the user issues.
What I'd Measure Next
-
track click paths on related content sections
-
view time on task
-
repeat visit frequency
Future Opportunities
-
A/B test navigation variants
-
introduce personalized recommendations
-
add saved lists for logged-in users
With the core design done, the site is currently under development.
