A Contemporary and Responsive Experience

Creating a design system for an information security authority.

FireEye Responsive Design

FireEye is a cyber security company that focuses on comprehensive network analysis and research before, during and after an attack. This project with them was a mobile-first endeavor with its cornerstone on creating a visual design system from the ground-up; a modern, responsive experience.

  • Client:


  • Budget:


  • Live Demo:

  • Skills:
    • Visual Design
    • Art Direction
    • Responsive Design
    • User Experience Design
    • HTML
    • CSS
Style Tiles
Three potential visual design directions for FireEye. Dark was a favorite but a lighter style won out in later stages of design.

Setting Direction with Style Tiles

Soon after the kick-off meeting FireEye revealed that an internal sales conference was looming so the first step was to quickly explore the right visual tone. I employed style tiles for this effort, an inexpensive tool used to scrutinize multiple visual design directions without getting into the weeds of a page mockup.

The tiles quickly elicited feedback on what look and feel best fit FireEye. The concepts were good – but not exactly right. They were dark, ominous, and did not speak to the reassuring, authoritative voice that FireEye wanted. Thank goodness style tiles don’t unnecessarily eat up a budget! The feedback I received, along with some new questions and more iterating got us back on track soon after that first deliverable.

Redefining Brand Identity Mid-Step

Several weeks into the project FireEye acquired Mandiant, another cyber security company. The pairing increased their already strong market recognition and it encouraged them to further push my UI explorations. We worked together on new visual design and UI directions, testing page mockups along the way.

Products, small business offerings, research pages and the home page were the focus of testing; we learned a lot about what content to prioritize as a result.

homepage iterations
Four iterations of the homepage based on the emerging visual design direction.
Library elements for devs, including colors, typography, buttons, etc.

Communicating Design Decisions

I do my best to make developers’ lives easier when I can. On this project I created a stencil (or library) of components and styles in Illustrator so that the developer I worked with had reference to address potential questions about spacing, type styles, colors or elements like buttons, responsive tables and pull-quotes.

In a brilliant twist on behalf of the developer, the project culminated with an HTML version of this stencil; essentially a library of responsive components that include variations to style or layout depending on page width or context. This document would go on to serve the developers building the website.

Right-to-Left Languages

The added advantage of using HTML prototypes was the inclusion of a CSS element that allowed us to flip the orientation of a layout. This inclusion was exceptional for testing right-to-left languages like Arabic or Urdu.