Console Branding

Building a seamlessly branded events experience for investors
INTERACTION DESIGN
USER TESTING
UI DESIGN
DESIGN SYSTEMS
BACK TO TOP

🧭 Project Background

As part of Q4’s initiative to migrate client events from third-party webcast providers to our in-house platform, I designed a new branding editor feature that gives internal Event Managers more control and flexibility to tailor webcast visuals. This feature empowers them to reflect client branding more accurately across the entire Investor Day experience—from the website to the live broadcast. My role focused on designing a seamless, intuitive editing tool that fits naturally into the existing platform, aligns with branding expectations, and addresses long-standing usability gaps.
Investor Day events are high-stakes opportunities for companies to communicate strategy, updates, and performance to current and prospective investors. These events are deeply branded experiences — from websites to supplemental materials — and clients expect the webcast experience to seamlessly match that same level of professionalism.

🎯 The Problem

While deciding to permanently migrate clients (companies) from a third-party webcast service to Q4’s current internal platform, we discovered a key gap: there was no way for clients to brand their webcast experience. This meant no logo placement, no branded colours, and no thematic consistency — which broke the seamless experience Investor Relations (IR) teams work hard to craft.

Branding in IR isn't simply about appearance —it builds trust and credibility through a cohesive visual experience.

🧩  The Design Challenge

How Might We...
enable clients to visually brand their webcast experience — easily and flexibly — to align with the rest of their Investor Day materials?
The solution had to be scalable, intuitive, and work within existing platform constraints, all while maintaining the quality expected from high-tier events.

🔍  Discovery

To better understand the needs of our users — Q4’s internal Event Managers (EMs), I conducted an audit of our existing events platform, specifically exploring the registration page editor, a similar branding feature offered on the platform.
My goal was to learn from what currently works for users, and spot areas of improvement.
A few pain points stood out...
  • The stepper component is restrictive.
    It follows a linear flow, preventing users from jumping between sections. This made navigating the editor tedious, especially when often times only small updates were needed.
  • The information architecture is confusing.
    Elements such as primary buttons, and the overall layout in the header, footer, and body didn't align with the design system guidelines.
  • The preview experience is static.
    While text changes updated on the preview in real time, branding changes (ie. logos, colour selections, images) did not. Users have to select a "Preview" CTA, which downloaded a static PDF. This creates friction in the editing flow in what should be a fast-paced, visual task.
These findings helped frame early design decisions and were determined to be the riskiest assumptions. Given the limited timeline, I adopted a Lean UX methodology, allowing me to validate assumptions quickly and prioritize high-impact changes.

✏️  Ideation

Since this was a brand-new feature built within an existing product, the design process needed to move quickly and intentionally. My focus was on designing a smooth, intuitive experience tailored to their needs, within the constraints of our existing product.
Establishing a Flow
I began by mapping a happy path user flow to outline the ideal end-to-end experience for EMs editing branding settings for a webcast event. This helped align our team on the basic structure, identify MVPs, and gave me a foundation to work from when sketching UI ideas.
Lo-Fi Exploration to Mid-Fi Prototypes
From there, I jumped into rapid lo-fi sketches, exploring how to lay out the interface and interactions without focusing too much on the visual language. I focused on key questions such as:
  • Should the editing experience mimic our existing registration page editor for consistency, or would a different interaction pattern be better suited for this feature?
  • Where (under the existing Events Platform) might users expect to find the branding editor?
Once I had enough clarity, I created mid-fidelity prototypes to use for usability testing. This prototype focused on the layout, interactions, and how branding elements such as logo uploads, colour pickers, and background images would function in context.

🔬 User Testing

Five EMs were recruited for a 30 minute usability testing session. Using the riskiest assumptions found during the discovery phase, I categorized questions to be answered into two main sections:
Navigation
  • What is the user's natural workflow?
  • Should branding be reusable or single use?
Customization
  • Do the copies make sense?
  • How will previews be viewed?
  • What branding features are most valuable to the user?

đź’ˇ Insights & Opportunities

After conducting usability testing and sending out follow-up surveys, I summarized insights to create actionable opportunities.
Actionable opportunities were used for further user testing and iterating to address common usability concerns.
Refining the flow

Insight:
Editing was locked into a 6-step linear process. Users couldn't jump between sections of the editor.

Action:
A non-linear, clickable stepper was added for users to skip around freely for a more efficient workflow.
Previews matter
Insight:
5/5 testers wanted to see the branding changes reflected immediately.

Action:
After discussion with PMs, the scope of the project was expanded to include a dynamic preview.

🖼️ Final Designs

Dynamic preview

Clickable progress bar

Image upload

🧠 What did I learn?

Designing within constraints taught me to prioritize impact.
By focusing on the most valuable and feasible solutions, I was able to address short-term goals while considering long-term scalability.
I learned to advocate for usability, backed by research.
Using insights gathered from testing, I proved the urgency of higher scope features (ie. non-linear stepper) to minimize user frustrations.
Cross-functional collaboration is key.
I worked closely with PMs, developers, and QA teams early, often, and frequently to effectively shape the product based on shared feedback.
Lean UX is powerful when working on a time crunch.
Quick iteration, riskiest assumptions, and MVPs helped me design a usable and impactful feature on time, with the potential to be scaled up.