Upload your own Marvel toy videos

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.

Marvel Universe

Amazon Video Shopping Experience

Amazon customers can now add videos (upload) to their favorite Marvel toys through a Related Video Shorts portal on the Toys and Movies online department.

Project Details

  • Company: Amazon
  • Product: Campaign
  • Year: 2018
  • Tools:

My role

Designing, coordinating with the toys content team, getting the Marvel video upload page put together, and getting it out in front of customers on the gateway page and the toys department page in lest than four weeks.

You got me at Marvel

As a comic lover and fan of the World of Marvel, the motivation of completing the following project was not an issue even though I have to take full responsibility for the delivery.

Goal

Allowing customers to upload videos about the new line of toys dedicated to the new Avengers Infinity War movie was the objective of the project. I was excited to give the opportunity to those Marvel lovers to describe their experience with the new toys via creating and uploading a video. As a result, these videos might influence other customers in their final purchase decision.

Original Plan

Initially, the idea consisted of me working as a UX designer to deliver the experience of users selecting a toy, that they have recently purchased, and simplify the process of uploading a video about the toy.

The Toys & Movies team provides us with a list of toys from which users can associate a video with. As a result, the task of searching and picking a toy was removed from the formula. I visioned the design to be very straightforward.

Image shows Tasks wireframes

Ideate

Sketching

Each toy shows, to its right, a carousel of uploaded videos. A "Be the first one to upload a video" link shows when a toy has not a video associated yet. Clicking on the video will open the video upload page.

Image shows Tasks wireframes
I have been sketching my vague ideas to think through them more clearly. I love sketching because it forces me to visualize how things come together.

Wireframing

Created wireframes in order to test UI components and patterns. Color nor images were not included as they were distractors from the main purpose. Show flow and interactions.

Image shows wireframes
Wireframe that shows the layout for the page

When suddenly...

Prototyping

When working on one of my favorite phases of HCD process, prototyping; Bad news about the project.

“You wouldn't like me when I'm hungry...”
Bruce Banner

Due to technical and security constraints, the development of the page would take longer than expected so the decision was not to involve developers on the project.

Image shows prototype.
HTML prototype (interrupted)

"Bias for action"

It is impossible for the engineers to build the "Upload your own toy video" in such as short time.

“With Great Power Comes Great Responsibility”
May Parker

Avengers, assemble!

Building a page from scratch

There is might be a way to design and build a simple page whose main function is to display toys and videos, no transaction required.

Internal tools

Amazon has great content management tools that allow Amazonians to create and upload simple content to pages. Also, it has a design content tool that helps, with limitations, to create widgets to be displayed on pages. All these tools were new to me. They are orientated to developers and PMs. Time to wear a different hat!

The learning curve took some time and frustration. Again, very limited tools for designing but great to deliver content.

Design constraints

  • Layout.
  • System Widget based.
  • No HTML or CSS allowed.
  • No web controls.
  • No user testing. *sigh.

Well, let's do this.

The layout of the page was limited. All the components of the page are widgets that help to display the content. I have to design and built the necessary widgets in order to be able to display Toys and Videos.

I have intentionally omitted confidential data related to the capabilites of the tools used.

It is unbelievable how motivation and imagination can solve design constraints. I was really interested in completing the project. For customers and personal reasons. We know the customer's reasons, a way to provide helpful feedback to others users when buying. However, as a UX designer, it was very important for me to present a satisfactory solution even though I have to be the only character in the UCD process.

Result

The final design is not close to what I was envisioning at the beginning of the project due to the design limitations. However, leadership from both organizations agreed with the efforts and results put on this project by a UX designer.

Final experience at amazon.com.
Final experience at amazon.com. Desktop, tablet and mobile.

Mobile experience

The page created needed to be accessible by any type of device. The content management tool allowed me to create versions for different viewports.

The biggest challenge consisted of adjusting the visuals and the content of the toys and videos in a meaningful way for users to be able to understand the uploading process for videos.

Tablet and Phone experiece.
Phone and Tablet experiece.

Visuals

Part of the project consisted of creating the visuals for the experience. The page should contain a graphic that helps users to understand the process of uploading videos. Also, we needed a "Hero" graphic to be located in different locations to announce the ability to upload videos for toys.

The use of Sketch and Illustrator was fundamental to complete this task.

Welcome banner and Hero image used on page at amazon.com.
Welcome banner and Hero image used on page at amazon.com.

In harmony with our look and feel, I designed the illustrations to keep the look fresh, diverse and modern. I was also looking for to catch kids attention when scanning the page.

Illustrations used for onboarding
Illustrations used for "onboarding".
“Everything’s going to work out exactly the way it’s supposed to...”
Tony Stark

Endgame

The Upload Toy Video Page has had a positive impact on the video uploading and viewing experience. The video uploading rate has been significantly increased which means customers like the idea of creating videos.

I have intentionally omitted confidential data related to the capabilites of the tools used.

Welcome banner and Hero image used on page at amazon.com.
Promo.
Carlos Marin Burgos
Website Designed and Hand-Coded by Carlos Marin Burgos