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

The Challenge

We’re in an age where ideas can be published and funded at the click of a button. Hasbro has always sought ideas from inventors, but they wanted a way to extend this to everyday families - why can’t anyone share an idea or invention and work with one of the world’s largest toy companies to see it come to life?

Hasbro US asked Si digital to come up with a name, brand, concept and then design and build an engaging website for the whole process.

The Brief

The brief from Hasbro allowed for plenty of creative freedom, which we loved. We were asked to create a public facing website that explains in a fun, engaging way how anyone can submit an idea to Hasbro, and then take them to a submission page.

Working closely with their invention team in Rhode Island, we presented the idea of telling the story of invention using Mr Potato Head, Hasbro’s first ever toy from the 1950’s.

Names, Narratives and Storyboarding

After an initial thumbs-up was received, it was time to get to work on turning the idea into something tangible. The first part of the project we tackled was the name. After a team brainstorm exercise, we had a vast collection of names around ideas and inventions. These were presented to the Hasbro team with a few taken forward on the shortlist. However, the name fell into place when we were listening to the Creative Director talk about the project. Several times the term ‘spark’ was mentioned to describe the process of having THAT great idea. With this name sat right there on the list it seemed to exactly fit what we were trying to achieve. SPARK Hasbro was born.

The landing page needed to inspire families and budding inventors to share their ideas. The story we devised provided reassurance that ideas are protected, demonstrated that ideas can be found anywhere, and outlined how ideas can be taken from a small spark to a brand new toy.

Our lead man, Mr Potato Head, has a fascinating history; the Inventor George Lerner came up with the idea when observing children playing with their unwanted food and making faces with it. He’s a timeless, humorous toy who stood for everything that the site wanted to achieve. Using this influence, our creatives wrote and storyboarded a section by section narrative, annotating potential interactions and animations. As expected with this initial process, there was a back and forth with the Hasbro team, which only helped strengthen the story and the process of invention.

spark hasbro initial sketches close up of initial sketches

Selected sketches of the storyboarding process undertaken.

Illustrations

Once the team was happy with the storyboard it was time to start the illustration process. Hasbro had approached Si digital as they admired the illustrations and animations on our website, and were more than happy for us to adopt our preferred style on the project. To have the creative freedom with a character as prestigious as Mr Potato Head was a real honour, and we were determined to do ourselves proud.

We began the process by illustrating Mr Potato Head and then progressively developed the illustrations around him. With tight deadlines in place, we worked hard day and night to pull together all the illustrated assets for our developers to bring to life.

mr potato head illustration

Mr Potato Head illustrated with disconnecting body parts ready for animation.

Mr Potato Head illustrated as an Emoji - to convey happiness.

Animations and Interactions

Animations had been discussed during the project with Hasbro, who were completely onboard with what we wanted to do. When entering the development process, our creatives produced interaction lists for the developers, who then worked tirelessly to bring the illustrations to life. The biggest challenge was making sure the timings of the animations were correct.

During team sprints, conversations took place around what technologies to use to animate certain areas, and how best to set the timings. For the animated parts, we decided upon a combination of After Effects to produce small GIFs, and CSS transitions to handle some of the more complex actions. We paired these with Javascript to set specific waypoints that trigger each animation as the user scrolls down the page.

User Testing

During production we felt it was essential to undergo user testing, to enable us to scrutinise the site flow and timings for usability. After working on something so closely it was an incredibly useful exercise to get fresh eyes on the site – users that had no preconception of what it was or how it worked.

In the Si digital UX Lab we performed short user tests on the landing page and the invention submission question sets. Our subjects were selected from the target demographic, to help make the tests and their results more accurate and realistic.

Our UX Lab allows us to set up the users on both Mac and PC environments. When using the SPARK website their facial expressions and interactions on the page were recorded and live streamed to the viewing area, where members of the Si digital team could observe their behaviour.

Using the data recorded, in addition to the live viewing experience, we were able to analyse and identify any patterns where the users had become confused or not interacted with the site in the way that we had anticipated. This led us to make amendments and carry out further testing to validate these changes, until we arrived at a point where we achieved the interaction and engagement we were aiming for.

Responsive

As with every site we produce, this was responsive as standard. We started with a two-column grid, but due to the animation heavy nature of the site, we added our own bespoke twist to make sure each animation was still retained at any screen size. We were then able to test the project in our Open Device Lab, using a range of mobiles and tablets to ensure the site was behaving as anticipated on different devices and operating systems.

spark hasbro website displayed on different devices

Copywriting

The copywriting process evolved from conversations about the story and visuals being created by the design team. We used the initial storyboarding, and research into existing Hasbro publications relating to Mr Potato Head, to develop an understanding of the appropriate tone and language that should influence the copy. We worked hard to produce succinct, engaging text that communicated the message and requirements in a fun and entertaining way, echoing the persona of Mr Potato Head and the overall feel of the site.

Due to the nature of the invention submission process all the copy had to be reviewed by the Hasbro US Legal Team, which resulted in a few amendments being made. Although the SPARK site will be a global launch, only submissions from the US can be considered, therefore we also had to consider American spellings and colloquialisms where appropriate, in order to reflect the client and the majority of the audience.

Integrating Projects

Initially the brief stated that when a user clicked ‘Share your idea’ they would be taken to a third party platform. However, due to this platform’s limitations it was clear Hasbro needed a more tightly integrated solution.

Coincidentally, we were already in the middle of a different project for Hasbro US - building a platform that allowed Hasbro and their professional inventors to track progress on new inventions from concept to production. We pitched the idea that this platform could be extended to facilitate individual inventors from the SPARK project. As we were building both systems from scratch we were able to give Hasbro a solution perfectly tailored to their vision of the SPARK user experience.

mr potato head sketches

In Summary

SPARK Hasbro has been an amazing project to work on. It was an honour to be given the responsibility for building a new element of the Hasbro brand, from devising the story and finding the perfect platform name, to designing the logo, and being given creative freedom with their existing toy range. We produced detailed illustrations of our chosen character Mr Potato Head, incorporating new techniques in animation to really engage and entertain the user.

When it came to the copy it was essential that the tone was consistent with the visual personality of the site. We selected vocabulary that would appeal to the predominantly US audience, and ensured it was compliant with the Hasbro legal team. We were also able to integrate the SPARK site with a new, bespoke business system we built in order to streamline their invention submission process. Due to the alternate time zone of the Hasbro US team it was important that we could offer flexibility in working hours when holding conference calls to discuss updates and feedback.

We are incredibly proud of the final site for SPARK Hasbro. As a project, we feel it has allowed us to combine our expertise in design, development and copywriting to create a truly engaging website, that seamlessly integrates a beautiful, interactive front page with an accessible and reliable invention submission platform.