Video Pages Redesign 

How might we help the users to find, share and organize their videos more easily?

cover3
search_ph
vyond_logo_case

As part of the rebrand of Vyond.com from GoAnimate.com, the product team had to replace it’s existing video listing page and video player page. Collaborating with a UX designer, Rohini Kolhar, we toke this opportunity to improve the video pages experience.

TEAM

Head of Design
Product Owner
UI Designer
UX Designer
Engineers

RESPONSIBILITIES

User research
User interview
Competitor research
User journey map
UI design
Prototyping 

Competitor Analysis

We analysised Vyond’s direct competitors, such as Powtoons, Moovly and Animoto to discover their strength and weaknesses; Besides, I performed an analysis on UXpin, Google Drive, Adobe Spark which were indirect competitors of Vyond.

INSIGHTS

From the analysis we learned that our competitors did not put many resources on their video pages. This might be an opportunity for us if we could improve the page usability and help users to better prepare and plan their workflow before they started making videos.

competitor_dir
Direct competitors
competitor_ind
Indirect competitors

The Users

We interviewed 4 candidates who were active GoAnimate users and we asked about their video making and collaboration experiences. Rohini facilitated the sessions, whereas I observed the users behaviour and toke notes.

guide1aaa
guide2aaa

Insights

Trends and patterns emerged from the user interviews, we identified many user needs and pain points:

FINDING VIDEOS
  • Users had problems finding and sharing videos with coworkers.
  • Users seldom created videos from scratch. They created new videos by copying old videos
  • Thumbnail were too small. They looked the same when users created videos with the same opening scene.
CAPABILITIES TO SHARE
  • It felt complicated to share videos with coworkers  
ORGANIZING VIDEOS
  • Users wanted to separate new videos and "done" videos.
  • Able to bulk delete videos.
EASE OF USE
  • Users did not know that they could drag and drop videos to the folder list on the right.
  • They thought dragging the item and then scrolling it all the way back up to the folder list on the right was painful.
  • The “Copy” button needed to be more prominent. Now it is hidden under “ …"  
Video-page_-Affinity-Map3
Affinity Map- Video Pages

User Journey

Persona and journey map were created to help identifying user’s problems.
Rohini and I printed out copies of the journey map and posted them on the office walls, hoping to engage people from different teams

journey_map
Journey map

Ideations

From the affinity mapping and persona development exercises, we identified the primary user goals, ie. Find the right video and share with the team.

ideation_1

Primary goals defined

ideation_userflow_1
Primary user flow designed by Rohini Kolhar
ideation_wireframe_1
Wireframe designed by Rohini Kolhar

Find & View Videos Easily

We went through several rounds of ideating for the video page designs. Using feedbacks from the management and development team, we were able to narrow down and created more finished mockups.  

before_vlp
Before
Old video page with limited features. Videos were hard to find.
after_vlp
After
New video page with search, folder structures, thumbnail preview and share all at one page.

Search Bar 

HIDING COMPLEXITY

Rather than having the search bar taken up spaces on the top bar, why not displaying it first as an icon button and revealed the input box as the users clicked on it?

I displayed the “Search" icon next to the “Make a video” button, because from research, we learned that user either created a video from scratch ("Make a video" button) or by editing an old video (Search bar).

topbar
search_auto
Search videos by team member ID and video title

Autosuggest

Autosuggest saved user’s searching time and reduced errors of making typos.

Recent Search

Recent searches reduce searching time. Results are easier to scan by categorised into “Email” and “User”.

search_recent
Search dropdown showed recent search history
search_sort
Sort dropdown

Sort

All Videos can be sorted by "Last modified”, “Creator” and “Video title"

Specifications 

UX and UI designers worked together to define the rules of the Search behavior patterns.

search_spec
Search UI specifications

Card UI

Our research informed us that users thought that the video thumbnails too small and hard to glance. They wasted a lot of time in carefully labelling their videos. As a result, we introduced a grid view of cards to replace the list format. 

By displaying them in cards and allowing users to preview on the video page, we enabled them to find their videos quickly.


Each card carefully divided informations into meaningful sections.

card_UI1
card_UI2

CARD UI DETAILED SPEC  

Different states and interactions were designed.

CARD ITERATIONS 

I explored different groupings of the card information and showed it to the design team for testing and feedback.  

card_iterations

An Optimized Video Player Page  

The idea of the new video page was a “full page version of the video card” i.e. we reused and repositioned same components.
Based on user research, we removed the less used features, such as “Export to YouTubes; Primary actions such as “Download” and “Shared” features were moved to the top; The main nav bar was eliminated as the user journeys did not suggest that it was needed. 

The result was a more user friendly and immersive viewing experience.  

videopg_old1
BEFORE
Old video player page was a big page with lots of unused features
videopg_new1
AFTER
Page with clear user goals - Viewing, downloading and sharing videos

Learnings 

01 LEARN TO SAY NO

This seemed to be a small project at first, but through the interviews, we discovered more and more usability issues and user needs.

It was overwhelming at first about where and how to fix the problems. In the end we decided to say NO to certain features and put them in the back log.

For example, we were aware that there might be needs for searching "folders names"; However,  we decided to keep it simple and MVP first . If users found a need for it, this would be thought of later.

This required a different mindset because as a designer I wanted to make everything perfect, but I learned to be more agile and put some ideas behind. 

02 KEEP IT SIMPLE AT FIRST

When we replaced the list view with the card view. We were awared of it’s disadvantages, for instance, the size of cards toke up spaces and they looked draggable; However, instead of building both card AND list views, we decided to design with only one view at first and validated it’s effectiveness before creating more UI components.

Next steps would be testing.


© 2021 Joyce Wong