Back to journal

Delivering the Monster job infographic

Ambitious idea, tight deadline and new collaborative approaches. Deciding to aim high and just get it done; we managed to deliver something great in a very short amount of time.

In 2015 Brandwatch joined forced with Monster to create a report around job love vs job hate. Alongside the report we created an infographic to display the data in a beautiful way.

Fast-forward to 2016 and with the success of last year’s report, we’re at it again. Last year’s infographic was beautifully art-directed, however it was static and delivered as a PDF. We felt that we could take that as a base and add a new layer of interactivity and animation using web technology.

With a short amount of time and a skeleton team we aimed high.


Taking the existing designs, we ran an ideation workshop to take the old and “Blow it out of the water”.

The ideation sketching exercise works brilliantly on many levels. For one it generates a bucket-load of ideas. And yet on another, it allows everyone involved to get on the same page.

Clear understanding of the project is key. But clear understanding of your peers is the make or break of a project such as this.

“The ideation workshop was very useful for understanding the team’s expectations and aspirations.” - Andy Hook

Here’s some thoughts from Andy Hook (designer/dev) on the project:

"As a new designer to the team it was also insightful to learn of other’s tastes and influences.

Taking time to explore ideas in a collaborative, relaxed space with other designers, fuelled my creative thinking and enabled me to positively impact on the project using my web specific set of design and development skills.""


I’m a huge fan of co-design and development. It shares the work load and responsibility. Increases shared understanding. Gives autonomy to a team and most of all mixes things up a little.

I don’t think it fits every project or situation. A more traditional approach might be better for longer projects in need of lengthy iterations. But like everything… “It depends”.

"Like a selection box, you get to contribute to the project putting what you consider your best skills to use, whilst learning about others that not only compliment yours but build on them, making them more powerful."" ― Rebecca Harrison

This proved to be crucially effective in ironing out many challenges:

  • Communicating responsive design
  • The translation from flat designs to screens e.g. svg scaling, font weight etc…
  • Co-design allowed us to focus on the bigger picture. By anchoring core design attributes to code we were able to offload “comp changes” to precompiled stylesheets. This enabled
  • large, sweeping changes to colours, spacing, leading, type scales, to be made easily.

Delivery snags & challenges

With every project there are always pinch points, snags and things we could do better next time. Here’s what we found:

I’m still surprised that the “content first” approach is still not as well adopted as it should be. We are still seeing projects with incomplete content. Moreover content being an afterthought to design.

It’s important to note that this is not an issue with content itself but the processes we put in place.

When designing with incomplete content we focus on the wrong aspects. Yes, layout, typography and design can still look good but they don’t necessarily work harmoniously with the content, the story, the meaning.

On a project with such a tight timescales, strict content delivery deadlines and freezes must be in place. Unfortunately the system we had allowed for content changes right up to the deadline, which caused high levels of stress right at the end of the project.

Andy’s thoughts:

"Spotty cross-browser implementations of the SVG 2 spec directly affected the portability of our design assets. In order to achieve our animated effects we needed to hand edit exported code from illustrator, making our visual assets brittle. This meant that once authored, large visual changes would be difficult and complex to perform.

We also didn’t design with real content soon enough, when lorem ipsum content was eventually replaced, the designs felt off balance and made certain aesthetic treatments technically unachievable (Full height “slide scrolling” as an example) we would go on to solve these issues by working through the space limitations with our stakeholders, though, it made the tail end of the project more pressurised than would have typically been the case.""

I am super proud to be part of the team to help deliver the Monster Infographic.

Although there were many involved, it’s important to call out two members of the team:

Rebecca Harrison – Designer

Andy Hook – Developer

Both were new-ish to working co-design and to “try it out” on such an ambitious project is admirable. I know some features were left out, some darlings placed on the shelf, but they continued with the same energy and enthusiasm.

It was a risk and we did aim high. We didn’t manage to deliver exactly what we had planned but we came pretty damn close and delivered pretty damn quick. We added a new way of working to our repertoire and I think had a bit of fun along the way.

Monstor job infographic

Previous Post Next Post