Project overview

The team at BT approached us to create a new learning tool that could be both used both internally by staff and as a social tool for the general public surrounding the new SmartHub WiFi router. The end result needed to be easy to use and work across tablet and desktop. Due to internal hardware restrictions the tool had to be fully functional on various older versions of IE and other popular browsers.

My involvement on the project was as the principle UX and UI designer working to a tight deadline to deliver a fun and engaging tool.

UX & concepting

After brainstorming a few ideas with the team at BT. We started work on a quiz type game similar to who wants to be a millionaire to engage users and generate buzz, after prototyping this idea within Marvel it was decided to adapt the tool to create further gamification.

Further testing and development of the concept created an experience that required users to fire WiFi signal orbs to hit the SMART targets that relate to the campaign. Through further prototyping we decided upon combining the quiz element of the game with this concept to allow users to earn orbs to fire. Each target that was hit gave users of the game a short form fact about the router and it's smart features.

After positive feedback from test users and the client I worked up a full set of wireframes and prototypes along with an extensive logic flow detailing the games functions and screens.

UI & deployment

We were provided with an extensive selection of brand guidelines alongside best practises for design within the BT brand space, this included designing for smaller devices within the business and low spec machines. Working with these I quickly established a framework of colours and typography that complimented the guidelines whilst also bringing a unique appeal to the game.

During the design process we tested the interactive again using high fidelity protoypes before finalising the design for approval. Part of the design process included creating and defining animation sequences as well as sourcing a selection of sounds to be used to signify certain events within the game.

After the designs were approved by the team at BT I worked on a full suite of style guides for the interactive detailing typography, colours, animations and layouts. During development I worked closely with the team to build the front end layouts and fine tune animations and interactions for the end product. As the development closed I also spent time testing the game across various browers, devices and screen sizes to help the team identify any visual issues or functionality problems that could arise.

SmartHub Game in action