Moving to responsive boosting mobile revenues 42.3%

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.

Increasing average cart size

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.

Optimising an international design team (x 7)

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!

“Design Guides suck”
- Said every designer ever

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.

Reimagining Product Cards

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 - low cost build / high return

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.

A hunch that boosted sales by $8m

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.

Streamlining path to product

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.

Bringing the real Toys “R” Us magic to Homepage

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.

Category Landing Pages

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%).

Product Detail Page

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%.

Keeping the brand fun

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.