kanchangaur.com / Customer Experience Hub
LOS ANGELES

LA Metro / public website / customer experience

Customer Experience Hub_

Turning Metro’s 200+ page Customer Experience Plan into a web hub that riders and officials can navigate.

My role
Product designer
Year
2023
Platform
metro.net, mobile and desktop
Status
Live on metro.net
PDF to web
200+ → 4 pages
Initiatives
150+
The Customer Experience Hub on mobile and desktop: the opening message, rider survey highlights and the action item tracker.
01

My role and who I worked with

As the product designer, I brought Metro’s Customer Experience Plan to the web:

  • Site map and page structure for a four-page hub
  • Mobile-first concept sketches built from simple content blocks
  • Wireframes that brought the plan’s key statistics into the layout
  • Survey data analysis and interactive Infogram charts
  • High-fidelity visual design in Metro’s brand, tested across devices
  • Kanchan GaurMEProduct Designer, The Glue
  • The GlueMy team on the project
  • LA MetroClient and stakeholders
  • Fehr & PeersDesigners of the CX Plan

Client/Los Angeles County Metropolitan Transportation Authority (LA Metro). Stakeholders validated content blocks and wireframes.

The project team from LA Metro, The Glue and Fehr & Peers.
02

Summary

Metro’s 200+ page Customer Experience Plan was a dense PDF that riders and officials couldn’t navigate.

In 2023 I worked with LA Metro to bring the plan, designed by Fehr & Peers, to life on the web. I turned it into a four-page Customer Experience Hub (the hub, Plans, Survey Results and Action Items) with clear sections, modular content blocks and interactive data visuals. It became a public source of truth for Metro’s progress, and it is live at metro.net/about/customer-experience-hub.

03

The problem and the goal

What wasn’t working

  • A dense PDF. The 200+ page plan didn’t work on the web, and riders and officials couldn’t navigate it.
  • Low visibility. Riders couldn’t find updates, so few people understood what Metro was improving.
  • No proof of progress. Officials needed metrics to show progress.
  • Unusable data. Survey results only existed as raw spreadsheets.
  • Weak trust. Without a clear view of the work, it was hard to communicate progress and earn trust.

Two audiences, two depths

Public riders

A busy Metro rider concerned about homelessness

  • Needs easy access to what Metro is doing about homelessness on the rail system
  • Wants recent updates on improvements, plans for the future and a way to give feedback
City officials

A city official developing transportation policies

  • Needs ridership data, demographic information and travel patterns for evidence-based policy
  • Wants a transparent view of survey results, reports and plans, and a way to collaborate with riders on feedback

The goal

Make the plan accessible and understandable, and give Metro one public place to show its progress.

Goals
  • Make the CX Plan accessible and understandable
  • Improve transparency and public trust
  • Centralize all CX initiatives
  • Simplify communication for public-facing updates
Constraints
  • A massive report with 150+ initiatives
  • Strict Metro branding and web guidelines
  • Limited development capacity
  • Two audiences that need different depths of detail
  • Existing CMS structures had to be reused
04

My process

  1. 01StructureSite map for four primary pages
  2. 02ConceptMobile-first sketches of content blocks
  3. 03WireframesLayouts with the plan’s key statistics
  4. 04DataSurvey analysis and Infogram charts
  5. 05Visual designMetro’s colors and icons, tested across devices

Designing for both audiences

  • Framed the project around riders looking for updates and officials looking for accountability and progress
  • Kept the approach user-centered, balancing usability with the LA Metro brand
  • Checked every content and design decision against both audiences’ expectations

Structuring the hub

I started by sketching layouts and basic structures for four primary pages:

  • CX Hub: the central page for Metro’s customer experience work
  • Plans: Metro’s strategic and operational CX plans
  • Survey Results: data-driven insights from rider feedback
  • Action Items: Metro’s ongoing and completed CX initiatives
The site map: CX Hub, CX Plans, Survey Results and Action Items under LA Metro.

Mobile-first concept

  • Started on small screens to match how Metro riders browse, then expanded to desktop
  • Kept each sketch to simple, navigable content blocks with no visual distractions
  • Let my team and the client focus on content before design details
  • Blocks included the CX mission, rider survey results, top priorities, updates on action items, plan downloads and rider feedback
Content blocks for the first concept, from the hero to rider feedback.

Wireframes and visual alignment

  • Wireframes brought the plan’s key statistics and visual elements into a clear, navigable layout
  • The client and stakeholders could see early how information would be presented, which eased the move to high-fidelity designs
  • For “We’re improving,” I used icons and progress bars to show the status of each initiative
  • Mind-mapping helped explore ways to show action counts, completion rates and specific improvements
Explorations for “We’re improving”: action counts, completion and the latest milestones for each priority.

Making the survey data visual

  • Analyzed the survey data to find the most relevant metrics, such as satisfaction levels and areas for improvement
  • Designed for quick insight and for detailed exploration
  • Chose Infogram for interactive charts on a data-heavy page
  • Bar charts for comparisons, pie charts for percentages, line charts for trends and icon-based visuals for key metrics
Survey responses by mode, with the number of survey languages and service aspects rated.
A pie chart for the split between bus and train riders.
Bar charts comparing bus and train riders on years with Metro, ride frequency and car access.
How bus and rail riders pay: TAP card, cash or the app.
05

How I solved it

I turned the plan into a focused, four-page hub with clear sections, modular content blocks and interactive data visuals.

  • CX Hub
  • Plans
  • Survey Results
  • Action Items
All four pages on mobile and desktop: CX Hub, Plans, Survey Results and Action Items.

A home page that tells the story

  • We’re listening: how Metro collects feedback, with survey responses by mode
  • We’re learning: survey findings as interactive charts, with a link to the full results
  • We’re improving: the five priorities (safe, clean, comfortable, reliable, easy), each with its action items and a spotlight project
  • Connect with us: a feedback form, and downloads of the CX Plans
“We’re improving” on desktop and “We’re listening” on mobile.
Progress at a glance
  • Visual progress indicators for every priority: total action items, completed and in progress
  • A spotlight on one project per priority, such as the Transit Watch app under Make it safe
  • A link from each priority to its full list on the Action Items page
Built to last
  • Modular content blocks, designed for scalability
  • Reused Metro’s existing CMS structures, within limited development capacity
  • Metro’s familiar colors and icons, within its brand and web guidelines
  • Every page layout tested for responsiveness on mobile and desktop
06

Outcome

4

Pages in one hub: CX Hub, Plans, Survey Results and Action Items

200+

Pages of PDF turned into a web hub people can navigate

150+

Initiatives brought together in one place

  • A public source of truth: a once-overwhelming document became a transparent, public-facing home for Metro’s progress
  • Visible progress: progress indicators and Infogram charts show where each priority stands
  • Scalable: modular blocks for future updates
  • Clearer leadership presentations: improved clarity when Metro’s leadership presents its progress
  • Still live: the hub is on metro.net, with its Plans, Survey Results and Action Items pages
  • A base for later work: its components were reused for the Safety and Security Hub
07

Learnings

Content first, then design

Mobile-first content blocks kept the team and the client focused on what to say before how it looks.

Design for two depths

Riders needed quick updates and officials needed metrics, so each page gives a quick summary with the detail one step away.

Make data usable

Raw survey spreadsheets became charts that riders and officials could understand at a glance.

Build blocks that last

Modular blocks made the hub scalable, and its components later became the base for the Safety and Security Hub.

· los angeles, california ⌘K to jump anywhere