Simon S Sotelo

Flickerbox

Cisco: Metro Fabric

Interactive Infographic Web Page

 

Client Objectives: Supply Cisco sales team with an easy-to-follow infographic that can translate the benefits of integrating Cisco’s Metro Fabric into your business. Our goal was to impress those who may not necessarily be technically literate, but who are the leaders making big decisions and oversee technical departments. This means we rely heavily on visual metaphors to translate complicated, intangible software into easily digestible visuals.

My Formal Role: I was assigned to this project as the designer and would be responsible for both the layout and creating visual metaphors for the project.

My Role in Reality: I was creative director, art director, designer, and illustrator for this project. In the past I had collaborated on many infographics and webpages with an art director however, this was the first project I started and executed on my own. I collaborated closely with my project manager who kept our client on track, our technical writer understood the technology, and the developer who brought the information to life.

 

Themes

After reading the initial copy doc I highlight words and phrases that jump out to me as good representations of the messaging. I like to make word maps or word lists where I can explore the themes of the text and gather ideas for visuals to create a narrative.

wordmap.jpg
 

Branded Styles: Overview

When my team started working with Sketch, the first thing I did was build a Cisco style guide in Sketch that would streamline the layout and allow the team to access more consistency across projects.

Screen Shot 2019-08-27 at 6.40.40 PM.png
 

Wireframe

While I am working on my word maps for visual themes I am also working on a low-fidelity wireframe at the same time. This wireframe helped me collaborate with our technical writer and I would receive feedback from him ensuring that I understood the information and that it was separated correctly.

The developer assigned to the project is looped in at this stage to look over the initial layout and voice any concerns.

 

Concept for Visual Metaphor & Illustrated Style

Once the the wireframe is approved by the technical writer and the client, I created a metaphor to represent how the visuals relate to the software in the text, but in a short and concise summation. My role at this stage is to recommend a style that showed how my metaphors related to the messaging.

This is where my expertise as a visual designer and creative lead really shine. I shaped my metaphor around was the theme of building bridges from the provider to the customer in order to to overcome the “hurtles” mentioned in the main headline. Cisco’s Metro Fabric would act as the bridge between two islands.

 

Approved Layout

Depending on the amount of information and the context of the information, I designed and illustrated visuals that supported both my metaphors and the messaging contained in the information.

Cisco is a really great client to work with. Normal revision patterns with them are limited to changes in terminology because the phrasing needed to be accurately representing what the software was capable of and what Cisco was offering as a service. If you’re following their brand style, rarely do they ask for stylistic or design changes.

 

Challenges

Because this was the first Cisco project I started and executed with a near complete anonymity, working through the visual metaphors was initially challenging because translating the complexity of Cisco’s software is a dense job. The project manager is aware enough to provide guidance on general terminology and the technical writer is knowledgeable but not able to provide creative feedback on visual translations. To make sure I was representing the information accurately, I gave myself extra time to thoroughly digest the information and sent lots of emails consulting with the technical writer. In the end, the most invaluable feedback I received was my own. It was important for me to spend time away from the project so that I can an objectively fresh opinion of how well my metaphors are translating.

Another challenge for this particular project was the technical representations of the software. Cisco relies heavily on their icon library and fun illustrated style to connect with their customers, but in this project I had to replace a couple of illustrations with a several very technical diagrams. Some looked more like icons than diagrams but were nonetheless they all felt clunky. When I consulted client about their implementation, I was told to “visually improve them”. This of course left me with a lot of freedom but I knew I needed to show restraint more than anything else to accommodate the technically dense set of visuals.

For the larger “Lean Architecture” diagram, my stagey was to recreate the graph but without using Cisco’s heavy stylized shapes. I needed to maintain the delicacy of the thinner line weights that were featured throughout the project.

 

Reflection

I am very satisfied with the outcome of this infographic. It was an important leap in my capabilities as a designer and for my confidence as a creative leader. Looking back I would have made altrnate versions of the smaller diagrams so they maintained the same delicacy that the rest of the supporting illustrations had.