Client Retrospective: Citalia Giro D’Italia Interactive Infographic


Every now and again we like to look back at one of our client projects as a team, and discuss how we got from the concept stage to the final piece. Not only does this help give us some fresh ideas for future projects, but it helps us improve our content development process and ensure we’re providing the best possible service to our clients.

One of our senior infographic designers came up with the idea of sharing this process with our readers and our customers via a blog post, so here’s the first of our on-site client retrospectives, and for the first edition we’ll be looking at an interactive infographic we produced for Citalia, based around the Giro D’Italia.

CONCEPT DEVELOPMENT

With the majority of our content creation clients we will work in one of two ways; either the client comes to us with a specific idea of what they’d like to see, or we produce a series of concept ideas for the client to approve. In this case it was the former – Citalia already had a clear idea for the content, they wanted an interactive map of the Giro D’Italia course, with a list of hotels and restaurants at each location for those visiting Italy for the race. The hotels would then link back to the relevant hotel page on the Citalia website, allowing users to read more about it, or even book a room if they were heading to that specific location.

Luckily, Citalia had also collected all the data for us, meaning we could head straight to the initial design stage.

DESIGN SKETCH

To allow the client to see the general design outline before we dove straight into the mock-up, we produced a sketch of how we envisioned the final piece to look:

Citalia Sketch

This rough outline not only ensures that the client knows where the design is headed, but can save us significant time in the long run if we know how the final piece should look before we start on the illustration and layout.

The sketch was signed-off immediately, which is always nice, allowing us to move on to producing the coloured, vector-based mock-ups.

DESIGN MOCK-UP AND INTERACTIVE ELEMENTS

Before we move to the project to the coders, we need to get sign off on the visual aesthetic, including colours, design style and iconography where appropriate. In addition, we also show the client some of the interactive elements of the piece using static jpegs, as this allows us to ensure a minimal amount of revisions once the project has been coded. This not only saves us a lot of effort, but saves the client money, as it’s far quicker for us to revise a static graphic (compared to revising the graphic and re-coding).

Citalia_Designed

The designs were signed off with just a handful of revisions, as well as some clarifications on how the interactive rollovers would work, which weren’t featured in the static mock-ups. Once these were sent over and revisions completed, the project was moved on to the coding stage.

CODING

There are a few different ways we can code a project, depending on the purpose of the content, whether or not responsiveness is required, what kind of functionality is required, etc. etc.

For the Giro D’Italia interactive piece it was important to the client that the copy was fully indexable for SEO purposes, so we elected to use standard HTML/CSS with jQuery, with the copy written directly into the HTML file. The client was happy with the final piece, allowing us to send over the files for their development team to place on site.

So that’s it for the Citalia client retrospective, to view the final interactive piece click the image below:

CITALIA_PREVIEW

View the final interactive piece

Want us to produce an interactive infographic for your brand or website? Give us a call on 01432 373 670 to discuss your project and get a tailored quote.

Leave a Reply

Your email address will not be published. Required fields are marked *