Menu

Online Shopping Motion Graphics

October 2017

Research, Wireframes, Adobe Illustrator, Adobe After Effects, Motion Graphics

Prompt: Enhance the UX of a site or app by utilizing motion design to convey narrative.

I analyzed the user experience of the Gap Canada mobile store. The site uses little to no motion design to convey or enhance the narrative of a user’s online shopping experience. While exploring the mobile site I noticed three UX problems:

  • I don’t want to make my screen a mess and I want to see the key things first, but the navigation bar takes up too much space
  • The user can’t see the progress and don’t understand how long it will take when liking or unliking an item
  • I want to know that action is in progress and I want to know the action is done when adding an item to the cart

These issues follow the critical path of a user buying an item: exploring store → favouriting a product → adding the product to user’s shopping cart. These UX issues could interrupt the critical path, resulting in user frustration and, in turn, fewer purchases. By incorporating motion graphics into Gap Canada’s existing design and checkout process these UX and narrative issues could be addressed.

Research

Audience

According to my research and interviews with longtime Gap employees, the “ideal Gap man” is between his late 30s and early 40s and the “ideal Gap woman” is between her mid 30s to 40s. Based on this knowledge, the target audience of the Gap Canada mobile site is familiar with mobile phones and stores. While they didn’t group up with web 3.0 or social media, which has substantial use of motion graphics to convey visual narrative, the target audience has become accustomed to social media. As such, the target user expects motion graphics during user interactions. Without these anticipated motion graphics, the Gap Canada mobile site struggles to communicate when tasks are in progress, resulting in repeating tasks and redundancy in user input. This is especially troublesome as the target audience is not highly proficient with technology and frustration with time consuming tasks and redundancy could result in loss of sales.

Design Goals

The goals of the Gap Canada mobile UX redesign and incorporation of motion graphics are:

  1. Showcase and focus users’ attention on Gap Canada’s products by hiding the bulky navigation bar, while making it readily accessible.
  2. Creating a visual depiction via motion graphics that a product has been liked/unliked
  3. The motion graphic of liking and unliking creates an emotional attachment between the user and the product to encourage sales.
  4. Use motion graphics to show that an item has been added to the cart, and display the progress of the action.

Wireframes & Storyboards

After creating assets for the animation in Illustrator, I imported them into After Effects. All of the animations were true to their storyboards, with the exception of the “Add to Cart” animation being simplified. I reduced the number of folds the product completes to prevent the animation from taking too long, simplifying and shortening the length of the animation. All the iterations of the animations involved experimenting with the timing, easing and rate of animation elements.

Navigation Menu Animation

Storyboard and Wireframe

Liking/Unliking Animation

Storyboard and Wireframe

Add to Cart Animation

Storyboard and Wireframe