← All work
Case Study

Forrester Research Visual Identity

Forrester is one of the most respected research and advisory firms in the world. Their digital presence didn’t reflect that. We redesigned it from the ground up: visual identity, component library, and all.

Role UX + Product Design
Disciplines Visual identity · Component design · Editorial UX
Year 2017–2021
Employer Tank Design
Forrester Research Banking vertical page — desktop and mobile responsive design

The problem

Starting with what wasn’t working.

Forrester’s site had grown to serve multiple audiences: analysts, enterprise buyers, and individual subscribers, without a clear hierarchy for any of them. The visual language had accumulated inconsistencies over years of independent decisions.


Research

Understanding the audience first.

Before touching the design, we mapped how different users moved through the site and where they were falling off. The research shaped every structural decision downstream: what needed to be prominent, what needed to be findable, and what needed to get out of the way.

Forrester wireframe explorations — three page layouts showing content hierarchy, navigation patterns, and conversion pathways
Wireframe explorations

Structural thinking across content types, from vertical landing pages to insight articles and conversion flows.


Visual direction

A brand that finally fits the content.

Forrester had strong visual equity but no system for applying it consistently across a complex content library. The redesign built that system: a visual language specific enough to be distinctive, flexible enough to handle hundreds of content types.

Multiple design concept directions — homepage variations exploring typography, color, and layout for go.forrester.com
Concept directions

Multiple visual directions testing brand expression, content density, and conversion balance.

Forrester collage illustration examples — double exposure portraits blended with data visualizations and urban photography
Collage illustration

A signature visual system blending photography, graphic elements, and data symbolism into editorial collage.

Anatomy of a Forrester collage — three-step process: identify content themes, determine symbols and metaphors, compose and blend
Collage system rules

Documented the three-step process: content themes, visual metaphors, composition, so any designer could produce on-brand collage.

Forrester collage illustration library — 28 unique collage compositions spanning research topics from AI to retail to cybersecurity
Illustration library

28+ original collage illustrations spanning Forrester's research verticals, each tied to specific content themes.

Forrester header block component — Banking vertical page showing desktop and mobile responsive design with collage hero illustration
Header blocks

Responsive header components pairing collage illustration with vertical-specific content across breakpoints.

1 / 5

Design system

Designed to publish at scale.

Forrester publishes hundreds of reports, briefs, and events per year. The design system had to make that volume manageable, for editors and marketers, not just designers. Component logic, editorial guidelines, and publishing patterns were all part of the handoff.

Forrester design principles — six principles defining the visual language: Refined, Meticulous, Independent, Inspirational, Deep, Intentional
Design principles
Forrester typography system — Ivar Display as the primary typeface, rooted in editorial tradition
Typography
Forrester color palette — Forrester Green primary, rich secondary palette, flexible tertiary highlights
Color system
Forrester infographic system — charts, graphs, and data visualization components using the brand color palette
Infographic system

Site

From system to site.

The final component library gave the Forrester team a foundation they could extend independently. We handed off with documentation, not just files.

Forrester component library — grid system, color tokens, typography specifications, CTA patterns, and spacing rules
Foundation components

Grid, color, typography, CTAs, and spacing: the atomic layer of the design system.

Forrester block library — hero blocks, content cards, insight modules, promotional blocks, and author components
Block library

Composable content blocks for heroes, insights, promotional modules, and author profiles.

Forrester final design components — body blocks, insights, insight articles, and promotional blocks shown at desktop and mobile breakpoints
Production components

Body blocks, insights, articles, and promotional modules, each responsive across breakpoints.


Cross-channel

Extending the system beyond the site

The visual identity extended into email marketing, event invitations, and campaign materials, ensuring the brand showed up consistently wherever prospects encountered Forrester.

Forrester email templates — three campaign emails shown in Outlook, each using the collage illustration system and brand typography
Email templates

Campaign and event emails carrying the same visual language from site to inbox.


Outcomes

System-first

Component library built before page templates.

Editorial scale

Designed to support hundreds of publishes per year.

Documented handoff

Team could extend the system without design support.

Next case study
Skype for Business
Senior UX Designer

Skype for Business

Visual design vision for enterprise communication at Microsoft.

Open to new work.

Boston & remote

will.a.bruno@gmail.com