Deal with ambiguities and define the problems

Without jumping into the solutions directly, I did three things to better uncover user needs and understand the problems of building an asset page: 
• Performed a competitive analysis (How are others solving this problem?)
• Analyzed the target users
• Talked with the project manager to gain insights
‍

Based on the research, I found that the asset page is a place for our customers to deliver videos to end users. The business objective is to make it easy for customers to deliver videos to end users, resulting in increased user engagement and much higher quality, uninterrupted viewing experience.

I discovered three user problems through the research:
Customers might have large amount of video data. How might we help customers scan and find data easily?  
Customers might have various kinds of video data. How might we help users edit data efficiently?
How might we monitor video status and investigate on unexpected spike? 

Define the direction

There were many ideas and suggestions brought up during the research, however, not all of them can be implemented. After a couple of rounds of review with the PM, we identified a list of feasible features for the beta version. We were able to initial the following user stories:
• As a user, I want to create new video assets, so it helps me get started on the dashboard.
• As a user, I want to preview my uploaded videos and delete or archive them if I want.
• As a user, I want to know the active or inactive status of my videos (ready, processing , failed, initialized).
•  As a user, I want to edit a video, including its title, metadata and tags, so I need the dashboard to give me more flexibility for data updating.
- As a user, I want to preview large amounts of data, so I need a table to display the data.
Based on user stories, I developed the user flows for first time users and existing users.

Explore and Iterate

Solution 1: The asset page shows the order of importance divided into two pages. It presents users’ most important and necessary data first.

The first solution I devised to avoid information overload among users accessing various kinds of data was to use only four columns to display the most important and necessary data. If users want to gain more information about a particular asset, they can click the asset and edit the video data on another page. The cons of this solution is that it is hard to preview all the data with a single click.

Solution 2: Users can move and hide columns to access to all the video data and edit data on the same page.

I came up a second, more straightforward, for previewing all data with one click. The drawback of this solution is that, depending on the data, the table will look full and inconsistent because of various empty cells and heights. This may make it difficult for users to scan the information quickly and make decisions efficiently. Also, It is hard to fit all the data into columns horizontally and edit the metadata in a small column. 

User Testing

I did preference testing and short survey with target users and talked with the team internally to gain the feedback. During the testing, all the target users preferred the first solution for displaying and editing the data. Users had difficulty understanding the icons for actions column and wanted to have some instructions gaining proficiency with domain knowledge of status.

However, the current layout of the edit data page was not working because displaying metadata will take a lot of space, and it is important to show the video ID on the edit page based on the feedback from the team.

Final Design Walkthrough

I worked with engineers to create a custom design system using tailwind CSS. I made two distinct designs, the beta and the final versions, based on time constraints and shifting priorities. We will use beta version for beta testing, and will implement the final version when we decide to launch it to the public commercially.

Help users scan and edit information quickly

Based on the user testing, we decided to adopt solution 1 as the final user flow. To display data, the dashboard uses a table list to present the users' most important and necessary information that they care the most. The two-column layout displays the full content and prevents information overload when users are editing the data.

In addition, I used different colors to represent different video statuses and provided the instructional overlays in order to help users to understand the context and how to complete their tasks. I de-prioritized the archive feature since it will affect the data usage and cause some confusion based on feedback.

MVP Released

Final version

Provide information that help users take action

We had to account for and map every state and interaction that makes the user experience dynamic, provides valuable user feedback in the application, and directs audiences to the actions we intend for them to take.

MVP Released Empty State

Final Version Other States

Design Spec

To create a smooth designer-developer handoff, I worked closely with developers to deliver design specs for different breakpoints (320, 768, 1024, 1280), and cover all the possible button states and form element states.