A-M-V.ORG
Website Redesign
Once the hub for AMVs, A-M-V.org sits forgotten as modern platforms like YouTube and Vimeo dominate the digital media landscape. As such, sharing fan-made art like AMVs is more challenging than ever due to copyright concerns. Tasked with revitalizing the Org's website, I was tasked with researching and identifying the pain points, design a new interface, and ensure the new design answers community needs first and foremost.
Primary Designer
Ongoing
Research, UI Design, Usability Testing
Design Process
Discover
Research
Ideate
Design
Test
DISCOVER
Problem Statement
Designed in the early 2000s, the site saw decreased engagement due to outdated systems and visuals. Below are some of the issues I found while getting a comprehensive understanding of the current 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
RESEARCH
Understanding Scope
When we started, there weren't many specific goals for how the new website would look or function. To gain a better understanding of the scope, I researched how current users interact with the site and potential competitors to understand why users might prefer to use those platforms instead for sharing AMVs.
Survey Results
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 that came up in my user research included:
-
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 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.
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
Deeper Insights
This research revealed the importance of a comprehensive uploading and video management process, as well as navigation feedback to inform users of where they are and how to move about.
It's also difficult for users to manage their content, as the current method of allowing users to delete their own videos requires them to make a formal request to the admin. Editors often have to wait for days, if not weeks, between making an admin request to when their video is deleted from the archives.
I used a 'How Might We' framework to refocus the user challenges and needs from the research opportunities to designing solutions.
How Might We
Make uploads and management easier for the user
How Might We
Ease the learning load on the user to navigate around the site
How Might We
Allow more interaction with other editors' content
IDEATE
User Flows
After some in-house initial testing, the initial user flow was refined to fit a better navigation system -- 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
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
User Interface Design
Before designing the mid-fidelity prototype, I created this 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
BUTTON TEXT
Asap Bold 18px
Body Text Bold
Inter Bold 18px
Body Text
Inter Regular 18px
Link Text
Inter Bold 16px
Hi-Fidelity Prototype
After finalizing the UI library, I applied what I designed to the mid-fidelity wireframes and 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.
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 information from the usability tests, I applied the following changes and more to the high fidelity prototype:
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. On pages without an infinite scroll, a footer is present for added navigational ease.
BEFORE
AFTER
Reflection & Future
I thoroughly enjoyed working on this project, from discovery to high-fidelity prototyping. As an AMV editor, contributing to this project was rewarding, pushing me to find creative solutions for a community I care about.
This process taught me about designing intuitive navigation, building a clean information architecture, and how to do 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.
