A-M-V.ORG
Website Redesign
Once the hub for AMVs, this antique sits unused and forgotten as modern streaming platforms like Youtube and Vimeo dominate the digital media landscape. Tasked with revitalizing the Org's website, I took it upon myself to research users and competitors, design a new interface, and conduct user tests to ensure that everything runs smoothly.
Primary Designer
Ongoing
Research, UI Design, Usability Testing
Design Process
DISCOVER
Problem Statement
Designed in the early 2000s, the site saw decreased engagement due to outdated systems and difficulty in use. Below are some of the most glaring issues I found:
Navigation Menu is too small and too convuluted
Search is more complicated than necessary
This logo button switched between the main site and the forum, which is confusing.
Too much white (and gray) space in the margins
PAIN POINTS
Pain Point
Why a pain?
Suggested Solutions
User Control & Communication
Hard to contact admins & some controls require admin permissions
Make it easier to communicate with admins
Video Management & Upload Issues
Difficult video upload process & difficult to manage existing videos
Streamline video upload process, consider designing a video manager
Navigation Issues
Hard to navigate the site, Outdated UI and difficult to comprehend by modern users
Reimagine interface & prioritize most needed features
Ability to maintain the site for free
The site is maintained through donations or out-of-pocket from the admins
Promote merch store and donations -- in fact, many did not know the store existed
User Interaction
Users have little interaction with each another besides the forum
Feature contests to encourage participation, & Connect editors to other resources (i.e. Discord)
RESEARCH
Survey Results
90% of 45 survey respondents cited confusing navigation and upload processes as reasons for not using the site. Below is what the most active users primarily use it for:
Competitor Benchmarking
A few of our competitors included YouTube, Vimeo, Dailymotion, Ted, & Facebook/Meta.
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
-
and more!
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 focused on the first two 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.
IDEATE
Feature Roadmap
To focus on the user, I sorted the features into must-haves and nice-to-haves to prioritize the most needed ones for the prototype.
User Flows
Below features the new design's 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
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 user's needs:
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
Hi-Fidelity Prototype
After finalizing the UI library, I applied what I designed to the mid-fidelity wireframes and make the hi-fidelity prototype.
Landing Page
Editor Profile
Upload Video
Video Page
TESTING
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. Users prioritize contests over videos, so I moved the featured event section to the top for immediate visibility.
BEFORE
AFTER
2. Navigation: To improve usability, I reorganized 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 signup reasons on the login page. Shifting some details to the FAQ or terms should ease their anxiety.
BEFORE
AFTER
Reflection & Future
I loved this project, from discovery to high-fidelity prototyping. As an AMV editor, contributing to this tight-knit community was rewarding, pushing me to find creative solutions for a community I deeply care about.
This project taught me intuitive navigation, clean information architecture, and feature prioritization. In the future, I'd like to conduct more A/B testing sessions.
With the design in place, we're developing the site and planning a mobile-friendly version or app for wider accessibility.
