Google Cloud has a lot of innovative products that are often complex and extremely technical. It’s particularly important for executives and developers to understand the importance and value of these services if they are going to buy and implement these technologies. So our client challenged us to create an online experience that helped educate people about how Cloud Run can help businesses build, test, and deploy serverless applications. To do this, we used the analogy of a train–where people could select different cars, assemble them in any sequence they want, test how they interact with one another, and then launch them into the Cloud.
Google already has defined brand guidelines, but we tried to push those boundaries as much as possible. We began pulling 2D and 3D references from other Google work and from similar styles. Once we settled on a 3D look, we began building prototypes to test different train cars to gain a clear perspective of what was working and what wasn’t. We tried to use prototypes as our wireframe as much as possible. This gave the client a true sense of how the concept was coming to life, helping eliminate a lot of the back and forth and keeping everything on schedule.
Once we settled on our train analogy, we began working on the UX/UI and design system. Once that was in a good place, we tried to maximize our ability to collaborate among the writers, designers, producers, and animators on the team. This meant choosing familiar libraries like GSAP for animation and three.js for rendering, so we could dip into the third dimension for a bit of pop. We also made custom build processes so designers could keep track and provide immediate feedback - for example, the train tracks are all built from a big SVG document. To reduce hosting and security concerns, we utilized internal tools built around Google's Application Engine platform.
Sketch, LitElement, three.js, GSAP, Redux, NumPy, and Google App Engine.