FireEye / Responsive Design Modern Aesthetic for the Foremost Authority on Information Security

Responsive Design
Information Architecture
Design Strategy
User Research
Year & Duration
2014, 3 months
Share This

FireEye is a security company, taking it beyond virus scanning to comprehensive network analysis and advanced research. Undergoing a brand refresh they sought to update their web site, not only to modernize the experience, but also to make it responsive. They engaged EightShapes to conduct user research, design new page layouts, update the information architecture, and deliver responsive templates.

Exploring Initial Concepts

No sooner did we hold a kick-off with FireEye, they asked us to help them prepare for a major internal sales conference, happening in one month's time. Though EightShapes' process entails rapid design explorations, typically we collect more information before formulating a strategy. FireEye asked us to focus on setting the right tone. These explorations helped us understand the new brand strategy, and get some quick feedback on what aesthetic would resonate best with FireEye.

Home page concept

Interior page concept

Initial exporations created for feedback on aesthetics.

Setting the Tone

While these explorations were powerful, they weren't quite right. The dark, ominous aesthetic appealed to some stakeholders, but ran contrary to the reassuring, authoritative voice FireEye sought.

“EightShapes didn't just get us a new design. They asked us hard questions about the target audience and our brand. They helped us understand what we aspired to be online.”

Holly Rollo Vice President of Marketing

Sketching as a Group

Stack of sketched screen ideas with marker

Following the sales conference, we gathered the extended team together, including project stakeholders and content experts, and conducted a full-day sketching workshop.

The sketches illuminated crucial challenges balancing the need to market products while remaining an authoritative source of security information. Customers don't buy these complex products by dropping them into a virtual shopping cart — the sales process is much higher touch. At the same time, FireEye conducts extensive security research, writing articles and publishing studies. Therefore, the site needs to articulate clear next steps for customers and provide access to timely security research.

Driving Decisions Through Research

The divergent ideas generated during sketching yielded several possible directions, and user research focused our effort. The research revealed key factors for making decisions about products — how they interact with other products, benefits to the organization, screenshots from the product, and how other companies used the product.

Three sample quotes influencing how to handle product content:

Some products try to solve too many things. When I evaluate a product I look for solutions with laser focus on one problem.
- Network Operations Manager

When I look for a product, the devil is in the details. Walk me through the process of how this solves problem X. Tell me what it does.
- Operational Technology Analyst, Enterprise

Everyone speaks highly of their product. Putting the details upfront is a major boon.
- Information Systems Security Office, Government

Calls To Action

Every marketing site faces the same challenge: how do we take users to the next step? Sites like these can answer users' questions about the products, build their confidence in the offered solutions, and add value through additional content. But to be of value to the business, they need to "continue the conversation" with users. To address this, we designed a prominent call to action bar: a set of four actions we know represent key next steps for most users.

Four buttons labeled Request, Chat, Schedule, Breached
Final design of the prominent call to action bar.

Localized Navigation

FireEye’s market extends beyond North America, and to accommodate their multilingual content, the design can deal with different label lengths. We rendered their global navigation in German and experimented with wrapping content in content components. navigation design rendered with German words, to ensure it can deal with longer labels.
Testing the global nav for languages with longer words, like German.

Right-to-Left Languages

We designed the template to flip orientations to accommodate right-to-left languages like Arabic. This was in part technical — there is a switch in the CSS to render the content appropriately — and in part design — the components flexible enough to deal with a different orientation.

Side-by-side iPhones showing left-to-right and right-to-left text orientation

Representing the Brand

In parallel with the web design process, FireEye redefined their brand identity. While they had strong recognition in the market, their acquisition of Mandiant and heightened attention in the industry encouraged them to modernize. While UI explorations were underway, we worked with FireEye to extend the brand identity sensibilities to the web site. The process was iterative: we suggested interpretations and adjusted to strike the right note.

Brand exploration 1
Brand exploration 2
Brand exploration 3

Finalizing the Design

With a design direction in place and templates shaping up, we assembled a prototype for usability testing. The aim of this testing was to validate that the structure of the pages aligned with their expectations. We tested pages corresponding to product detail page, the small business page, a threat research topic, and of course the home page. As always, the testing was illuminating. While the pages performed successfully based on crucial tasks, we got valuable feedback on the prioritization of content and how certain elements were rendered.

Final design for FireEye on both desktop and handset viewports

Packaging the Front-End Code

The project concluded with our building production-grade responsive front-end HTML/CSS. In addition to the prototyped pages, we prepared variations to handle different kinds of content. Like every system we produce, the library included individual components as well as complete pages. Each component includes some variations — slight changes to the layout or formatting to accommodate nuanced content.

Screenshots of our final deliverable, pages indexing different pages and components of the design
EightShapes delivered the final design as a library of pages and components