Redesigned shopDisney website and native apps guided by findings from UX assessment

Project Summary:

UX research and assessment focused on optimizing the performance of Disney’s premier destination for purchasing Disney, Pixar, Marvel, and Star Wars merchandise.

UX research and assessment focused on optimizing the performance of Disney’s premier destination for purchasing Disney, Pixar, Marvel, and Star Wars merchandise.

Client:

Disney

Role(s):

UX Research
UI Design Manager

Team:

2 UI Designers
2 PMs
8 Engineers
4 QA

Client: Disney // Role: UX Research + Design Manager

Client: Disney // Role: UX Research + Design Manager

Sales Funnel Analysis (Mobile Web)

Sales Funnel Analysis (Mobile Web)

In a 3 month report, the Disney mobile web store had 345,948 visits on the checkout delivery page.

Billing: Conversion vs. Fallout

21% of visitors (106,975) failed to enter delivery information and continue to the payment page.

Review: Conversion vs. Fallout

6% of visitors (50,205 visitors) failed to enter payment information and continue to the order review page.

Total Conversion vs. Fallout

51.5% of total visitors (178,058) completed checkout and 48.5% of visitors (167,890) abandoned the checkout process.

Client: Disney // Role: UX Research + Design Manager

Client: Disney // Role: UX Research + Design Manager

Remote User Testing & Interviews

Remote User Testing & Interviews

After looking at Sales funnels and forming a hypothesis for why sales were suffering, we put together a script that would allow us to guide users through a number of tasks using the Disney Store's mobile web experience as well as other leading e-commerce sites to understand how Disney's shopping experience compared.

Remote testing audience

Utilizing remote user-testing software, a first for Disney, we were able to test:

  • 30 total participants

  • Between ages 30-45

  • Parents

  • Experienced with online shopping

  • Social media users

  • Online purchases within 3 months of the test

Test format

Each user performed a series of tasks focused on locating an item, adding the item to their bag, and completing checkout flow using provided credit card information.

Each user was tested using the Disney Store's mobile web experience and again using a different e-commerce mobile website.

Users were asked to share their thoughts on each task, each web experience, and provide overall feedback.

Client: Disney // Role: UX Research + Design Manager

Client: Disney // Role: UX Research + Design Manager

Additional Research Source

Additional Research Source

Baymard Institute

Baymard conducts original large-scale research studies on e-commerce usability. The research is published in articles, reports, and benchmark databases. Topics include e-commerce search, homepage and navigation design, the checkout process, and mobile sites.

Disney Store’s Mobile E-Commerce UX

This is a usability benchmark of the mobile site user experience of Disney Store and 49 other sites. The overall performance of Disney Store is poor. Some of Disney Store’s biggest mobile usability issues are due to broken Product Page Layout, Field Descriptions, and Search. That said, their mobile design performs great within Form Layout.

Rank: #27 of 50

UX Score: 335

URL: disneystore.com

Reviewed by: Baymard Institute

Client: Disney // Role: UX Research + Design Manager

Client: Disney // Role: UX Research + Design Manager

Key Improvements: Bag & Checkout

Key Improvements: Bag & Checkout

When prioritizing our recommended improvements to the Bag and Checkout experiences, we had to consider two very important KPIs, 1) Revenue and 2) Dev cost. Based on these KPIs we focused primarily on high-impact improvements that reduced user-abandonement with little or no development cost.

Expanded Checkout Options

  • Highlight “Guest Checkout” by making it the first option presented to guests.

  • Collapse promotion code field to avoid drawing too much attention to the absence of a promo code.

  • Guests can access promo field when relevant.

  • Minimizes the amount of guests who feel deprived for not having a promo code.

Transparent Billing Details

  • Be explicit about what is required and provide an explanation for relevant details.

  • Provide a way to continue to the next steop at the top of the page rather than below relevant and/or required information.

Improved Form Layout

  • Reduce redundancy in fields.

  • Create a single field for names.

  • Provide example formats for inputs with multiple format types such as:

    • Telephone numbers

    • Dates

    • State, Zip

    • Monetary amounts

    • Credit card numbers

Short: 5 Fields
Conversion: 13.4%

Short: 7 Fields
Conversion: 12%

Short: 9 Fields
Conversion: 10%

Source: https://vwo.com/blog/web-form-optimization/

Homepage & Category Pages

  • Reducing the number of promotions will allow users to shop by category and navigate to product pages faster with significantly less confusion.

    • Currently the homepage shows 12 promotions. If these are irrelevant to users, they abandon or rely on search to find products they are looking for.

  • Expose items within each category’s carousel listed at the bottom of the homepage.

Navigation and Product Browsing

  • Users reported having trouble tapping on available categories due to small tap areas. Make the tap area the full button not only the text label and users will be less inclined to think this is an error.

Emphasis on In-Person Shopping

  • “View Details” should look interactive so users can quickly understand store details.

  • Store details are currently listed under the fold and provide no indication that they can be found under the map.

  • Map is interactive and is difficult to scroll past for store details.

  • Allow guests to get directions from the map page using their native map/directions application.

  • Clicking on the address within the detail page should prompt options to open a map.

  • Provide context for for guests to better understand what each color means for each location mean.

Core Product Page & Product Listings

  • Current product listings do not indicate when an item is low in stock, on backorder, or out-of-stock.

  • Guests aren’t informed that an item is unavailable until going through the checkout process, leading to frustration and cart abandonment.

  • There is no indication of more information on a product page. Product details and core actions are hidden below the viewable area on screen leading to more confusion among guests.

  • “View Similar Items” directs users away from a product page before they are given an opportunity to “Add to Bag”.

Search Improvements

  • The current search experience provides generic, hard-coded, categories designed to allow users a path to finding what they are looking for. This unintentionally worked as an additional distraction to users resulting in confusion and frustration.

  • Our first recommendation was to simply replace the random categories with the most frequently searched items.

  • Our next recommendation was to record and provide users with their recent search criteria to provide them with a way to access items they’ve searched for in a previous session.

Relevant Error Messaging

  • Certain error messages were displayed despite being incorrect. In the example to the right, an option is selected but an error is still visible to users.

  • Provide an indication of what how an error message could be resolved or remedied. Currently there are no indications of what error message belongs to what field or item and this forces users to guess how to resolve the issue.

Client: Disney // Role: UX Research + Design Manager

Client: Disney // Role: UX Research + Design Manager

Additional Opportunities

Additional Opportunities

More recommendations to assess against currently roadmapped mobile UX priorities. 

High Priority Improvements

  • Inbox notifications

  • Deep link into app / Mobile web to App conversion

Medium Priority Improvements

  • Display site-wide promotions in dedicated areas

  • New mobile web product layouts

  • New mobile web banner placements

  • Apply existing promo code for first time guests

Low Priority Improvements

  • Recently viewed section for products

  • Allow guests to define their store