Customizable Widgets

The Problem

Universe’s embeddable ticketing widget provides event hosts with a convenient solution to sell tickets directly on their own websites. It was a powerful tool, but it wasn’t living up to its potential. Two persistent friction points were holding it back:

The Multi-Event widget attracted significantly more negative feedback than the Single-Event widget and became the primary focus. One number defined the design constraint throughout:

Design Direction

The design ask came down to solving two separate, distinct problems in parallel. Provide a flexible theming system that scales to accommodate a range of event hosts and brands, in tandem with introducing UX improvements to help potential customers more easily find events of interest.

The existing widget had a single colour input — a brand colour used to tint select foreground elements against a fixed white background. Phase 1 expanded that to four inputs and removed the white-background constraint. Phase 2 reduced that back to two inputs while enforcing contrast compliance across the board. The arc of those decisions is what the theming sections below document.

Colour & Theming — Opacity Model

Phase 1: Foundational Product Thinking — Mid 2024

The first phase resulted in an opacity-based colour theming system that strikes a balance between adaptability, ease of use, and colour cohesion.

The first iteration exposes four colour inputs to hosts:The opacity-based layering system derives tonal variations by blending these inputs with each other. For quick and snappy implementations, I've included two zero-configuration presets (Light and Dark) to provide a neutral starting point for hosts who need a simple solution.

This approach worked well across many use cases and unblocked the hard-restriction of a fixed white background. However, due to the colour flexibility and the nuances of opacity blending, it introduced a new problem: colour contrast was left entirely up to the host’s discretion. Hosts who aren’t web-design savvy might not recognize the need to prioritize contrast and may lack the judgement to make tasteful colour decisions. This was most evident when mid-tones are used, as when they're blended with other mid-tones, the resulting colours tend to be washed out.

Colour & Theming — Contrast-Enforced Model

Phase 2: Adopting AI to push the boundaries — Late 2025

During this second phase, I leveraged AI to deliver coded prototypes and diagnostic tooling to help with validating my colour algorithm designs, pushing my solutions beyond what I'd traditionally be able to produce in Figma.

I shifted into the OKLCH colour space to reap the benefits of perceptually uniform colour, namely the consistent manipulation of lightness, chroma, and hue, providing a predictable framework for automating colour modifications.

I assigned every UI element in their varying states to a colour token, then mapped every plausible foregound-background token pairing to form a contrast matrix. Each pair was assigned a target LCH lightness contrast value based on APCA requirements. Some pairings continued to rely on opacity layering to achieve cohesion, but now with targets and fallback algorithms in place to always guarantee compliant contrast.

This change in approach also prompted a re-evaluation of the input model. I reframed Text and Outlines as outputs that the system derives based on the host’s chosen Background and Brand colours. My judgement was that the majority of hosts would prioritise ease of use and compliance over granular control, and that by reducing the number of inputs and enforcing contrast, we could standardize a compliant output for all hosts, while maximizing brand expression where appropriate.

To determine text colour across the widget, the algorithm starts from an off-white or off-black base and depending on available contrast headroom, injects a small amount of the brand’s accent colour to maximize brand expression while ensuring the contrast target is met first. Outlines followed a similar logic, maintaining a low target Lc to preserve their function as a subtle separation element at all times.

Through Phase 2, I reduced customization complexity, converting four inputs to two, while implementing measures to guarantee contrast compliance, ensuring our clients present their best selves to potential customers.

Multi-Event Widget Redesign

The redesign aligns the user flow with the natural sequence of how a user progresses through the widget:

1. Identify an event of interest
2. Review the event’s details
3. Enter the purchase funnel

Calendar view

To find out what was being offered in the original widget, users had to tap each date individually without any context to set their expectations, resulting in a blind-tap interaction that was tedious and easy to abandon. The redesign surfaces event names directly at the calendar level, giving users a scannable overview before they commit to exploring further, turning blind discovery into intentional exploration.

List view

For mobile users, I introduced a list view as an alternative method for browsing and discovering events. Where the calendar serves those with a specific date in mind, the list view helps users who are interested in browsing more openly, providing a smoother discovery experience. Given that 76% of ticket orders happen on mobile, designing a discovery experience that leverages natural mobile interaction patterns became a priority.

Event card

The event card is the focus point that translates interest into intent. As the most sensitive touchpoint of the widget, it became a priority to enhance this interaction by increasing clarity around key event details and providing a more engaging experience. For the multi-timeslot variant, progressive disclosure allows users to reveal timeslots only when needed, keeping the experience scannable and focused on the user’s needs.