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”
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!
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!
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!
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.
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.