Home Services Projects Our Team The Lab Blog Contact Jobs
hasbro logo

The Challenge

Working to a very tight deadline, we were able to create a brand new, bespoke online catalogue and populate it with thousands of products and variants.

We also made the whole system function fully whilst completely offline.

A unique set of technical challenges

Hasbro approached us with some very unique challenges that we were immediately interested in exploring further. Every year they produce a large catalogue of toys and games that they print and distribute to their trade customers. However this catalogue is ever evolving and keeping traders up to date with their latest offerings was becoming a problem. This sounds like a typical catalogue site, I know what you are thinking, but there was a catch. This ever changing, large catalogue needed to be available offline and kept up to date, on desktop and mobile devices.

Their sales team often visited remote locations where internet wasn’t always available and typical catalogue websites would fall short due to awkward wait times loading products in front of customers.

We would have to build a solution that allowed a whole range of devices to go offline, from Androids and iPads to Internet Explorer, without any additional software or downloads. Quite the challenge for a system with thousands of images!

In addition to the offline requirement, Hasbro wanted to give their sales teams the ability to quickly generate a personalised version of the catalogue as they were browsing, which could then produce a PDF version to be printed and left with the client.

An entire website catalogue available offline, using only the browser

We’d been experimenting with cutting edge browser technologies focused on making web pages offline so we were confident it was possible. However we’d never seen anyone make an entire catalogue website with thousands of images available offline at this scale.

There were several browser storage options available, but like all bleeding edge browser features, support was spotty and inconsistent, especially on mobile devices. A few we tried only allowed a certain amount of data to be stored, and others needed to constantly nag the user for permission to store more and more data. These offline browser technologies were a step in the right direction, but clearly weren’t made for large offline storage, we needed something that could handle 1GB of data or more!

“We’d never seen anyone make an entire catalogue website with thousands of images available offline at this scale”

During the exploration phase there was one technology that was promising, another browser API that allowed unrestricted storage, but it wasn’t available on iOS (which most of their sales team used). We were stumped. We didn’t want to go down the native app route as we would never be able to produce individual apps for all devices within time and budget.

Then in September 2014 the Apple gods heard our prayers, iOS8 shipped with support for this technology! The project was a go, we now had the power to store lots of data offline in the user’s browser, without any additional software or plugins!

“Less than a year ago this project would not have been possible”

hasbro brands

Just a few of the top level brands that featured in the catalogue.

Searching offline

Another great benefit of having the website data stored in your browser is that all the usual requests to a remote web server for operations such as searching can now be done whatever the environment, even in airplane mode! No more painful waiting for that product search to complete while on the train or using up your data allowance browsing an image heavy catalogue on the move!

offline syncing

The setting up offline screen which shows the sync progress of data to offline mode.

Inline editing

Another big challenge for large companies such as Hasbro is the friction internally when a new system is introduced. It’s yet another new workflow to learn and distract from your already busy schedule. With this in mind we decided to make the experience of editing toys and games as easy as updating your twitter profile. With the correct user level permissions, Brand Managers could simply click a button next to the item they are viewing and edit the fields directly in situ. No clunky, disconnected CMS, just edit inline so you can immediately see how your changes will impact the layout of the page. Then when they are ready to save, the changes automatically filter to every other user, without them even needing to reload the page!

example of inline editing

An example of the inline editor screen to allow quick and simple changes to content on the fly.

Live updates

The timeline for this project was very short; we had to have the system in place for Toy Fair at the beginning of the year. With inline editing of content and images, and the automatic refreshing of content, Brand Managers could work fast and efficiently. They could even edit at the same time. Knowing your changes would immediately reflect on your colleagues screen ensured no-one would overwrite the other’s changes, even if they were in the middle of editing the very same item!

Multiple regions

Being one of the largest toy companies in the world, Hasbro have offices in many locations and the intention of this system is to serve them all.

Each region has their own ecosystem within the same domain. When a new toy is added all regional admins are sent a notification to import a copy into their own system, making any tweaks in language or images unique to their country. Users can even have access to multiple regions for ultimate flexibility when required.

We even built a self serving sitewide translation system so a Hasbro regional admin could tweak the language of any label, button or sentence across their version of the system.

On demand catalogue PDFs

Despite the system solving the printed catalogue issue there was still a demand at Hasbro to create hard copies of the catalogue. The advantage of utilising the system was that they would always be up to date at the time of printing. Similar to a shopping basket system on an e-commerce website a user can add individual toys, brands or entire categories into a personalised collection ready to print.

Collating potentially thousands of toys into a single PDF in a reasonable time was quite a challenge. It is an incredibly demanding task for the web server to generate a large, unique PDF file filled with images. With the user waiting on the other end anything over a few minutes would be unacceptable; we had to find a way to make this intensive task more efficient.

The solution was to distribute the generation of each individual page across multiple servers to spread the load. Using Amazon SQS we created a queuing system in order to process each request in turn and stitch all the pages together into a single file at the end.

playdoh

Working with this guy was a blast!

Catering to lots of users with different abilities

We knew that there were likely to be hundreds of different users of the system all with different skill sets and technical experience. To make the system easy to manage and update for this wide demographic required a considerable focus on UX.

There were a number of user experience tests we performed throughout the project, including paper prototyping, detailed user flows (and variants) and even testing on various family members.

The project was run on a very short sprint cycle of a week which allowed for user experience design iterations to be added to the cycle frequently. Each week we would perform some form of user experience testing and iterate on the design or build.

In Summary

As projects go, this one ticked a lot of the boxes for us. There was the near impossible task of building a completely bespoke catalogue system that worked seamlessly when offline. We had to manage a huge amount of data in various forms and from different sources. Attention to the user experience of the system was paramount to ensure engagement with Hasbro’s staff and the deadline was both short and immovable. It’s in these situations where Si digital excel and come up with the creative solutions to our customer’s needs.

The system has been well received at Hasbro and all the product managers and sales staff have taken to using the system as part of the daily activity.