Creator portal

I have omitted and obfuscated confidential information in this design case study. All information in this example is my own and does not necessarily reflect the views of Amazon.

Upload graphic

Video Upload

Amazon customers can now add videos (upload) to their favorite products through the Related Video Shorts Widget on Product Detail Pages.

Project Details

  • Company: Amazon
  • Product: Feature
  • Year: 2018
  • Tools: Framer logo

Product problem

Amazon doesn’t have enough coverage for up-to-date and high quality video content. Producing our own videos and partnering with third parties is slow and not scalable.

Hypothesis

Incentivizing our customers and making it easy for them to create videos will give Amazon access to more high-quality content.

This hypothesis can be proven designing an experience that allows customers to upload video content via mobile or desktop. This design case describes the new video uploading experience used by customers at amazon.com.

Image shows Content flywheel
Video content flywheel

My role

I was the sole UX designer on an team composed of 2 developers and a PM. I was responsible for determining the design direction of the project, while collaborating with the rest of the team on the ideation phase.

What is the customer problem or opportunity?

As I envision the idea of allowing customers to upload videos, I need to gather qualitative and quantitative data to support my design thinking and inform to leadership my understanding of what customers want or need.

I partnered with the PM of this project to uncover customers insights. We conducted a series of interviews where we gathered data about customer behaviors and motivations while shopping.

The results of the interviews show that:

  • Customers find very useful to watch videos related to products. Specially, if these videos are made by other customers where product feedback is included.
  • Having followers motivates customers to upload videos.
  • “As an Amazon customer, I want to submit video reviews fast, so I can focus on doing other things.”
  • Have a place for influencers to follow and to watch.

We decided to create a feature that helps customers to record and upload videos related to products.

Video influencer.

Understanding the user

To start off, I created two provisional personas of potential users based on PM knowledge and my understanding of the users. These personas were created using assumptions and without a fully research. However, I could use these personas to re-meeting them again and again to help me to make design decisions when the objective is unclear.

Video recording flow

Once the goal was defined, I determined the user flow of recording and uploading a video.

Uploading an unboxing video process.

How are users getting to this experience?

Ingress options

The video shopping experience team owns the video carousel that is located on the product detail page. This widget shows the videos that are related to the product. We provide videos like side-by-side comparisons, unboxings, how-to’s, or even a simple piece of product advice with other shoppers.

Adding an ingress point in the Related Video Shorts (RVS) Widget makes sense for the users to have the entry point because it is where all the video selection is located. This entry point can be found in both mediums, desktop, and mobile.

Ingresses visuals testing

Ingress design

Participants reacted positively when identifying a camera icon as a visual rather than other types of visual aids.The design is simple and concise. I wanted to encourage the customers to upload videos using an inviting sentence such as "be the first video". Also, the use of a video camera icon within the widget allows customers to have a clear view of what is the purpose of the widget.

Image shows the location to upload video.
Final (current) version for the ingress point (html) 

Product with Related Video Shorts

On the other side, there is a chance that the user faces the situation where there are already videos uploaded. The challenge with this case consists of letting customers to know that there is a feature that allows them to upload videos. The limited real state within the widget helped me to understand that the easy way to announce the video uploading was using a button with a clear text as a action.

Image shows videos and button inviting users to upload videos.
Videos and button inviting users to upload videos.

Wireframing the experience

At the beginning of the design process I created wireframes for testing purposes. Focus on user flows, navigation, rough layouts, and interactions.

Initial sketches.

Step 1.Select media

Clicking on "Upload your video" from the Product Detail page opens the Media selector. Three options are presented to the user: Take a video, Photo library, and Other. This last one allows users to pick videos from services like Dropbox or Google Cloud. The user decides to record a video. The user decides to record a video. The recording feature opens and the user takes a video.

Step 2. Pick the type of video

Next, users can pick between Continuing with the uploading process or Retaking the video. If continuing is the decision, a screen shows the different type of videos from which users can pick from including an "other" option just in case of doubt. The options names are based on user feedback.

Step 3. Metadata and uploading

Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

  • A Progress bar aids users to understand how long the video takes to be uploaded. To facilitate the data input, users can enter the video info while in progress.
  • From this page, Title and Description of the video can be entered.
  • Also, the product info shows the article that the user is associating to the video.
  • Clicking submit sends the information to the servers.

Step 4. Confirmation

“Pending” informs the users about the status of their video until the Moderation team has approved it. “Upload” allows users to upload videos from the media folder.

Step 5. Options

Tapping in the "more" icon opens a menu with different options regarding the submitted video.

Challenges I faced

The flow was tested with users by asking them to complete certain tasks. This exercise was aimed to verify the paths users went through and if they could complete tasks as expected.

Example 1: Pick type of video first

The first iteration asked users to select the media first before selecting the type of video. Some participants manifested the pressure of recording the video first as being the first step in the process. Presenting the categories first helped them to reduce the pressure of recording videos according to the feedback.

Example 2: Upload

The button for uploading videos was not noticed for the majority of the participants.We added a floating action button instead following some design patterns.

Image shows the Title and Status at the top where the more options is located below the video.

We conducted additional usability testing with the same tasks and our new design, which showed an increase in engagement compared to the previous round of testing. Users were able to follow the process of recording and uploading videos without any major issues.

Prototyping

Mobile prototyping with Axure RP

Axure proved to be the best tool of choice for prototyping. Because of tight timelines, I chose to develop a high‐fidelity prototype which, as we know, had both benefits and drawbacks.

The prototype was a powerful tool in creating transparency during the design process. My WYSIWYG experience was the most effective way to gain significant feedback from the team, quorum from developers and approval from leadership.

HTML prototyping for desktop

Desktop uploading and managing videos were also important for the full experience. I developed the following HTML prototype so we could also gather data regarding how customers would react to a desktop experience when uploading and creating videos. Also, it was very useful for developers to take this artifact for front-end coding reference.

Desktop version HTML prototype

UI design

After testing the high fidelity prototype I finalized the design by correcting issues discovered and created a final design artifact for handoff. The UI was based on a fresh and clean look while following the current material design guidelines.

Communicating design

I created sets of specification docs to communicate requirements to engineering. These deliverables consisted of customer journeys and the design system (informing typography, attributes, size rules, button sizing and behaviors, hierarchical content organization, iconography, measures, spacing and styles for all patterns).

Sketch measure was used to give developers what they needed.

Onboarding

Goal

Encourage users to engage with the new video uploading feature:

  • Help them get comfortable by setting expectations for what’ll happen.
  • Provide an obvious way to move forward to that next step.

I created the following concept using sketch. It provides a guidance about how to record a video based on the what category the customer has chosen. I provide tips and an example of a video recorder by a customer.

Image shows the onbarding process.
Onboarding process for uploading videos.

Evaluate

I tested the Onboarding process with five participants, looking for usability problems.

I asked questions like:

  • How could we present the information in a more meaningful way?
  • Does this onbarding process feel like it was designed for you? User Onboarding is the process of increasing the likelihood that new users become successful when adopting a new feature.
  • Is anything missing on the boarding screens?

Framer proved to be the best tool of choice for testing. I chose to develop a high‐fidelity prototype which had both benefits and drawbacks.

The new experience

Introducing the New Experience

Trying it is easy

In your Amazon mobile app or browser, search for any product. You should see a button to “Upload your video”. Tap that button and please submit a video, we would love to see it.

The launch of the Creator Portal feature has had a positive impact on the video uploading and managing uploaded videos experience.

On May 2018, we have approximately a total of x,xxx uploaded videos. The daily average consists of xxx videos a day.

I have intentionally omitted confidential data here.

Image shows the complete path that users follow across the whole solution.
User Flow shows the complete path that users follow across the whole solution.

What I learned

  • Always test your ideas with the correct target audience.
  • User feedback. What I enjoy the most during the process was interacting with the potential customers. I enjoy the moment when the participant allows me to understand through their perspective what they looking for, what they need, what they are struggling with.
Carlos Marin Burgos
Website Designed and Hand-Coded by Carlos Marin Burgos