iQue website design
- Projects

i-Que website created by Si digital

Head shot of TomBy Tom O’Malley

Our collaboration with Vivid Toy Group continues with the launch of our new site for i-Que, the ultimate robot toy. A unique, quick witted, smart talking know it all; he’s not due out until August but this cool new interactive robot for kids is already picking up awards in the toy industry.

i-Que was recently awarded top place in the Tech Toys Category in the Toy Fair Best New Toy Awards, an early indication of toys, games and gadgets that will be big in 2015, so we jumped at the chance to build a fun and interactive site for this great product.

How i-Que works

By pairing i-Que with a smart device a whole range of capabilities are unlocked. Using speech-to-text technology users can test i-Que’s brain power by asking him a question about anything. The interaction continues with a range of games and brainteasers for children to play with i-Que, and they can also give him phrases to say, ask him to tell a joke and even set him to dance mode to see him groove to music. When not paired with a device i-Que has an FX button for lights and sounds, as well as 6 points of articulation for on-going play.

Designing the website

To help with the initial site design Vivid was able to supply us with a collection of material that gave us lots of inspiration when it came to the style of the site. These included sound effects from the product itself, as well as logos, icons and packaging design. Also included was an awesome animated 3D render of i-Que which was just too cool not to use on both the initial holding page and the main website itself.

Reviewing the product packaging was extremely useful and allowed us to maintain a consistent brand and design style across the site. We had animation and interaction in mind when designing the site, as we knew the target audience was not only parents and carers, but also children who would own (or hope to own) i-Que. These interactions are mostly subtle, but enough to make the website fun and engaging to use. In addition, we made good use of the sound effects throughout the site, most notably on the homepage with a ‘Push the Button’ section.

Read more about our work with Toy and Entertainment companies.

Development technologies

When it came to site development we decided to use a dynamic and feature-rich CSS pre-processor called Stylus. We used gulp.js to minimise CSS and javascript, and also compress images to increase the speed of the site. In order to create a completely custom and fluid grid system we moved away from a 12 column grid framework such as bootstrap and used Jeet, as this gave us the ability to pass fractions and decimals to columns.

It was important to Vivid that any visitors to the site could quickly and easily find answers to any queries they had about i-Que. We decided to build a fully customisable FAQ section which is easily filterable with a search bar. Due to the accordion, which hides the content behind the question until it is clicked, it is very easy to navigate on desktop, tablet and mobile. We also included the dynamic ‘custom word filter’ section on the Help and Info page, demonstrating the blocked word capabilities of i-Que.

From the outset we were aware that the site for i-Que would be used by both adults and children, so it was important that the site delivered all the essential product information in a fun, engaging and entertaining way. i-Que is cool, cheeky and unique, so we are proud to have produced a site that we feel reflects this, as well as being a lot of fun to work on.

Check out the completed i-Que site or take a look at some of our other projects.

Next Post

Get started

Plan your project