— Case 03 · 6 min read

Designing inside someone else's system

A private community platform for Fortune 500 climate signatories — built on vendor software we didn't control, for a client that expected Amazon-level polish.

Roles
Product Designer (team of 2 + lead)
Team
MediaMonks · Teleion · Axero · TCP / Amazon
Year
2023
Format
Web platform · Enterprise B2B

TL;DR

— Problem
TCP's private community platform for Climate Pledge signatories was live but underperforming, built on third-party software we didn't control.
— Decision
Audited everything before designing anything: WCAG 2.2 AA, navigation, sitemap. Documented every component for three external teams.
— Outcome
Launched May 2023. 16 → 0 critical a11y issues at launch. 45.56% MAU first month. 97.4% organic connections.
Passport · TCP private community homepage in production · 1920 desktop layout with the redesigned navigation, hero, and content modules.
Fig 01Passport homepage in production · post-launch, with the navigation and accessibility fixes that shipped.
— Context

The Climate Pledge is an Amazon-led initiative asking large companies to commit to net-zero carbon by 2040 — ten years ahead of the Paris Agreement. Passport was TCP's private community platform for those signatories: a space to interact, share progress, and collaborate on joint climate action.

The platform ran on Axero — a third-party enterprise social tool we inherited, not chose. Our job was to make it feel like TCP built it themselves, while working within what the system would allow.

417
Signatories on the platform
902
Total users
29
Avg connections per user
— Act 01

Before designing anything, we audited what was broken

The platform was live but underperforming. We didn't touch a single screen until we knew exactly what was wrong.

Before any new design, we ran a full accessibility audit against WCAG 2.2 AA across two production templates — mapping every issue by severity and WCAG criterion.

Full accessibility audit · two production screens annotated with 16 WCAG 2.2 AA issues — each labelled with its conformity criterion, severity, and concrete fix recommendation.
Fig 02WCAG 2.2 audit.

Each issue had a specific conformity criterion, a severity level, and a concrete fix recommendation. That document became the baseline for every conversation with Teleion: not "there are accessibility problems" but "SC 1.4.3 fails here, the fix is this, it needs to resolve before we design on top of it."

In the US, WCAG compliance carries legal liability under the ADA. For an Amazon initiative, zero tolerance wasn't a preference — it was a requirement. So we integrated accessibility analysis into the workflow from that point on: every new component went through contrast checks, focus state review, screen reader label verification, and keyboard navigability before handoff. Not as a final check — as part of the design.

16
— Issues mapped before design started Some critical — blocking users with assistive technology entirely. Each one resolved before any new screen was drawn on top of it.

We ran the same audit methodology on the navigation — mapping the full sitemap to identify where the structure was failing users.

Sitemap audit in Figma · the full Passport architecture with magenta annotation nodes distributed across nodes that fail navigation, hierarchy, or wayfinding heuristics.
Fig 03Sitemap audit · the platform's full architecture with annotated failures across navigation, hierarchy, and wayfinding.
— Act 02

What the navigation audit revealed

Three structural problems ran through the entire platform.

No hierarchy.

The homepage used a left navigation that competed with the primary nav, hiding content instead of surfacing it. Important sections weren't visible at first glance.

No orientation.

Active states never updated as users moved through sections. Breadcrumbs existed but were broken — linking to wrong pages, showing incorrect paths, or leading to dead ends with no way back.

No consistent user paths.

Cross-linking produced unexpected results. Search returned results without context for where they lived in the site.

To make the problem concrete for TCP, we mapped a user journey. John, a sustainability manager at Cabify, arrives looking for decarbonization content.

Meet John · sustainability manager at Cabify · persona introduction with three goals on Passport: stay informed about emerging tech, discover best practices, collaborate towards decarbonization.
John's first attempt · annotated walkthrough of homepage → search → search results, with navigation issues, user thoughts, and dead ends labelled per screen.
John's second attempt · annotated walkthrough of forums → value chain decarbonization → activating SME suppliers, with breadcrumb failures, left-nav inconsistency, and missing footer surfaced across each screen.

The behavioral data confirmed it. The most-used actions were login, view, and update profile — passive behaviors. Start a discussion, explore forums, post content: barely used. The navigation was actively suppressing the community behaviors the platform existed to create.

— Working method

Before exploring any solution, the first question was always: can this actually be built inside this system?

— Act 03

Designing within constraints

A two-layer working process — async on the technical reality, fortnightly on the strategic one.

Asynchronous

Continuous audits submitted to Teleion. Each item came back as yes, no, or partial — possible with workarounds, possible with custom dev, or hardcoded and untouchable.

Fortnightly

A meeting with all four parties — MediaMonks, Teleion, Axero, TCP — to make constraints visible to the client. If something couldn't be done, Amazon needed to know so they could decide whether to push the vendor or accept the limitation.

The navigation restructure

We reorganized the primary nav into six sections with explicit hierarchy, content mapping, and redirect logic. Subtractive design where it mattered: breadcrumbs were removed entirely. They weren't working and Axero's constraints made them unreliable to fix. We designed the hierarchy to be clear enough that users didn't need them.

Primary navigation proposal · six pillar sections documented with hierarchy, content mapping, and redirect logic for the restructured Passport site.
Fig 07Primary navigation proposal · six pillars, with hierarchy and redirect logic documented per section.

The secondary navigation was designed in two role states — admin and non-admin — because the platform needed to surface different actions for each without adding navigation complexity.

Secondary navigation · admin state · expanded actions surfaced for community moderators and TCP staff.
Admin state · with moderation, posting, and TCP-only actions surfaced.
Secondary navigation · non-admin state · simplified set of actions for regular signatory users.
Non-admin state · same structure, only the actions a signatory user can take.

Component documentation

The same principle of precision applied to handoff. With three external teams involved, any ambiguity became an incorrect implementation that took weeks to correct. Every component delivered to Teleion included the full spec — description, elements, behaviors per breakpoint, motion references, and all states and variants for desktop and mobile.

C-43 Latest Stories · Specs page · description, admin permissions, variants & states list, and behavior copy per variant for both desktop and mobile/tablet.
Fig 09Description & behavior · variants, states, and per-breakpoint rules documented for the Latest Stories component.
C-43 Latest Stories · Elements table · numbered list of every element in the component (Title, Subtitle, Secondary CTA, Card, Arrows, Progress Bar) with mandatory toggle, description, and spec links.
Fig 10Elements · every element catalogued with mandatory flags, descriptions, and links to atomic specs.
C-43 Latest Stories · Motion references · hover state behavior for the desktop card, with duration and easing values, plus the 'Get the stories that matter' frame in its expanded layout.
Fig 11Motion references · hover state described step-by-step, with duration (800ms) and easing (0.6, 0, 0.2, 1) specified.

The level of specificity wasn't overhead — it was the only way to get consistent results from external teams with no context on TCP's standards.

— Result

What shipped

Passport launched in May 2023. The full navigation restructure required custom Axero development and moved to the roadmap as a phased implementation. What shipped was the set of improvements possible within the system: active navigation states that correctly reflected where users were, footer present across all pages, TCP brand identity consistently applied, and accessibility issues resolved before go-live.

Passport · Discover page in production · 1920 desktop layout with content cards, filters, and the redesigned navigation applied.
Discover · content surface with the redesigned navigation, accessible contrast, and consistent TCP brand applied.
Passport · sub-space page in production · long 1920 desktop layout with content modules, breadcrumb-free hierarchy, and footer present.
Sub-space · hierarchy clear enough that breadcrumbs aren't needed; footer present on every template.

Launch metrics

417
Signatories on the platform
45.56%
Active in the first month
97.4%
Organic connections
1.9 days
Avg support response time
— Closing

What I learned

Accessibility is a design constraint, not a QA step.

Running WCAG analysis before designing — not after — meant compliance was structural. When legal stakes are real, retrofitting isn't an option.

Documentation is design when you don't control implementation.

The level of specificity required wasn't overhead — it was the only way to get consistent results from external teams with no context on TCP's standards.

Sometimes the right call is to remove, not fix.

Breadcrumbs that misdirect users are worse than no breadcrumbs. Designing clearly enough that orientation cues become unnecessary is a harder problem than patching what's broken.

— Closing line

Designing inside someone else's system means making the constraints part of the brief.

— Next case · 04 / 04

The pieces that didn't sell

Continue →