Redesigned shopDisney website and native apps guided by findings from UX assessment
Project Summary:
Client:
Disney
Role(s):
UX Research
UI Design Manager
Team:
2 UI Designers
2 PMs
8 Engineers
4 QA
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.
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.
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
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.
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