My Role
Lead Product Designer
UX/UI Designer
UX Researcher
UX Writer
Duration
Jan 2023 - Ongoing
Tools
Figma
Photoshop
Discord
Miro
Lucidchart
LucidSpark
Contributions
Competitive Research
Information Architecture
Style Guides
Re-imagine Interface
Prototyping
Usability Testing
Design Process
Discover
Research
Ideate
Design
Test
DISCOVER
Context
WHAT IS AMV.ORG?
Originating in the 1980s, anime music videos invite fans to combine various footage with popular songs, often splicing multiple sources to match the song's theme.
By the mid-2000s, AMVs became a national pastime for nerd-loving teens. AnimeMusicVideos.org was created as a hub for listing and hosting anime music videos before YouTube or TikTok.
SOLUTIONS
-
Streamline video upload process
-
Feature contests & events to encourage participation
-
Ease communications to admins
-
Reimagine interface & prioritize most needed features
-
Promote merch store and donation ops.
-
Connect new editors with community of veterans and teach about AMV history
PAIN POINTS
User Control & Communication
Hard to contact admins & some controls require admin permissions
Video Management & Upload Issues
Difficult video upload process & difficult to manage existing videos
Navigation Issues
Hard to navigate the site
Visual & User Interface
Outdated UI and difficult to comprehend by modern users
User Interaction
Users have little interaction with each another besides the forum
Problem Statement
Designed in the early 2000s, decreased user engagement resulted from outdated or unused systems and its learning difficulty. Below lists the main pain points that contribute to that issue:
RESEARCH
Survey Results
Of our survey participants, 90% out of the 45 responses stated they don't use the current website due to a confusing navigation and upload process. Below is what the most active users primarily use the site for:
FEATURE ANALYSIS
This feature analysis highlights the competitors use for exceptional user experiences including:
-
Browser/app video upload
-
Simplified Search Function
-
Notifications
-
Playlist Feature
-
Comments and Likes
Competitor Benchmarking
A few of our competitors, like YouTube, Vimeo, Dailymotion, Ted, & Facebook/Meta.
YOUTUBE
VIMEO
DAILYMOTION
Affinity Map
A few common themes that came up in my user research included:
-
Users want to easily upload and search videos and content
-
Users are confused with the current navigation of the website.
-
Users want more freedom to control the content they upload
Based on this, I decided to focus on the first two while finding a way to compromise a solution that would address users' needs & maintain the site's goal of cataloging and archiving all AMVs ever created.
"I would appreciate [it if] the [method] to upload AMVs and explore the [website] is easier."
- Interview 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."
- Interview Participant
Personas
Using data from the survey & user interviews, I made these personas to help prioritize the most useful features for the 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.
IDEATE
Feature Roadmap
To stay focused on the user, I sorted the features into must-haves and nice-to-haves to prioritize the most needed ones for the prototype.
TASK FLOW 2: ONBOARDING
TASK FLOW 1: VIDEO UPLOAD
User Flows
Below features the new design's desktop navigation -- addressing one of the main user pain points above. A few of the other task flows includes:
Task Flow 1: Video Upload
Task Flow 2: Onboarding
DESIGN
Lo-Fidelity Wireframes
To start the design, I created these sketches of how some of the most needed pages might look to address the needs of the user:
Mid-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
User Interface Design
Before designing the mid-fidelity prototype, I created this color and typography style guide to ensure consistency across the board.
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
Subtitle/Body Large
Asap Medium 24px
BUTTON TEXT
Asap Bold 18px
Body Text Bold
Inter Bold 18px
Body Text
Inter Regular 18px
Link Text
Inter Bold 16px
Pre Title
Inter Bold 14px
Usability Testing
After developing the high-fidelity prototype, I invited 5 participants to take part in a remote usability test. I prepared a test guide and took verbal/non-verbal cues that pointed out their frustrations due to the layout and features. I also asked follow-up questions at the end of the test to attain additional verbal feedback from the user.
Priority Revisions
Using information gathered from the usability tests, I applied the following changes and more to the high fidelity prototype:
1. During the test, I found that users prioritize contests over watching videos. So I moved the featured event section to the top, for users will be drawn to that section immediately from the home page.
BEFORE
AFTER
2. Navigation: Some content was not going to used as much in the new site, so I rearrange and reprioritize the navigation menu into larger categories, such as Contests, Forum, About, and Support Us.
BEFORE
AFTER
3. Users have expressed some anxiety over too many reasons why they should sign up as a member on the login page. Moving some of that info to the terms and conditions or FAQ pages should relieve any sense of unease.
BEFORE
AFTER
Reflection & Future
Overall, I enjoyed everything in this project from the discovery page to the creating the high-fidelity prototype. As an AMV editor myself, having the opportunity to contribute to such a tight-knit community felt incredibly rewarding. It helped unleash my creativity, forcing me to find creative solutions to solve issues for a community I care about.
I learned a lot while working on this project, including intuitive navigation, a clean information architecture, as well as feature prioritization in order to address user needs. Some things I would like to do better include getting more A/B testing sessions, which may be a possibility for the future.
As much of the design has been put together, we are in the process of finding developers to bring the project to fruition. Some plans also include a mobile app or a mobile-friendly version of this website for users to access across different devices.
