Alight Brand Updates

Legacy brand audit

The Alight brand had been in market for over five years. While the foundation remained sound, the broader marketing system showed clear signs of drift. The issue was not any single element, but the system as a whole — lacking cohesion, consistency, and the flexibility to support evolving messaging.

Key components had not kept pace. Social templates, widely used across campaigns, had remained largely unchanged for multiple years. On the website, inconsistencies in navigation and layout introduced friction. Pages relied on heavily segmented, banded sections and dense color usage, creating a visual weight that made the experience feel disjointed.

A central finding from the audit was the overreliance on gradient bars. Initially introduced to create emphasis, they had become a substitute for a clearly defined typographic hierarchy. Rather than reinforcing structure, they were compensating for its absence.

Scroll-depth data reinforced this. Users consistently engaged with solution and insight-driven content, with drop-off occurring around less structured sections. This pointed to a need for clearer prioritization and a more intentional narrative flow.

Worklife, Alight's product brand, became a useful reference point. Its more refined use of gradients and stronger internal consistency highlighted an opportunity to evolve the broader system — and informed the explorations that followed.

One of the more significant decisions to come out of the audit was rethinking the type system. FS Thrive Elliot, while functional, introduced a humanist quality that sat at odds with the geometric construction of the Alight logo. Moving to a pairing of Arquette and Tiempos Fine created stronger alignment — clearer hierarchy, improved readability, and a more distinct editorial voice.

How the redesign addresses these issues

The layout and flow explorations were a direct response to what the audit surfaced — a site that was visually heavy, structurally fragmented, and asking users to work harder than necessary to find what they were looking for. These explorations focused on reducing that friction without stripping back the brand.

From banded layouts to cohesive flow

Before: The previous site relied on stacked, hard-separated sections with heavy color blocking, creating a stop-start reading experience.

After: The redesign introduces a more continuous layout with softer transitions and consistent spacing. Sections feel connected, improving scanability and narrative flow.

Reduced visual weight and more intentional color use

Before: Dense backgrounds and frequent color shifts created a heavy, sometimes overwhelming interface.

After: Color is used with greater restraint. Increased whitespace and calmer surfaces allow key moments — calls to action and highlights — to stand out with more clarity.

Gradients evolve from crutch to accent

Before: Gradient bars were frequently used to simulate hierarchy, often in place of a considered typographic system.

After: Gradients are more restrained and atmospheric, used as accents rather than structural elements. Typography now carries the hierarchy they were masking.

Stronger typographic hierarchy and brand alignment

Before: The type system lacked clarity and felt misaligned with the geometric nature of the logo.

After: Arquette and Tiempos Fine introduce a clearer, more flexible hierarchy. Headlines carry more presence, while body copy remains highly legible — creating a more confident and cohesive system.

Improved content prioritization and page efficiency

Before: High-value content like solutions required deeper scrolling to reach.

After: Solutions are brought higher in the layout, aligning with observed user behavior and improving visibility of key entry points. Overall scroll length was reduced by 33%, creating a more efficient and focused experience.

Clearer calls to action

Before: Calls to action often blended into surrounding sections without strong visual distinction.

After: CTA sections are more clearly defined, using spacing and contrast to create intentional stopping points that guide users toward conversion.

Better alignment with user behavior

Before: Long scroll experiences with unclear hierarchy contributed to drop-off.

After: Content is structured around clear entry points, guiding users through the page with more intention.

System-level consistency

Before: Social, web, and product experiences felt loosely connected.

After: The system brings these touchpoints into closer alignment, creating a more unified and scalable brand.

Navigation redesign

The navigation redesign was a key part of the broader system exploration — shifting not just the visual layer, but how information is structured, prioritized, and experienced. Guided by audit findings and observed user behavior, the updated navigation moves from a dense, product-first model to a more intentional, user-centered framework.

From flat structure to progressive disclosure

The legacy navigation presented all content simultaneously, relying on a multi-column mega-menu with limited hierarchy. It was comprehensive, but hard to orient within.

The redesigned system introduces progressive disclosure. Top-level categories are surfaced in a focused sidebar, which dynamically reveals relevant sub-content — creating a more guided experience that aligns with how users naturally scan and explore.

A tonal shift toward clarity and approachability

The previous navigation used a dark header, all-caps typography, and tight spacing — reinforcing a tone that felt authoritative but distant. The updated design adopts lighter surfaces, more open spacing, and a more natural typographic rhythm, bringing the experience closer to the brand's human focus.

Introducing hierarchy through featured content

A featured content panel introduces clear prioritization within the navigation. It elevates key messaging and introduces editorial voice directly into the browsing experience — something the previous system, which treated all links equally, was unable to do.

Reducing ambiguity through contextual copy

Where links were previously presented without context, the updated system pairs each item with short, benefit-oriented descriptors. This reduces friction for first-time users and shifts the navigation from a static list of links to a more informative and conversational interface.

Refining taxonomy around user outcomes

Category naming was simplified and reframed to better reflect user needs. Product-centric groupings were evolved into clearer, outcome-driven labels — aligning with how users think about their goals rather than how offerings are organized internally.

System-driven consistency and scalability

The navigation is now a system component, not a one-off pattern. Typography, spacing, color states, and interaction behaviors are standardized and aligned with the broader design system — ensuring consistency across touchpoints while enabling scalability as content grows.

Impact

The result is a navigation experience that is clearer, more structured, and easier to engage with — supporting exploration while reinforcing a more cohesive and modern brand presence.

Typography

The type system was one of the clearest opportunities identified in the audit. FS Thrive Elliot — a rounded, humanist sans-serif — had been doing everything: headlines, body copy, UI text. That uniformity flattened hierarchy and created a subtle but persistent disconnect with the geometric construction of the Alight logo. The exploration here was about finding a pairing that could carry more range without losing the approachability the brand needed.

What the old system communicated

FS Thrive Elliot is friendly and functional, but it asked one typeface to do too much. The heavy bold cut is assertive, but with closed apertures and an even stroke width throughout, it had limited expressive range. In an HR and benefits context it signalled reliability — but not distinction.

What the new system introduces

Tiempos Fine brings contrast and rhythm that the previous system couldn't achieve. Its high stroke contrast and tall x-height give headlines an editorial presence — they feel less like labels and more like statements. Arquette, as a geometric sans-serif, provides a clean and architectural counterpart. It carries weight without heaviness, and its geometric DNA creates a much more coherent relationship with the Alight wordmark.

Pairing logic and brand implications

The serif and sans pairing creates tonal range. Tiempos Fine can carry emotional, editorial headlines — language about wellbeing, transformation, and human outcomes — while Arquette handles functional copy, navigation, and UI text without competing. This is a combination that premium brands across healthcare and fintech have moved toward, and it positions Alight closer to that register.

Impact

The system moves from a single-weight, utility-first approach to one with genuine expressive range — capable of feeling authoritative in a business context and human in an employee-facing one. That dual register is exactly what the brand needs to support.

Social

Social was one of the areas the audit flagged most clearly. Templates had gone largely unchanged for years, and the visual inconsistency across campaigns made the brand feel fragmented in the feed. These explorations were focused on understanding how the updated system — new type, refined color logic, and the illustration direction — would hold up at the scale and speed that social requires.

System consistency in the feed

One of the audit's core findings was that social, web, and product felt loosely connected. These tiles were an opportunity to close that gap. Yellow is used with more restraint — as a surface, a headline, or a highlight — rather than as a default fill. The darker backgrounds echo the updated web direction and create a more cohesive presence across touchpoints.

Illustration as a brand signal

The consistent line illustration style — single-weight strokes, yellow or green as the only accent — does real brand work at this scale. It's ownable and visually quiet enough to let the headline lead. On a platform where most B2B brands default to stock photography and heavy gradients, this approach creates distinction without adding noise.

Typographic hierarchy at scale

The updated type system holds at smaller social sizes. The combination of a strong headline weight with clean supporting copy brings the same editorial confidence the web direction is working toward — and the FMLA webinar tile in particular shows the system handling information-dense formats without losing clarity or brand presence.

Templates built for scale

A secondary goal of this exploration was understanding how these patterns would perform in a production context. The tile structures are intentional — reusable, flexible, and clear enough that a production team can execute them consistently without senior art direction on every post. That was one of the practical outcomes the audit pointed toward, and these tiles were a test of whether the system could support it.

Illustration system

The illustration system was another area the audit identified as inconsistent. The original gradient style had been applied without a clear governing logic — fills appeared on some elements and not others, and the overall effect felt decorative rather than considered. These explorations were about establishing a rule-based framework that could scale predictably across contexts.

The older gradient style

The original approach used Alight yellow as a flat-to-light gradient fill. While warm and on-brand at first glance, the application lacked consistency — the fill bled across surfaces without clear logic, and elements like the money jar went unfilled entirely. It was a starting point that had never been fully resolved into a system.

Standard stroke

The stroke-only variant addresses a specific production gap — contexts where a color fill doesn't work, primarily when the illustration sits over a dark or brand-colored background. Inverting to white or black stroke keeps the illustration legible and on-brand without competing with the surface beneath it. Having this in the system means illustration can function across the full range of layouts without requiring a workaround each time.

Defining fill logic

The new colorway explorations established a clear rule: fills apply to contained shapes — scale bowls, collar, shoes — while open line elements remain unfilled. That constraint is what separates a considered system from a decorative one, and it became the principle I used to evaluate every color decision from this point forward.

Expanding the system

The periwinkle variant came out of a need to extend the system beyond yellow without losing coherence. The cooler, more editorial tone creates visual range across a feed or a content-heavy page — and its alignment with the typographic direction we were developing in parallel reinforced that it was the right direction to explore. Both colorways follow the same fill logic, which is what keeps them reading as the same system despite the tonal difference.

Impact

The result is an illustration system that moved from a partially resolved decorative approach to a flexible, rule-based framework. The fill logic is consistent, the color range is intentional, and the line work is strong enough to carry multiple expressions — giving production teams real options without sacrificing brand coherence.