Timeline Visuals — Balancing Customization, Accessibility, and Scale
As Uptempo’s enterprise customers scale their marketing operations, the timeline becomes one of the most frequently used — and most fragile — surfaces in the product. For customers like Swire Coca-Cola (USA), timelines are not just schedules; they are shared artifacts used by global teams to align planning, execution, and reporting.
As timelines grew denser, customers increasingly asked for ways to visually differentiate activities. Many specifically requested the ability to use their own brand colors to represent regions, campaign types, or internal structures — something they were already familiar with from other tools.
This project focused on introducing color-based differentiation while carefully balancing customer flexibility, accessibility, and system stability.
-
Uptempo Plan (SaaS Platform)
-
2025
-
Lead Product Designer
-
Project Manager, Engineer Lead, Lead Software Developer, Four (4) Supportive Software Developers, Two (2) Professional Service Team Members, & UX Technical Writer
-
Marketing Technology (Enterprise SaaS)
Problem Space
What customers were experiencing
Marketing teams managing thousands of activities in complex timelines lacked powerful ways to visually organize and filter their work. While Uptempo's timeline provided filtering by Type attributes through dropdown selection, the filtering experience lacked the visual immediacy that comes from color-coded categorization.
The core challenges:
No visual mapping to filter categories — Every activity looked identical on the timeline. Users couldn't quickly scan for patterns or understand campaign composition without applying filters first.
Cognitive load in filter discovery — Users had to remember which Type attributes existed, then construct queries through dropdown menus. They couldn't simply see categories and click to filter.
Missing brand-aligned visual language — Marketing teams use color as a primary organizational tool, but timelines remained visually disconnected from how teams actually work.
Inefficient workflow for focused work — Filtering required opening panels, selecting types, and applying filters.
Challenges
The UX Challenge
How might we introduce visual differentiation without sacrificing readability? How do we balance customization with accessibility at enterprise scale?
The Customer Request vs. Reality
Customers wanted to use their own brand colors to categorize activities and filter by those colors—but brand colors aren't designed for accessibility or dense calendar interfaces. Many would fail contrast requirements, making timelines harder to read rather than easier.
Technical Constraints
Mixed front-end architecture: Admin configuration built in Angular, timeline built in React
Third-party limitations: Bryntum timeline library with restricted color layering and fixed interaction behaviors
Enterprise requirements: Strict WCAG accessibility standards for all visual differentiation
The Real Challenge
Translating a well-intentioned customer request into a safer, more scalable solution that delivered visual clarity without creating accessibility violations or technical debt.
results & impact
Measurable Outcomes
Visual comprehension improved — Teams could instantly identify activity types without clicking into individual items
Faster filtering workflows — Users could color-code and filter thousands of activities by category with a single click
Zero accessibility violations — All colors met WCAG AA standards for contrast against timeline backgrounds
Customer Feedback
"Color By instantly changed how we read our timelines. We can spot patterns and issues at a glance now—no more digging through every activity."
— VP, Commercial Digital Strategy, Swire Coca-Cola (USA)
Strategic Value
Met baseline expectations set by competitors like Monday.com while remaining enterprise-ready
Created foundation for future filtering and customization features
Delivered meaningful differentiation without compromising system stability
Built a reusable accessible color system for future timeline and calendar features
About Uptempo
Uptempo is a B2B SaaS company that provides marketing operations solutions for large enterprise teams. Their platform helps unify strategic planning, budgeting, and performance tracking in one place - enabling marketing leaders to align their investments with business goals, improve visibility, and make more data-informed decisions.
design process
1
ALIGNMENT OVER IDEATION
What I did :
Started with a kickoff session with PMs and engineers to map constraints before exploring solutions.
Why it mattered :
Rather than whiteboarding blue-sky solutions, we focused on reality:
What already existed that we could reuse?
Where would we incur the highest technical risk?
What could realistically ship within our architecture?
This set the tone: clarity delivered sustainably, not perfection.
2
CREATING AN ACCESSIBLE COLOR SYSTEM — GOING BEYOND THE REQUEST
Step 2: Validated accessibility rigorously
Audited every color against timeline backgrounds using Adobe Color and Figma's Color Contrast plugin
Tested all colors across multiple states: default, hover, selection, and overlapping activities
Ensured every color met WCAG AA standards (4.5:1 contrast ratio minimum)
Step 3: Documented a reusable system
Created an accessible color palette that could be used across future timeline and calendar features
Established clear guidelines for when and how to use each color
Why I did this :
This extra step wasn't just about Color By—it was about protecting the product's long-term quality. By establishing an accessible palette now, future features wouldn't inherit contrast violations. It gave customers immediate value while setting the foundation for scalable growth.
The outcome :
Customers could choose from Uptempo's accessible palette for immediate, worry-free implementation
Or use their own brand colors with the understanding they'd need to verify accessibility themselves
The accessible palette became a reusable system for future product work
Tools used: Adobe Color (initial contrast validation), Color Contrast Figma Plugin (state-specific testing), Figma and Miro (exploring color behavior in realistic timeline scenarios), Figma Make (color palette visuals)
The customer request :
Customers wanted to use their own brand colors to categorize timeline activities and filter by those colors.
The problem I identified :
Brand colors aren't designed for accessibility or dense calendar interfaces. Many would fail contrast requirements, making timelines harder to read—the opposite of what customers needed.
What I did :
Instead of simply enabling custom brand colors, I saw an opportunity to solve both the immediate need and create a reusable foundation for the product:
Step 1: Built the core solution
Curated 10 accessible colors from Uptempo's existing palette
Included Uptempo's default purple for continuity
Removed shades and opacity controls to prevent low-contrast combinations
3
NAVIGATING ANGULAR VS. REACT ARCHITECTURE
The constraint :
Our admin configuration was built in Angular, but the timeline was React. The Color Picker component already existed in Angular on the Spend side.
The decision :
After discussions with PM and engineering, we made a pragmatic MVP choice: Ship using Angular for configuration, adapt React logic behind the scenes, keep the timeline experience consistent.
Why it mattered :
Rebuilding configuration in React would have stalled the roadmap. In agile enterprise environments, momentum matters—this decision delivered customer value without introducing unnecessary technical debt.
4
SPOTTING THE BIGGER OPPORTUNITY
The context :
While Color By shipped with Angular configuration, a parallel initiative around attribute types and type groups created a rare opening.
What I did :
I proposed redesigning the entire attribute configuration section using React components during that parallel work.
Why it mattered :
Attributes power everything—definitions, type groups, and Color By itself. Opportunities like this don't appear often in agile environments. Missing it would mean living with architectural fragmentation for years.
The result :
Set the foundation for future features to use a unified React architecture for product consistency.
5
COLLABORATING WITH ENGINEERING ON BRYNTUM CONSTRAINTS
Engineers Testing BryntumThe constraint :
Bryntum, our third-party timeline library, had strict limitations:
Restricted color layering
Fixed hover and selection behaviors
Limited control over dynamic contrast between colors and text
What I did :
Worked closely with the engineering lead to understand how Bryntum handled color rendering at a technical level. While engineering owned testing and integration, we collaborated frequently to align on:
Legibility requirements
Accessibility edge cases
What was technically stable vs. what would create brittle workarounds
Why it mattered :
Strong design-engineering collaboration prevented future maintenance nightmares. By limiting the color palette and understanding Bryntum's constraints early, we designed within realistic boundaries rather than creating aspirational mockups that couldn't ship.
6
ITERATING IN FIGMA AND COLLABORATING IN MIRO
What I did :
While engineering integrated Bryntum with our color system, I created 4 focused iterations in Figma exploring how Color By would behave in real-world scenarios. I then brought these iterations into Miro to facilitate better collaboration with PM and engineering.
The iterations represented:
High-density timelines with overlapping activities
Different "Color By" attribute selections (status, region, campaign type)
Long-range planning views where color repetition becomes noticeable
Mixed activity types sharing the same timeframe
Why Figma first, then Miro :
Figma allowed me to work quickly with our design system and create realistic timeline mockups. Miro became the collaborative space where PM and engineering could annotate, discuss technical constraints, and align on feasibility without leaving comments scattered across Figma files.
Why it mattered :
These wireframes were grounded in known customer usage patterns, not ideal low-density scenarios. The Figma-to-Miro workflow allowed us to pressure-test early without blocking engineering progress.
Each iteration helped refine:
Where color meaning was immediately clear
Where visual noise started to appear
Which states required stricter constraints to remain readable
7
FINAL DESIGN IN FIGMA — FROM INTENT TO EXECUTION
What I did :
Once aligned through Miro and engineering confirmed feasibility, I created high-fidelity designs in Figma using the final approved accessible color palette.
The designs included:
Complete Color By user flow (configuration → timeline output)
Clear default behavior using Uptempo purple
Accessible color application across hover, selection, and overlapping states
Visual parity between configuration and timeline experiences
Why it mattered :
Moving from exploratory wireframes to locked high-fidelity designs ensured design intent survived implementation. It reduced last-minute changes, accelerated delivery, and made validation with Swire more focused.
8
VALIDATING WITH ENTERPRISE CUSTOMERS
What I did :
Reviewed the feature with Swire Coca-Cola's VP of Commercial Digital Strategy using their real timeline data.
We walked through:
Different attribute-based color views
Dense planning scenarios with overlapping activities
Leadership questions like "Where are the risks?" and "What's happening in this region?"
The feedback focused on outcomes:
Timelines were easier to read
Patterns and overlaps surfaced immediately
The constrained color set felt sufficient, not limiting
Why It Mattered :
Validating with an enterprise decision-maker confirmed the feature supported real planning and prioritization—not just visual polish.
key learnings
Accessibility as a design requirement, not a checkbox
When color carries meaning, accessibility isn't optional. Contrast testing, state validation, and real-world density checks directly shaped design decisions and reduced risk for enterprise customers.
Constraints drive better solutions
Well-intentioned customer requests (like unlimited brand colors) can create unintended complexity. Translating requests into safer, more scalable solutions required early alignment with PMs and engineering—and being comfortable saying "not yet" in service of the product's future.
Collaboration ensures intent survives implementation
Working closely with PMs to frame constraints and engineers to understand Bryntum's limits ensured design intent survived implementation and the solution worked reliably at enterprise scale.
project takeaway 🧠
The most valuable enterprise solutions are often the most restrained ones.
By prioritizing clarity, accessibility, and system health over unlimited customization, we delivered a feature that scales—not just visually, but operationally. And by going beyond the immediate request to create a reusable accessible color system, we protected the product's long-term quality.