Problem
Poorly optimized
The website is slow to load, has a lot of design inconsistencies and functionality issues — and has not been optimized for mobile, despite mobile being the largest portion of our site traffic and 44% of all orders across our 3 platforms.
Dated
American girl aims to be the “Ferrari of dolls” and considered a luxury staple at $135 a doll, yet parents often confuse our brand with budget competitors. The current website does not reflect a premium shopping experience, and feels “cheap”.
High cart abandonment rates
The cart abandonment rate as of the website is 71.2%, our customer service hotline is often flooded with calls of people who cannot complete their order, or some users may resort to going in store if unable to complete their purchase — or worse, not checking out at all.
Opportunity
How can we transform the American Girl e-commerce experience to provide an optimal, modern and seamless shopping experience?
Goals
Optimal
The website should be optimized for all platforms and not be a compromised experience on mobile or desktop. There needs to be clear paths to complete purchases and minimal confusion.
Modern
The new website needs to provide feelings of luxury and be best in class in the toy industry. Through looking at online stores with similar price points, we can develop a new design system.
seamless
Users should have minimal issues when it comes to making a purchase, and should be able to easily check out with a variety of payment methods if needed.
Planning
Early initial research
Competitive Analysis
To begin the investigation, I sought out brands that would be in similar price ranges and demographics to American Girl’s target audience for competitive analysis. I sought out to look for luxury brands with modern designs. It was important for American Girl to highlight their product quality as opposed to excessive branding as other toy brands do. Website homepages, product listing pages, product detail pages, cart and checkout pages were all examined in this stage.
User Testing
To make sure our thought process would be headed in the right direction, I made some early prototypes to show a couple of existing American Girl customers and so they could compare the current shopping experience with a brand new experience. A couple of variations for each design were made allowing us to collect data on what would be the most optimal for users. The major takeaways were
Users prefer a less cluttered bag, and resonated with the 2 column bag the most as they enjoyed easily being going back to the shopping website.
For making edits in their bag, the pop-up was most preferred.
Users wanted a seamless experience, ability to put in their rewards information and see how far they were from free shipping, easy cart add-ons and a large availability of payment methods (Paypal, ShopPay, Affirm).
Comparisons
Right is old, left is new.
The new website designs feature larger product images to enhance focus on our high-quality products and less focus on branding. Buttons are large and hard to miss. Cart add-ons are easier, but not obtrusive to the shopping experience. Navigation and filtering are more intuitive to the user and more reflective of modern shopping websites. Aligning with Shopify allows for a easy checkout process that more users are familiar with leading to an easier time completing their purchase.
Cart
Checkout
Product Display Page
Product Listing Page + Filtering
Navigation
Results
Average order value increased from $128(2019) to $152(2021)
Conversion rate increased from 2.9%(2019) to 3.4%(2021), translating to a 92% increase once first launched.
Cart abandonment rates decreased by 2%, translating to a 46% increase in demand
6.7x increase in upsells/add-ons
Member reward enrollment increased by 14%, reward redemption increase by 5%, average member spending increased by 7.8%
Time spent to conversion reduced by 19%, Pre-shopify orders take more than 10 minutes, post launch take less than 10 minutes.
User feedback:
“Super easy. It was pretty easy compared to the old version that took a long time”
“It was easy – what I would expect to happen happened.”
“Nothing was confusing. I feel like it worked well.”
“It was fast and easy”