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.
Amazon customers can now add videos (upload) to their favorite products through the Related Video Shorts Widget on Product Detail Pages.
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.
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.
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.
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.
We decided to create a feature that helps customers to record and upload videos related to products.
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.
Once the goal was defined, I determined the user flow of recording and uploading a video.
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.
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.
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.
At the beginning of the design process I created wireframes for testing purposes. Focus on user flows, navigation, rough layouts, and interactions.
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.
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.
Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
“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.
Tapping in the "more" icon opens a menu with different options regarding the submitted video.
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.
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.
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.
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.
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.
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.
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.
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).
Encourage users to engage with the new video uploading feature:
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.
I tested the Onboarding process with five participants, looking for usability problems.
I asked questions like:
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.
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.