Little Big Idea
Client Project
Tasks: Concept, Project Management, Art Direction, Design, Marketing, Copywriting
While working at the agency TBWA, in 2021, Origin Energy asked us to update their website littlebigidea.com.au, which provided primary school kids various online games and activities to encourage entrepreneurial thinking.
The website had already been built by past TBWA employees previously using the Gatsby React framework, which meant the style and approach was already set. For this update, they had a limited budget to add some new games.
I was asked to pitch options of what could be done with the budget, and to then brief the design team. From there we decided on the best direction and the design team created the necessary visual assets while I coded the changes to the site. The site and updates where programmed with React in Gatsby using the GSAP framework for animation.
You can visit littlebigidea.com.au to see the project directly, or view videos and descriptions of the changes below.
__________________
Animated Overlays
Conceptually
While the budget was primarily directed at new games, one of my primary suggestions was to develop a new, site-wide, animated overlay effect. Many of the pages had simple slideshows dressed up as games or non-interactive content that wasn't particularly engaging for the audience. It was thought that developing something that could impact any page on the site would bring a greater playfulness and allow the budget to have a grander impact.
Technically
The animated overlays were essentially an invisible container that site on top of the whole site and behaved outside of any page transitions. Several animations were designed that could be procedurally driven, such as robots that would randomly pop into the screen and wiggle their arms, UFOs or rockets that would fly past, or an asteroid shower.
Scale and asset variations, as well as randomly generated timing and movement all helped create the effect of an unending serious of animations that could happen at any time while you were browsing the site.
__________________
Drag & Drop Inventions
Conceptually
The primary game developed in the new budget was a drag and drop experience that allowed kids to drag a selection of predefined robotic elements onto a rectangle. As items were dragged, they would reappear in the available assets for reuse. The rectangle they could be dropped on could also be rotated for more variation and placement options, and the appendages and rectangle would occasionally wiggle or move on its own, and sound effects for picking up and attaching items also made it a joy to play with. The experience also allowed for creating multiple designs and printing.
Technically
Items were programmed with anchor points so that while being attached to the rectangle they could randomly wiggle and follow the rectangle body when it also wiggled randomly.
To allow for placing assets in varied angles and positions, when assets appear in the library for use, they were programmed to appear facing random directions, and instead of allowing rotation of the appendages themselves (which would have required juggling draggability and rotation controls), rotate-ability was applied only to the rectangle body. This all meant that a user could simple start dragging things over with minimal instruction, but could also discover (or feel like they invent) new ways to place things in ways they wanted.
This all made the process feel less complex, while creating an additional novel feeling for users that attempted to more creatively problem solve.
The experience can be interacted with here.
__________________
Glorified Slideshows
Conceptually
To keep the updates within budget while also enabling as many new games as possible, three of the games where devised as glorified slideshows, where users would take a very basic action on screen to see each new piece of information.
This included a mechanical claw that would grab a new note from a box every time it was clicked, thought bubbles that would pop to reveal a new idea whenever hovered, and a space scene that would transition to new planets and be followed by a rocket ship that would land on each planet.
Technically
All the animation was animated programmatically using GSAP. This allowed for variations on every click of hover which added to an organic effect and a feeling of responsiveness. The rocketship flight paths was an exception to this so that the ship's could flight into the scene on a path that worked with the planet configuration.
All of the text that appeared was randomly chosen from a pool of options, that would be reset after all options were depleted.
__________________
Mix'n'Match Games
Conceptually
Two additional simple games that relied on combinations of attributes. This allowed the kids to combine options or randomise individual aspects to get a customised response or new prompting sentence. it allowed for very simple game development while having a feeling of lots of depth and variation.
In "Idea-o-matic", the user could click an icon or drag it on top of another icon to receive an idea that related to all of the items interacted with, and in the "What If" game, a random sentence was constructed for them to use in an offline writing game.
One small touch I added to the site was a refined mute button. The website background music though out the site, which meant while a mute button was important, it also muted all the sound effects that helped add excitement to many of the interactive games. By redesigning this as a 3 state mute button, the users could click it once to stop the music without losing the occasional sound effects, and if they found that was still undesired, they could simply click it again.
Technically
Pools of options were provided for these games by the copywriter on the project. For "Idea-o-matic" this meant considering all the combinations a user could make and creating multiple ideas for each, and for "What If" it meant writing 2 sets of nouns that could be combined randomly together in funny ways suitable for kids.
You can also visit littlebigidea.com.au to see the project directly.
