Living in a Material World
When I stood up at the SEEK Hackathon 4 pitch pulpit and told a crowded room that our hack would involve getting back in touch with our childhood love of art and craft, I’m sure most of the room thought I was joking. I wasn’t, and it was my best Hackathon ever.
Inspired by Design
Soon after Google’s release of a whole swathe of inspirational background videos and tutorials to coincide with the one year anniversary of Material Design, we decided to understand how we might use Material Design ourselves, and a Hackathon provided us with the perfect opportunity.
As a team we’d been collectively drooling over the Google’s Material Design specs since their release. Android users amongst us had seen the design language maturing and had seen both good and poor interpretations appearing in the Play Store. We’d come to appreciate the simplicity and clarity of the products that were appearing as a result of Google's hard work.
Material design brings a uniformity of visual design and experience to Google products across devices. This ensures a strong brand identity while also delivering a consistent product experience that is elegant to behold. For brands other than Google, the question becomes: how can that consistent product experience be used to lighten the learning curve for Android users, who use our apps, without losing our own brand identity?
It was past time for us to explore what Material design could mean for Design at Seek.
Getting Analogue
The idea itself was simple. We took an existing mobile user flow (in this case shortlisting a job to view later), broke it down into its component parts, and then rebuilt the entire experience from scratch. Starting with a core team of three Designers, we were quickly joined by a QA Analyst, a Business Analyst, and a Strategy Executive — all with a hankering to cut and paste.
After a quick review of what was best practice in live apps, we raided the Seek offices for coloured card, pens, guillotines, and glue. Our project commenced with a flurry of sketching, cutting and pasting.
The first challenge was to understand the elevation, or the relative depth, or distance, between the various surfaces along the z-axis that make up our design. Where does the System Status Bar sit along the z axis in relation to the Content Cards? In relation to the FAB (Floating Action Button)? We answered these questions by sketching elevation schematics all over the office windows, with whiteboard markers, which we then transferred to black card.
Now that we’d begun to understand the basic principles of elevation, we started constructing very lo-fidelity concepts using index cards. These early concepts helped us understand the intricacies involved in getting the elevations right and planning the spacers required to get the relative depth we needed.
Now we were confident with the process of creating our paper models, we needed a way to document our process. We constructed a crude lighting rig to generate the right shadows for our various elevations, and set up a camera to take a photo every second as we built each screen up from scratch. The exploration of shadow was an important part of the process for us as Google’s Design Specs place a special emphasis on the role the shadows play in indicating the amount of separation between surfaces and hence each elevation.
Armed with all the knowledge we needed, we began the process of cutting, layering, and compiling the various screens we needed to make up our user flow. All under the gaze of a camera taking one photo every second.
The final video showed how we compiled all the screens over the the day and how we used spacers of various heights to ensure we got the correct elevation for each element. There’s also some bonus photos of (most) team members spliced in along the way.
Getting Digital
While some of us were getting paper cuts and sticking our fingers together with glue, the rest of the team were working on the digital component of the project. In the spirit of the Hackathon, new tools were used (in this case Sketch and Framer) and the Animation and Style components of the Google Design spec were put under the magnifying glass.
We tinkered with a Visual style that represented both the core essence of Material Design and our own brand DNA. We also played around with getting the animations as close to perfect as we could in a limited amount of time.
The demo video we created of the Digital component of our project was a hit at the Marketplace. It demonstrated to a predominantly iOS heavy audience, just what Material design entailed, and how designing for the Android ecosystem could deliver a beautiful, tailored experience.
One may ask, how did the Analogue component help with the Digital part of the project? There were two main benefits we found from creating the paper models (and one side benefit).
First, we were able to use the paper models to work out the correct required elevation on specific screens — much easier to do using paper models than on screen.
Second, when fine-tuning the animations in the interface, we found ourselves playing with the models and pieces of paper. This helped us work out how various screen components should move as they entered or exited the screen.
Finally, we ended up with some great artifacts for people and judges to play with at the end of our Hackathon in the Marketplace ;)
