Of Monsters and Data Mayhem

Bringing in delight when there aint no time for that.

Our startup (Jut.io) is building a data analytics tool for developers and its been as technically challenging as that first clause of this sentence would have you imagine. Over the past 6 months of product development, I’ve been trying to find opportunities to bring a human element to our app. While I believe that the core of product design is solving problems within constraints, I also believe that designers are forever the champion of the human and, unless there’s a concerted effort, products left to themselves will develop void of personality. After having addressed our baseline information architecture and ui concerns, I had just started to playing around with animation and experimenting with how animation could make an experience feel more human. It was true that Jut helps their users build dashboards that were at their core pragmatic but, if all of our dashboard’s quantitative data was an abstraction of more squishy qualitative data, why couldn’t a dashboard communicate with a user in a more personable way than just tiles of graphs and numbers? In the end, we got a totally bonkers, unexpected yet lovely monster into our product roadmap that looks something like this:

Here’s how we did it.

Finding an Opening

Jut holds a quarterly hackday. Given our intense product development schedule, I figured this break from our sprint routine could be the perfect opportunity to try and build out a proof of concept that would bring personality to our app. I had the idea of making a data driven ‘character’ so I teamed up with one of our D3 developer/designers and started hashing out an idea. After agreeing that a simple proof of concept would be an animation driven by our user’s system data, we defined three simple states that we could use for our MVP: 1- your system dashboards is not receiving any data 2 — your dashboard IS receiving data and 3 — you have an alert.

With some exploring, I found a tutorial on animating sprite sheets with CSS. This gave me a start for building an animation that we could control with CSS and javascript and drive with data:

http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps

To control our animation with code, we would export our animation frames from Adobe Photoshop into a sprite sheet using a web app (the internet is freaking beautiful):

https://draeton.github.io/stitches/

To see how the concept would play out, we created a Codepen prototype:

Inventing Something We Could Own

After seeing that we could get a simple animation to work with code, it was time to build out a distinct, expressive character that could represent Jut. Luckily our product was still in beta and we were free to create a completely new character that matched the curves and color of our product. But what type of animal or creature was abstract enough to be relatable but articualted enough to be sufficiently expressive? Enter the Jut Monster. Because the number of different data types that can be brought into Jut were endless, we knew an imaginary character was the right move for our first attempt at a data driven creature. We started iterating on some ideas:

I wanted something that could be active when it needed to grab a user’s attention yet understated when it needed to get out of the way. So, with iteration, we specked out our first three states.

During the passive state, our character would be quietly waiting:

When receiving data, our monster would exhibit just enough movement to let a user know all is well:

And, finally, when there was an error our monster would be attention grabbing:

After prototyping out how the animation worked, we were able to wire the Jut Monster up to our native coding language (Juttle). We could then see how he’d react to different situations that our users would run into.

The morning of the Jut hackday came around and it was time to share our idea with our team. The concept of bringing life into our product resonated with our team and we were voted the winner for the ‘necessary product feature before launch’ category. Our win with our engineering heavy team was an especially vindicating victory for universal appreciation of delight in product design and a vote of confidence that any product, no matter how technical, can use a touch of whimsy.

Where to From Here

Our next and final steps was to get the Jut Monster production-ready. This was the nuts and bolts piece of the equation and, with the support of our team, we were able to get him into our product roadmap.

From here, we’d like to create an open source version of the Jut Monster that could be driven by any data thats wired to a website or app. This is going to be uncharted territory for me so any words of encouragement and, more importantly, advice will be welcomed with opened arms from here :)