“We introduced a real publishing process. It’s faster, safer, and enables experimentation at scale.”
Design Process
Discover & Define → Frame the Challenge → Design & Deliver
1. Discover & Define
Gravity’s existing admin console was fragmented, inconsistent, and relied on outdated workflows:
- No shared component library — every screen required manual HTML
- Updates were destructive, lacked versioning, and required RTE assistance
- Localization meant rewriting full templates across multiple files
- Errors and inconsistencies were reaching production
Research methods included:
- Heuristics evaluation and N/Ng compliance checks
- Discovery interviews with power users: “The Inspector”, “The Librarian”, “The Judge”
- Mapping mental models of CMS roles: production, governance, content
- Benchmarking tooling from Amex teams and external orgs
2. Frame the Challenge
- Admin UX lacked preview, staging, or version history
- Markets couldn’t view or test their own flows
- Publishing updates was brittle and required engineering help
- No way to experiment or validate pre-launch at scale
- CMS failed to reflect the complexity and granularity of market needs
We needed to design a modular, multi-role, testable admin interface with:
- Configurable workflows
- Safe experimentation tooling
- Market- and BIN-level customization
- Reusable components and non-destructive editing
3. Design & Deliver
Going Wide
CMS Architecture Redesign
- Component-based architecture using reusable JSON templates
- Preview, edit, and publish localized journeys at the BIN group level
- View changes across breakpoints and languages before publishing
Publishing Workflow
- Defined approval paths and role-based edit permissions
- Created audit trail and version history per screen
- Enabled “draft → review → approve → publish” lifecycle
Experimentation System
- Released test variants with minimal engineering lift
- Filtered experiments by status and lifecycle
- Introduced control groups, randomization, and rollback tools
Pre-Production Validation
- Embedded Selenium test flows across all new screen types
- Run QA automatically across device/browser combos
- Reduced risk and manual test hours for new markets
Analytics & Real-Time Insights
- Dashboards for transaction types, flow success states, and recent changes
- Filter by transaction ID, language, 3DS version, and more
- Surface live activity trends and errors by market and version
Launch & Iterate
- Released first version to internal stakeholders with a phased feature rollout
- Trained teams with real examples and sandbox environments
- Collected feedback through moderated walkthroughs and issue logging
- Prioritized next-phase features based on usage patterns and high-value gaps
Lessons Learned
-
Designing for roles, not just features
Different CMS personas needed tailored views and flows -
Modularity is UX power
Reusability made the console faster, safer, and easier to scale -
Testing is trust
Selenium validations became non-negotiable -
Let users see themselves
Markets were more confident when they could preview real flows -
Experimentation is product culture
Enabling tests shifted the way teams thought about launches
Want to modernize your admin tooling?
Let’s design systems that scale while reducing risk.
Let’s talk
