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.
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.”
Sketching as a Group
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:
- Network Operations ManagerSome products try to solve too many things. When I evaluate a product I look for solutions with laser focus on one problem.
- Operational Technology Analyst, EnterpriseWhen 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.
- Information Systems Security Office, GovernmentEveryone speaks highly of their product. Putting the details upfront is a major boon.
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.
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.
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.