<ColorWheel/><ConcentricSpin/><ConicGradient/><ContourLines/><DiamondWipe/><DiffuseBlur/><DisplacementMap/><Dither/><DotGrid/><DropShadow/><Duotone/><Frost/><GlassTiles/><Glow/><Godrays/><IrisWipe/><Kaleidoscope/><WaveNoise/>

<ContourLines/><DiamondWipe/><DiffuseBlur/><DisplacementMap/><Dither/><DotGrid/><DropShadow/><Duotone/><Frost/><GlassTiles/><Glow/><Godrays/><IrisWipe/><Kaleidoscope/><WaveNoise/><ColorWheel/><ConcentricSpin/><ConicGradient/>

<DisplacementMap/><Dither/><DotGrid/><DropShadow/><Duotone/><Frost/><GlassTiles/><Glow/><Godrays/><IrisWipe/><Kaleidoscope/><WaveNoise/><ColorWheel/><ConcentricSpin/><ConicGradient/><ContourLines/><DiamondWipe/><DiffuseBlur/>

<DropShadow/><Duotone/><Frost/><GlassTiles/><Glow/><Godrays/><IrisWipe/><Kaleidoscope/><WaveNoise/><ColorWheel/><ConcentricSpin/><ConicGradient/><ContourLines/><DiamondWipe/><DiffuseBlur/><DisplacementMap/><Dither/><DotGrid/>

<GlassTiles/><Glow/><Godrays/><IrisWipe/><Kaleidoscope/><WaveNoise/><ColorWheel/><ConcentricSpin/><ConicGradient/><ContourLines/><DiamondWipe/><DiffuseBlur/><DisplacementMap/><Dither/><DotGrid/><DropShadow/><Duotone/><Frost/>

Turning a portal refresh into a shared design system.

We brought Coda's Publisher Portal closer to its new brand and built reusable foundations, components, and patterns for product teams to work from.

Some numbers, data, and statements have been altered to respect confidentiality agreements.

My role: Product Designer — system foundations, navigation, onboarding guidance, and core input and feedback components
Scope: Publisher Portal and internal admin suite
Collaborators: Frontend engineers, product manager, and lead designer
Date & place: January–March 2025 — one quarter for the first rollout

The legacy, unbranded internal portal before the redesign

Summary

How might we bring the Publisher Portal into line with Coda's new brand while reducing the UI work teams repeat for every feature?

From a Visual Refresh to a Shared Product Foundation

Coda's new brand made the Publisher Portal's older visual language feel disconnected from the company it represented. The brief began as a visual refresh, but our audit revealed a broader problem: squads were repeatedly designing and building similar UI without shared rules. We expanded the work into a design system, investing frontend capacity upfront to give teams a reusable foundation for the portal and internal admin tools.

Role details

I was one of two product designers. To work within our available capacity, I owned three areas: system foundations—including typography, spacing, and icons; navigation and onboarding guidance; and core input and feedback components, including tooltips, banners, snackbars, radio buttons, checkboxes, and toggles.

My design partner led the more complex, data-heavy components and patterns, including tables and data visualization. We aligned both workstreams within the shared system and jointly contributed to its documentation and governance.

Outcome

~75%

Portal screen coverage

Active portal screens migrated during the initial rollout phase.

Up to 80%

Fewer story points

Engineering-reported reduction when implementing standardized UI components.

Faster

Design iteration

Designers could prototype common Portal workflows by reusing foundations and components instead of recreating patterns for each feature.

Default

New admin-tool adoption

Newly launched internal admin tools adopted the shared Portal foundation.

What changed

Design tokens and reusable portal components

Shared rules for design and engineering

Shared tokens and component documentation gave designers and frontend engineers a common reference for appearance, states, and behavior. Teams could reuse those decisions across features instead of defining them again in each handoff.

Brand foundations teams could reuse

We translated the refreshed Coda identity into reusable color, typography, elevation, and spacing rules. These foundations connected the brand to everyday portal UI and provided a baseline for consistency and accessibility.

Production-ready portal component library

Components that compose into portal workflows

The library brought together form controls, feedback components, navigation, and data-heavy UI. Recurring workflow patterns showed how those pieces could work together, helping teams build on the shared system as the portal evolved.