Console Branding

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

🧭 Project Background

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 spanning websites to supplemental materials, and clients expect the webcast experience to seamlessly match that same level of professionalism.
‍
As part of Q4’s initiative to migrate client events from third-party webcast providers to our in-house platform. My role was to design a branding editor from the ground up for Q4's internal Event Managers to configure the visual experience on behalf of clients, within an existing product and on a tight timeline.

🎯 The Problem

While deciding to permanently migrate clients 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 success looks like

The MVP was shipped prior to the first wave of Investor Day events to allow Event Managers to acclimate themselves to the new tool. Here's what I'd look at to evaluate whether the branding editor was effective:
Event Manager efficiency
How long does it take an EM to complete the full branding setup?

Before this tool, the process involved manual configurations and back-and-forth with clients. A meaningful reduction in setup time would be a strong indicator of success.
Client satisfaction with visual output
Do clients feel their webcast accurately reflects their brand?

Surveys or qualitative feedback from IR teams would be the clearest measure here.
Interaction rate preview
Given that the dynamic preview was the single most requested feature by testers, tracking how often EMs interact with it during editing would confirm whether it's genuinely reducing friction or just going unused.
Reduced revision requests
If the dynamic preview is working as intended, EMs should catch more issues before the webcast goes live, meaning fewer last-minute change requests from clients. A drop in revisions may validate the investment in that feature.

🧠 What did I learn?

Constraints are not just a limitation, they're also a design tool.
Working within an existing platform meant I couldn't build a design freely. But it pushed me to make sharper decisions about what to change and what to inherit, allowing the end result to be more cohesive and scalable.
Advocate for users with evidence, not instinct.
Certain features weren't in scope, and the initial responses from the team was that building them would take too long. Gathering evidence from testers provided concrete information to bring back to the conversation, and the scope expanded. This reinforced that research is most powerful when they're framed in terms of risk, not team preference.
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.