Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
23rd May 2014

Build with Chrome: a peek behind the scenes

If you ever thought Google Maps could do with a Lego face lift then this one is for you. Here’s how the folks at North Kingdom brought this high-profile union to the world

Build with Chrome: a peek behind the scenes

PROJECT: Build with Chrome | AGENCY: North Kingdom

Who doesn’t love Lego in some capacity? Most of us will have grown up with it, or at the very least watched our kids grow up grappling with the stuff. Who would have thought those snappy little multicoloured plastic bricks would become such a timelessly iconic toy? Well, Mr Lego obviously – Danish inventor Ole Kirk Christiansen seemed to know what he was launching in 1949. What he perhaps didn’t know was that his ‘Automatic Binding Bricks’ would spawn theme parks, videogames and now a feature film in its own right. The Lego Movie plays to a whole new generation of fans in every corner of the globe, linking neatly to our featured project.

Build with Chrome is an interactive web tool for bringing the Lego world into Google’s browser via cutting-edge WebGL technology. It offers anyone the chance to build Lego-based constructions across Google Maps and share creations within Google+ circles. Originally built in 2012 to celebrate the 50th anniversary of the Lego brick among Australian audiences, this wider release boasts new features and tie-in content for promoting the film. Fittingly, it would be another Scandinavian export with Hollywood ambitions credited with development duties, in the shape of Swedish agency North Kingdom. “To be honest, it wasn’t difficult to excite or challenge our team to begin imagining what worlds we could create with Lego bricks and Google Maps together, because it felt so natural once we heard about the idea,” the team begins. “Technically, we have been creating imaginative places with Lego bricks for years in our own bedrooms, living rooms, parents’ offices and even classrooms to say the least; which is why the idea of integrating Lego with Google Maps felt too good to be true.”

Build with Chrome: a peek behind the scenes

But true it indeed was and still is, so we would compel those not acquainted with buildwithchrome.com to experience it for themselves. However, for a project of this profile to get out of the ‘blocks’, the story really begins with this enthusiastic appreciation of the client’s brand identity. By understanding the appeal of Lego, North Kingdom and Google could leverage web services in order to deliver something that was as compelling as it was true to the product’s spirit.

“Before we kicked off the project, we knew we wanted to capture the enthusiasm and physical joy of building with Lego bricks in a digital experience with Chrome. As the months passed and when the 50th anniversary celebration ended, it was interesting to see people from all over the world continuing to build with Lego bricks over Australia and New Zealand. This, of course, attracted attention from Google and Lego to extend their relationship and consider opening the Build with Chrome playground to the whole world. Hearing this, we were undoubtedly stoked and excited to revisit Build with Chrome and help make it happen.”

And this was a revisit, given that the first iteration was launched two years prior as a campaign with M&C Saatchi/Mark from Sydney, Google Australia and Lego. As a result, the updated global version enjoyed today didn’t start with a traditional brief. Instead, it evolved from various discussions with Google, discussions that allowed North Kingdom to explore upcoming technologies that were available for the application.

Build with Chrome: a peek behind the scenes

“Additionally, there were a lot of learnings from the first version of Build with Chrome that we reviewed and were able to apply to the Global Edition. Once we did that, we extended our conversations with both Google and Lego to understand their brand goals for 2013 and 2014. During this creative iteration with the client the creative director, UX director, technical lead, and producer were able to shape a brief. Here we would connect the dots that would help honour both brand goals and preserve the enthusiasm and physical joy of building with Lego bricks within Build with Chrome moving forward.”

These weekly creative discussions with Google and Lego would in fact span the project duration, but crucially it set the theme of scope. An obvious goal was to spread Build with Chrome out across the world, inviting anyone from anywhere to build on any location. This would then spawn logistical questions, ideas and possible solutions that would be gathered together and addressed collectively during what the team refers to the ‘discovery’ phase: “For example, opening to the world quickly raised questions about how to organise all these unique user builds? How will we motivate people to explore areas outside their home? Can we follow all the potential great work that happens in Build? These questions helped us shape the brief and understand what values and expectations the new Build with Chrome would create.”

Out of these sessions would emerge two key areas, with the first being the addition of a mobile experience. Initial investigations here involved UX director Alfredo Aponte and developer Lars Alin building prototypes of the Builder Tool to establish possible gesture behaviours and the tactile controls achievable through the browser: “The results were actually discouraging at first because all our expectations were built up from our experiences with apps, not browser tools. So, we decided to rebuild the builder tool completely from scratch with a new set of interaction rules that we had learned from the prototypes to ensure fans of Lego can build easily and efficiently.”

Build with Chrome: a peek behind the scenes

1 When the user is in the 45° state of the Explore mode, a compass will appear. This provides the user with the ability to change the bearing direction (north, south, east, west). In other words, the user will be able to easily rotate the scene into set positions.
2 With visual feedback, the user will be able to recognise every potential square/plot on the map in the 45° state. Every single square on the grid will be equivalent to a base plate.
3 Here is an example of a structure or a build within the world. These types of builds will be locked plots that will reveal certain levels of detail for the user when clicked.
4 Here is an example of an area of the map that will be blocked from users to build onto because another user is actively building on that site. The public will not be able to see the active work until it’s published in the backend.

The second key area was what became the Build Academy feature, offering users support in developing their build skills. This was very much a reaction to usability and quality assurance results that had been observed from the initial version, realising that ideas, hints and tips could be leveraged to encourage user interest. “Lego loved this direction of thinking with the Academy and immediately felt it matched several themes that would be represented in their first movie Piece Of Resistance in 2014 and as such, Build with Chrome could be perfect to tie in to marketing and introducing a new set of Lego characters to the public.”

The maintaining of focus became a challenge, with so many ideas being floated in the early stages. The team admits that producer Kaya Hatcher was pivotal in ‘steering the ship’, formulating how the guys could pull everything together effectively. “We even tested a list of new features that we foresee may be valuable to add to Build with Chrome, but over time it became apparent that we were more excited with new colour options and new bricks. As a result, we began to shift our attention on upgrading the rendering engine for Build with Chrome to allow us to add a larger library of Lego bricks with more complex shapes to the overall experience.”

As the project moved into front- and back-end development, the visual design would in no small part hinge on certain constraints. Art director Jonas Eriksson put a lot of work into reviewing brand guidelines and set goals appropriate for representing clients such as Google and Lego. This would allow Build with Chrome to evolve organically in look and feel, rather than a remixing of old assets on new platforms: “He worked really hard in the beginning to find a creative balance between Google and Lego, which was very challenging since Google’s direction is far more flat compared to Lego. Over time, the overall art direction began to fall into place when Jonas started seeing visual patterns across all the devices and it became clearer to apply Google’s flat style to the user interface and allow the more graphical elements to be playful with Lego’s characteristics.”

Build with Chrome: a peek behind the scenes

In fact, the original vision for the Build Academy was to follow this ‘flat’ Google style, instead preferring the ‘big and juicy’ 3D look for emphasising the chunky physicality associated with Lego bricks. This would then facilitate subsequent visual connections with the movie and new characters introduced within Build with Chrome. Moving more towards the nuts and bolts of coding, the developers were actually involved earlier in the creative process. From day one they would be building prototypes to understand the potential of the chosen technologies. With so much interactivity expected, developer Lars Alin is known to have made at least 30 prototypes just testing variations of interactivity would be smooth and robust. The key goal here was to ensure that Build with Chrome felt like a dedicated application in its own right, built for purpose and specifically for touchscreen devices.

“Our developer, designer, and UX lead continued working hand-in-hand through this process to find solutions on how to manage and represent the features. When designing highly interactive touch applications you will discover that the screen quickly feels small and the user’s fingers tend to cover a lot of the screen while interacting. This became obvious when working with the Builder Tool on mobile devices, which required creative solutions to help assist the user.”

DOING IT FOR THE KIDS

Lego has fans of all ages, but naturally that includes a predominantly young audience. When working with a product such as this, it must be handled very sensitively in order to protect the brand and the users alike from potential misuse.

“What many people may not see with the current Build with Chrome, or even the previous one is that it required a great deal of attention on how to balance censorship, security, and the client’s brand values. It’s easy to get caught up with what you can do with Lego, but many people forget it’s a toy company aimed at children and the internet could be disturbing place if you are naïve.”

It presents quite a tough challenge, especially when you want freedom and flexibility to be so central. The question is then, what steps can you take to effectively mitigate the potential negative impact on both sides? “We set up Build with Chrome Global to require Google+ authentication for publishing builds. [This is] because it allowed us to directly associate builds with the builder’s name, allowed us to manage who is building, and ensure that the builder is 13 years and up because Google Accounts requires this to create an account. The lead-up to launch day still becomes a bit nerve-wracking with public relations beginning to fear what people may build and what kids may see!”

You would guess then, with so much going on, this was a hard application to optimise enough to run on mobile. Streamlining things down while keeping features and functionality consistent across platforms must have been a nightmare, surely? “Well, in the Explore 3D mode there is quite a lot going on at the same time; loading of base-plate textures, loading builds, animating and rendering builds. This was very heavy on both GPU and CPU that greatly affected the performance on phones.

“However, technical director Hans Eklund found a way to optimise these parts as much as possible with amazingly small tweaks to the frontend to help keep the experience consistent across all devices and platforms. For example, on mobile devices he was able to reduce the load by simply zooming a bit closer to the builds, so that we can render less builds at the same time.”

So when it came to the launch phase, it’s probably fair to say this was more like a rebirth or an update than most projects. What the team seems to be proudest of in terms of what this has meant for Build with Chrome is the sense of opening the whole experience out. Not only in terms of contributing brand-new creative ideas, but more obviously by dramatically expanding the user base, and so pleasing the clients in the process.

“We set up the Build Academy to be open to all and not require Google+ to enjoy Build with Chrome. The Academy allowed us to create a linear story experience in comparison to open freedom that Build with Chrome Global offered. In other words, you can say the Build Academy is a schoolyard while Build with Chrome was the public park. This is how we were able to calm down the public relations office and allow the brands to trust us that we have taken account of their considerations.

“Beyond this, there are several small updates planned for Build with Chrome over the next year that involve community building, new features, and Lego bricks. But it’s been wonderful to see a project begin as a campaign in 2012 and transform into a platform in 2014, inspiring Google and Lego to continue working together and strengthening their relationship.” Laying foundations and building bridges in more ways than one…

Tags: ,
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://uxfindings.blogspot.com eeklipzz

      uxfindings.blogspot.com: Thanks for the good read. That was a way clever title. A “peek” behind the scenes. So silly.