Call us on +44 870 947 0297
Chat to us about digital problem solving, a workshop or to get a sense of directionBook a free slot
Crippled by leveraged debt, Toys “R” Us turned to its most profitable store for a lifeline - e-commerce. Read how we grew their $1.5bn digital asset.
For more information on our e-commerce work, please contact email@example.com
Design, Interaction, Optimisation
Web, iOS, ATG, Oracle, React
Strat, Concept, UI, UX
In the twelve months leading up to the bankruptcy, Dawson Andrews partnered with Toys“R”Us to boost their online revenue. This case study showcases the issues at the heart of the problem of Toys “R” Us’ e-commerce, our approach to the solution and the highest performing design solutions we provided and implemented.
The website really represents the front door of our brand. In a year to two years we have to catch up on 10 years of innovation, and that’s no small feat.
Toys“R”Us Inc. operated across 1500+ stores in 37 countries, 12 of which had an eCommerce store. Globally the company’s revenues exceed $11.5Bn of which approximately $1.5Bn is derived online. They were ahead of the curve as one of the first major retailers to adopt eCommerce in 1996.
Their reliance on their $10bn bricks and mortar revenue cost them in the end. Despite the head start, the worlds largest toy company soon got left behind rivals Walmart and Amazon. After being on the NYSE for decades, Toys“R”Us Inc. was taken private in 2005 in a $6.6Bn leveraged buyout by Bain Capital & KKR. A leverage that didn’t pay off which was the final blow for the company.
In September 2017 Toys“R”Us Inc. filed for Chapter 11 Bankruptcy becoming the third-largest retail bankruptcy in U.S. history.
Twelve months prior they engaged with us on the turnaround no one thought was possible. A combination of incredible internal champions and relocating key staff to New York saw us in the middle of the greatest project of our career. We became digital partners whose remit was solely to bolster eCommerce as a revenue stream and prepare to exit their Chapter 11 Bankruptcy process in time for the 2018 holiday season.
Toys “R” Us is going under for one reason only, KKR, Bain Capital and Vornado Realty Trust leveraged them with over $7 billion in debt for expansion in spite of increased competition from Walmart, Amazon, Target and others.
Some organisations recognise faster than others there are shifts in the ways customers want to be communicated with and the way customers want to purchase products. It probably took us a while.
We sensed the urgency of the situation: move fast, release and test often. Ignore the P4’s, leave things in a state that when bankruptcy hits we can pull the plug and things won’t fall apart, maximise value - find the fastest cost savings and the highest margin makings. Of the list of 200+ to-do’s that the Toys R Us team had, we started at the highest potential / lowest investment.
Remit: Maximise impact in the smallest space of time.
Our top picks all fell into four hot-potential categories.
Table of contents
The flip to the mobile experience was key. Mobile Conversion Rate ended up increasing 46.33% YOY, Tablet Conversion Rate went up 6.3%, Mobile Penetration (i.e. what percentage of mobile of overall revenues) went from 42.7% to 57.8% (+35.36%) and Mobile Revenues jumped 42.3%.
The initial mobile site - was an m. site (dedicated mobile) which meant it wasn’t responsive. It was an old school setup when mobile usage was growing but responsive web design was still in its infancy. One major issue with such a setup (along side many) is that you’ve got two websites, which means twice the content needed and twice the management time. They were effectively running two separate sites. On top of this they had Babies “R” Us which ran as a separate site itself, plus its m. site - so we had four sites across multiple languages draining massive amounts of time from the design and marketing teams internally at Toys “R” Us.
We turned all of this into a single code base for one responsive site. This concurrently reduced each local marketing/admin teams’ workload four fold.
Developing and releasing a new site in iterations for the most part is the way we prefer to work but the implications of going responsive meant we had to bite the bullet and go for a ‘big bang release’. This is typically a huge no-no (particularly from security and QA) however it was the fastest route to value so we stuck to it. We had to navigate the SEO impact particularly when there was a change to URL structures when taking away the dedicated mobile and tablet sites.
When designing responsively you need to consider both your largest and smallest screen size concurrently so that one doesn’t negatively impact the other.
One product card doesn’t necessarily fit all functions. We rejigged the layout on our product cards so we could get as many horizontal cards on the mobile screen at once.
Our analytics team recognised that customers were clicking on cart not necessarily to checkout, but more so to check what was in their basket. When we realised that the average cart size was 2.5 products and the .com’s basket preview function only had space to show two products we recognised an opportunity to keep them live (in the shopping section of the site). If we were able to fit 3-5 items on that page at once we knew we’d be able to increase cart size through the natural decrease in people prematurely exiting the site via Checkout.
This change alongside the introduction of product cards resulted in Add to Cart going up by 3X.
Maximum impact meant maximum deployment. We knew we couldn’t work across every local site so we quickly set off to build a design library that could be utilised other European markets such as France, Portugal, Spain, Germany and Poland. This allowed us to direct local design teams from the UK without flying our team all over the world. When designing at scale and managing 100,000-400,000 SKU’s, one size doesn’t fit all, especially across seven languages. They are different markets after all but we wanted to ensure the UX and UI could be shared across different markets if appropriate and cater for language and localisation.
We decided to take inspiration from the child-like wonder induced from visiting their physical stores and push a few design boundaries. We started at a granular level: anything that looked too native to the web would need to go. So squared corners - gone. Staying inside the lines of a bounding box? No. Gone. Kids break the rules all the time, so we gave the Toys R Us creative team a different set of rules to play with.
Toys are more fun when they’re out of their box. We made the most of some of the world’s most distinctive characters and utilised them both as useful visual indicators for category navigation and for breaking up any layout fatigue in longer pages.
In some special cases we really ramped up the art direction, for example when Mario Kart 8 was one of the most sought-after games on the market upon release, we decided to dedicate a full-width banner on the homepage. Utilising all of our rules for breaking the rules, we took things a step further with what ended up being called a “Takeover banner” where brands could have complete creative freedom, even over our CTA colour scheme!
We knew adoption levels across these teams was a key success factor in our deployment. Being handed a guidebook as a designer is rarely a fun experience so we decided to pay as much detail as possible so we could assist the teams as best we could. (below) Jordan was trying to politely demonstrate how different character’s physical attributes, stances and distance from the ground would influence their shadow as a matter of concern during the asset creation process.
There were big navigation inefficiencies we believed could unlock value. A customer couldn’t make a purchase without going through a product card to a product detail page (PDP) and hitting the buy button. For this reason, we bet that product cards would represent a key gateway in the path to checkout flow.
Product cards were utilised in product listing pages (PLP), search results, suggested products, related products, bundles, add-ons — everywhere. And they were working. So that meant if we could fix them once, we’d fix 80% of the online experience.
There wasn’t a huge trick here, we knew even just cleaning them up aesthetically, making the experience on mobile a little more enjoyable would win us basis points. The weight of influence this one feature had across the site would be our multiplier. We reduced page noise, allowing us to increase the amount of products we could get on a page and ultimately increased add to cart by 3X.
Part of the problem with old ‘add to basket’ UI was that it would often divert the users eyes to the basket (top left) or worse, force a click to confirm it was definitely in there. Previously, TRU had non-interactive buttons and a notification bar that popped up along the top - it was pretty easy to miss. As a result users were clicking into the basket and checking out - we wanted them to remain in the store. They also had a problem of users clicking ‘add to basket’ multiple times because they had no visual feedback confirming their action.
We follow a simple logic - where your pointer is, your eye is most likely there too. We wanted to keep attention where the cursor was and so we limited our design solution to the button box. We made the cursor change from a pointer to provide some immediate visual feedback. We also disabled the clicking functionality for a few seconds while a loading circle spun and the button eventually turned green. This was also reflected above where the basket sits at the top of the screen. The button then eventually turned blue after a few seconds to enable multiple products to be added.
While these changes seem minor, collectively they created Product Cards which became the foundation to seamless shopping throughout the site. It effectively became as easy as picking up a product in store and placing it in your basket. Fixing this core customer behaviour increased dwell time, cart to checkout conversion was up 210.4% and Cart Abandonment on mobile decreased by 74.6%.
Category cards were another shortcut we introduced - a good way to help people easily navigate around the site. It took minimal build resource, mostly design but for a very quick sprint we were turning the dial more and more.
By agreeing to only break the grid top or left/right and not bottom we opened up for creativity while keeping a smart consistency with the cards. These easy, non-restrictive rules that we co-designed were how we got the international teams onside.
With all the systems and design thinking methodologies available, sometimes you just need to go with your gut. There was no insight behind this, no workshop or data to back up the hunch but we went with it anyway.
A lot of the UX improvements we made on the site were focused on increasing trust with the buyer. A progress bar had been installed to try and help clarify the cart process but we didn’t feel it was optimised. The change we made was so minor; instead of the progress bar turning green when the order was complete, we changed it to fill up as the order progressed. We ran an AB test on 3% of traffic and our design outperformed the old one by 12%. If we got this deployed before Christmas we were looking at an extra $8m in revenue over the six week Christmas period. That’s ultimately what was achieved.
Common design practice draws a buyers journey left-to-right but that is rarely the way it works. More customers land in the middle of an e-commerce store than they do its homepage.
The first step was using data to understand current customer behaviour.
We mapped every user journey. We asked, what would the path to product be like from Google search - what are the major traffic sources from Google? We looked at Facebook, Whatsapp, and all major traffic sources. We also looked at main sections of the TRU site and how traffic flowed around from one product to another.
Ultimately we were looking for shortcuts. The fewer clicks the better. Using the insights we gathered from our customer flow maps we were able to prioritise the design builds. We developed related products, ‘bought with’ sections, and a range of intelligent shortcuts for the higher performing pages.
By creating seamless flows around the site we made it easier to continue shopping which increased dwell time while Add to Cart grew 3X contributing to an overall Conversion Rate increase of 20.74%.
Arguably one of the most important ‘find’ features was search. Optimising search is critical to any large SKU holder, Toys R Us was one the world’s largest with over 400,000 unique products. From our journey mapping we knew users landed right in the middle of the site, often skipping the homepage and category pages completely. If the didn’t find what they were looking for straight away we needed to make it easier for them to navigate.
With more than 4,000 products with the word ‘Princess’ in the title - search was confusing customers by attempting to narrow them down, unsuccessfully.
We developed a type-ahead search functionality. Using Bloomreach (a 3rd party plugin) allowed us to make use of its personalisation engine and learn user preferences. It was able to make intelligent predictions based on the smallest behaviours and offer more options that enabled browsing and exploring.
We had to rethink the navigation so that being in the middle of the site was as easily navigated as anywhere else. Our key metric here was decreasing abandon rates alongside increasing click through rates. Careful labelling, type hierarchy and categorisation was our route to a better navigation experience.
The marketing departments had their hands tied when it came to responding fast to trends. Fidget spinners came out in the duration of our project so we saw the issue first hand. Users were being forced to choose a path rather than just simply add a product to their basket from the homepage itself. The homepage acted as a canvas of product adverts rather than actual products you can actionably stick into a basket. We wanted to reduce the clicks so we developed a range of design assets the marketing team could build and push live within a day if they needed to act fast.
We turned category landing pages (for brands/product lines) into mini store experiences. A lot of customers knew they wanted ‘LEGO’ or ‘Playstation’ but not necessarily the exact product so this was a good way to show them what they didn’t know they wanted. Previously the site funnelled them into very granular product filters that didn’t necessarily give them the ability to explore effectively.
With the likes of the Star Wars section kicking ass in store we wanted to create an equally powerful experience online and do the brands justice. The big brands like Nintendo, Disney, and Playstation worked with us for artwork to help us treat our feature pages like in-store display artwork. They ended up working like the Netflix series preview sliders which increased Mobile Browsing significantly - the percentage of mobile’s contribution to overall digital revenues went from 42.7% to 57.8% (+35.36%).
The Product Detail Page (PDP) is arguably the leakiest bucket for most retailers.
Arguably the most important feature of a PDP is its call to actions. On the old site designs the call to actions (CTA’s); click and collect, add to basket, out of stock buttons, were all treated exactly the same in identity and colour. Yet the consequences of clicking on each option is very different. We differentiated them and gave them individual identities.
We then got into the individual functionality. Click and collect required your details to be added every time you visited a new product. We pre filled this data with cookies instead. If products weren’t available in your area - we gave the location of their nearest store that did stock it - anything we could do to make the user work less and browse more was top of our list.
Jordan immediately looked at fixing type hierarchies. The product title itself was almost the same size as the breadcrumb - you wouldn’t know immediately you were on the product’s page. Sometimes some simple type hierarchies can make the world of difference to clarifying a page’s purpose.
The end of a product page was sitting as a dead end with an uninspiring footer and t’s & c’s. We instead lead the customer to the most likely product they were going to be interested in with data from Bloomreach analytics. This kept users on the site longer looking at the things we wanted them to be looking at. By tying up lots of loose ends in the user journey we were able to decrease page abandon rates (Cart Abandonment on Mobile decreased by 74.6%) and increase click through which ultimately lead to the conversion rates we were able to achieve - Mobile Conversion Rate increased 46.33% with Overall Conversion Rate increasing by 20.74%.
We backed the brand equity Toys R Us had and bet on small delighters to improve the experience. It was at times seen as an insignificant ‘one for the kids’ but it returned on its investment.
Remembering that it is adults that buy toys online (and not kids) we had childhood memories of yesteryear to play with. Fan-favourite Sid aka Cookie Monster, born Sep 1966, was working his way into many areas of the product. He was tactically deployed in frustration and success points.