Pujita Tipnis - Font Customisation Offering

Overview

Role: Product Designer II
Duration: 2 years (Phased: ~1 year for Web, ~1 year for App)
Team: 1 Product Designer II & owner (me), 1 Principal Product Designer (reviewer), 1 Content Designer, 1 Localisation Specialist, Product Managers, Front-end and Back-end Engineers for web and mobile app
Tools: Figma, MixPanel and Customer Request Data (data analysis)

Background

Cvent's Attendee Hub is an all-in-one digital event platform that powers virtual, hybrid, and in-person experiences by centralising content delivery, networking, and engagement tools into a single unified interface.

The Attendee Hub platform, prior to this project, used a single, fixed Cvent-decided font. This resulted in a generic visual experience for attendees across all customer events, regardless of the planner's brand identity.

Business Objective: Meet a long-standing customer request for brand customization to increase platform value, driving Customer and Prospect Sentiment and ultimately boosting Attendee Hub and Webinar adoption. This feature was noted as a blocker for million-dollar deals.

Problem Statement

Planners feel that current Attendee Hub experience does not properly communicate their brand. (supported by CLS data around typography)

How might we offer intuitive ways for planners to apply their branding elements to Attendee Hub, while also ensuring there is consistency in experience across the different products we offer them?

Scope

The focus was on event-level font customisation, specifically:

Allowing the selection of two fonts (one for headings, one for body text).
Enabling separate font selection for web and mobile app experiences.
Offering a curated and expanded library of fonts (including Google Fonts and custom planner uploads).

Discovery & Internal Audit

My most critical work involved an extensive, cross-platform audit and clean-up effort, without which the customization feature would have been unstable and unreliable. This involved deep collaboration and system alignment.

Comprehensive Platform Audit and Accessibility Fixes

The project necessitated a full audit of all Attendee Hub pages (web and mobile app) to address existing typographic inconsistencies and accessibility issues.

Web Platform Audit: I conducted a granular review of every single screen on the Attendee Hub website.
- Identified Issues: Discovered widespread inconsistencies, such as elements intended to be headers being incorrectly tagged as paragraph text (and vice versa). This significantly compromised the website's accessibility and visual hierarchy.
- Remediation: Identified and documented all required fixes, including necessary CSS overrides and semantic element re-tagging, paving the way for consistent font token usage.
- Visual Hierarchy: Recommended and mapped out precise vertical space adjustments across pages to establish clearer visual and text hierarchy, independent of font selection.
Img: Audit screenshot of some of the AH web screens
App Platform Audit: Conducted a similar audit for the mobile app, identifying all text element inconsistencies.
- New Token System: Based on the audit, I defined and recommended the correct sizes for text elements, which was preceeded by the creation of a new set of font tokens for different header and body text sizes on the app platform, since the older font sizes were dated and needed revising.
Img: Audit screenshot of some of the AH mobile app screens

Defining and Mapping the Font Logic

Following the audit, I worked closely with the Principal Product Designer to standardise how the planner-selected fonts would be applied across the entire experience.

Element Mapping: We defined clear, product-wide rules for which text elements would accept the Heading Font and which would accept the Body Text Font. Example: Page titles, section titles, and modal titles were designated to always inherit the Heading Font (semantically H1 - H6 levels).
Validation: Plugged in common font pairings from Site Designer (a sister product) onto Attendee Hub screens. This was followed by simulating popular brand themes on key pages to rigorously validate the mappings and ensure the system worked effectively across varied visual styles.

Img: Simulating events for popular brand themes
Token Alignment: Ensured the adoption of new, standardised Carina (Cvent's Design System) heading font tokens for the web, and established a clean font logic for the mobile app.

Solution & Design Implementation

The customisation feature could only be successfully implemented if the foundational typography usage on the Attendee Hub was clean and consistent. The project was tackled in two phases: Web, then App.

Planner Interface Design

Font Selection Flow: Designed the interface for planners to select and preview their choice of two fonts (Heading and Body).
- Font Library Curation: Cleaned up the existing font lists, retired outdated options, and integrated a selection of Google Fonts, thereby standardising across all platform products.
- Custom Font Support: Enabled the use of custom fonts uploaded in Event Core’s Admin system.
Img: Screenshot of font curation for web and mobile app
Immediate Feedback Previews: Incorporated live previews to reflect font choices immediately on a sample Attendee Hub screen, a feature highly valued by planners based on research.

Img: Screenshot of planner-side font customisation settings for web with preview

Img: Screenshot of planner-side font customisation settings for mobile app with preview
Accessibility Guidance: Conducted supplemental research on font accessibility. The solution includes a non-blocking warning for specific fonts known to pose readability issues, allowing planners final control while guiding them toward best practices.

Img: Accessibility research and analysis screenshot

Collaboration and Governance

Engineering Alignment: Successfully navigated technical dependencies, ensuring the engineering team had precise specifications for applying new responsive tokens and implementing the custom font logic across both Web and App platforms.
Cross-Product Consistency: Due to shared codebases, I collaborated closely with the Webinar designer to ensure that all typography changes made to Attendee Hub were beneficial and aligned for the Webinar product as well.
Design Governance: Documented and communicated clear typography guidelines and patterns to all feature design teams working on Attendee Hub, ensuring that future design efforts maintained the consistency achieved by the clean-up (e.g., rules on semantic headings and using spacing for hierarchy).

Img: Typography guidelines documented and communicated to other designers

Design Constraints & Reasoning

A core constraint and feature of this project was the decision to limit customisation to two distinct fonts: one for all headings and one for all body text. This decision was driven by a balance of brand flexibility, readability, and system simplicity.

Ensuring Readability and Hierarchy: By enforcing a two-font limit, we guided planners toward established typographic best practices. Headers (H1, H2, etc.) serve a primary structural role, needing to be quickly scannable, while body text must be sustained and highly legible. Allowing a different font for each prevents planners from accidentally applying a highly decorative or unreadable font across the entire interface. This strict separation guaranteed the visual hierarchy established during the clean-up audit would remain intact, regardless of the chosen font pair, unless they used and applied the same custom font to both, in which case the vertical space adjustments we made would help maintain the visual hierarchy.
Respecting Brand Identity: Research showed that most corporate brand guidelines define primary and secondary font choices to maintain a cohesive look. The two-font system provides the maximum necessary branding impact - planners could use a unique, brand-specific font for headers (the most visible elements) and pair it with a highly readable, system-standard font (or another approved brand font) for the bulk of the content. This is the sweet spot between full design control and a consistent user experience.
Technical Simplification: Limiting the choice to two tokens significantly simplified the technical implementation for both the web (CSS tokens) and the mobile app (native font rendering). The engineering effort focused on reliably swapping two primary font files across the platform, rather than managing granular per-element font controls, which would have exponentially increased complexity and potential for rendering errors.

This strategic constraint ensured that brand expression was achieved without sacrificing the attendee's experience or the platform's stability.

Key Challenges & Mitigation

Evolving System Tokens: The Carina design system tokens evolved mid-project. My initial audit was based on preliminary tokens. When final tokens were released, I worked with the engineering team to manage the required rework and mapping updates, ensuring minimal disruption to the overall project vision.
Technical Complexity on App: The technical implementation of custom font support on the mobile app presented significant hurdles. I supported the team through this extended phase, which involved a complex Proof of Concept (POC) to reliably handle font loading and rendering across different mobile operating systems.

Results and Impact

This project provided a critical piece of the brand customisation puzzle, directly impacting the platform's marketability and value.

Brand Transformation: Planners can now fully personalise the Attendee Hub, transforming it from a generic platform into a true extension of their event brand.
Business Success: The feature satisfied a long-awaited customer requirement and was a key factor in closing multiple million-dollar deals.
Platform Health: The foundational clean-up significantly improved the overall accessibility and maintainability of the Attendee Hub codebase.

Previous Project

Next Project