✌️

PwC

A digital experience as good as engaging with PwC's best people.

Now live

View the live experience

overview

Tension

Despite its dominant status as a "Big Four" leader, PwC faced a distinct market hurdle: gaining the same high-profile recognition for its advanced technology, data, and AI capabilities as it has for traditional consulting.

Approach

Stepping in as experience lead following an extensive discovery phase, I translated aligned vision and core requirements into design execution over six two-week sprints. Managing a cross-functional team of five designers alongside engineering, SEO, strategy, and motion partners, we worked in parallel with a full design system revamp.

Creative roles

Experience Lead: Myself
UX Designers: Sam Truong, Emilano Ocantos

Systems Lead: Lauren Blackburn
Systems Design: Gabe Moise

Design Director: Ant Goodwin
Creative Director: Jake Welsh
Visual Designers: Arjun Menon, Vern Liu
Motion Design: Matthew Grice

first steps

We began by iterating on experience flows for key entry points like paid ad campaigns versus global search tailored to the C-suite and functional buyer. We used these flows and wireframes to demonstrate a high-level, consultative, AI-driven experience.

red and blue cargo ship on body of water during daytime

Entry

The COO encounters a PwC marketing piece directly relevant to their current focus: gathering ideas to reduce costs and improve patient satisfaction through AI.

First Interaction (Landing Page)

Transitioning seamlessly from LinkedIn, the landing interface replaces static navigation with a dynamic text field that lets the COO ask questions, refine content in real time, and receive tailored contextual prompts.

Refinement

After scanning content fragments, the COO uses the chat to focus on workforce shifts in healthcare. The agent responds with tailored insights and dynamic prompts—like generating a healthcare page or case study—for instant content refinement.

Dynamic Content (Generated Page)

Choosing healthcare instantly rebuilds the page with a dynamic headline and tailored fragments, like industry audio and key data. This hyper-specific context quickly drives the COO into a deeper workflow with momentum-building suggestions.

Source Content

Selecting the perspective tile opens a source content view that turns static reading into a collaborative dialogue. Instead of passive consumption, the COO can debate, brainstorm, and prompt the agent for instant deep-dives, like asking about AI cost implications.

Conversion

As specific tasks emerge, the agent introduces a "Next Best Action" nudge to organically bridge the gap between digital exploration and real-world collaboration. If the source content lacks specific financial details, for example, the system surfaces relevant PwC expert profiles to initiate a LinkedIn follow or formal outreach, turning ideas into actionable relationships.

Sprint Planning

During sprint planning we broke the platform into its core experiential elements: the generative card grid, the individual content cards, the deep-dive pages they open, and the consultative AI sidebar. This sidebar drives the entire experience by generating new card grids, interrogating page content, and surfacing tailored next best actions.

Sprint 1: Content Cards

Sprint 2: Prompting and Conversation

Sprint 3: Source Content (Pages)

Sprint 4: Generated Card Layout & Grid

Sprint 5: Navigation and Measurement Strategy

Sprint 6: Holistic Experience

Sprint 1: Content Cards

In the first sprint, we ran 3 design workshops to establish the pilot experience's core content cards. We iterated on their functionality and grid architecture and aligned on a few key structural principles:

Hierarchy Through Size, Not Color

We used three card sizes to imply hierarchy, while three background colors were used purely for variety. We also established that certain cards should play in-line — like videos and audio, while other cards should expand into scrollable content pages.

Cards Expand Into Scrollable Pages

Cards act as content fragments that feature content pulled from scrollable pages. Rather than taking the user to a full page takeover, the content opens as a window right above the grid, keeping the consultative chat experience in view.

Flexible Grid That Adapts to Viewport

As the device narrows, the principals of the grid must change to support natural responsive card heirarchy.

Mobile Translation

Scaling the experience down for mobile required rethinking how the consultative AI chat and generated content coexist. Our solution treats them as two sides of a coin: a highly intuitive, elegant split. We paired a top-right pagination indicator with subtle UI nudges to effortlessly guide users to swipe whenever new content is ready.

In the first sprint, we ran 3 design workshops to establish the pilot experience's core content cards. We iterated on their functionality and grid architecture and aligned on a few key structural principles:

Hierarchy Through Size, Not Color

Cards Expand Into Scrollable Pages

Flexible Grid That Adapts to Viewport

As the device narrows, the principals of the grid must change to support natural responsive card heirarchy.

Mobile Translation

Sprint 2: Prompting and Conversation

Sprint 2 focused on the consultative interface. Based on user testing, we defined how it drives the card grid and scrollable content, and explored mobile scalability.

Prompt-Driven Landing

We provide clear starter prompts alongside a custom text input on the landing page, in tandem with an ease in of default cards and content.

Instant Generative Feedback

Clicking a prompt will immediately generate a new card grid to visually reinforce the relationship between the chat and the content.

Defining Chat Logic

This system maintains a persistent chat history for easy navigation while using intent profiling to map conversations to core criteria. Integrated guardrails ensure the AI stays on track, redirecting users if inquiries drift from uncovering relevant content.

Atomic Chat Elements

The "virtual assistant" chat bar comprises three main components: AI response (styled outputs, dropdowns, sources, and feedback loops), Chatbox Text Field (the interactive user input area with character limits), and User message (the styled chat bubble displayed post-submission).

Sprint 2 focused on the consultative interface. Based on user testing, we defined how it drives the card grid and scrollable content, and explored mobile scalability.

Prompt-Driven Landing

We provide clear starter prompts alongside a custom text input on the landing page, in tandem with an ease in of default cards and content.

Instant Generative Feedback

Clicking a prompt will immediately generate a new card grid to visually reinforce the relationship between the chat and the content.

Defining Chat Logic

Atomic Chat Elements

Sprint 3: Source Content (Pages)

In Sprint 3, we focused on the deep-dive content experience. Partnering with the client, content, and SEO teams, we mapped existing long-form content into a new information architecture. Through layout testing and category consolidation, we established a clear, repeatable framework for the site.

Long-form Page UX

We introduced a persistent header bar to anchor long-form pages, making it easy for users to quickly see authors, jump to relevant content sections, or interact with the chat. We also implemented scroll based motion to introduce moments of delight throughout the page.

Content Migration & Page Layouts

We translated legacy information architecture into four clean, card-friendly buckets: Our Thinking, Our Impact, Expertise, and Bios.

Slot Based Module Library

We built a responsive, slot-based module library built from design system primitives. This atomic approach ensures proper scaling and allows for intuitive content and module swapping.

Essential Annotation

We annotated heavily for developers, CMS editors, and A11y standards across all viewports.

In Sprint 3, we focused on the deep-dive content experience. Partnering with the client, content, and SEO teams, we mapped existing long-form content into a new information architecture. Through layout testing and category consolidation, we established a clear, repeatable framework for the site.

Long-form Page UX

Content Migration & Page Layouts

We translated legacy information architecture into four clean, card-friendly buckets: Our Thinking, Our Impact, Expertise, and Bios.

Slot Based Module Library

We built a responsive, slot-based module library built from design system primitives. This atomic approach ensures proper scaling and allows for intuitive content and module swapping.

Essential Annotation

We annotated heavily for developers, CMS editors, and A11y standards across all viewports.

Sprint 4-6: Grid Layout, Navigation & Backlog

Sprints 4-6 scaled our core AI logic into a production-ready interface with a responsive layout engine and SEO-focused navigation framework, while coordinating with PwC engineering to balance design integrity and technical constraints.

Variable-Driven Slot Systems

We built a flexible, slot-based row component supporting multiple layout splits (like 75/25 or 50/50). Using Figma variables, card slots automatically snap to the correct size variant upon component swapping, accelerating dev handoff.

Dual-State UX for SEO/GEO

Because search bots cannot interact with generative chat, we designed a parallel, topic-based index page and nav. This ensures all content remains permanent, crawlable, and fully accessible via standard mouse or keyboard navigation. 