Revamping the Audience Selector

FanBank was built to help sports organizations like Inter Miami and the Dallas Mavericks make sense of their fan data, value it, and monetize it through secure exchanges. The Audience Selector was a core piece of that promise. It let teams create custom segments of fans based on traits like activity, demographics, or ticket history.

But users weren’t getting the value. The tool was clunky, repetitive, and hard to scale. You couldn’t save filters. You couldn’t share queries. You had to rebuild everything from scratch every time.

It worked, technically. But it didn’t work well.

When I joined the team, I saw that this wasn’t just a UI issue. It was a system problem. The tool had grown organically, but it lacked a structure. No design system, no hierarchy, no reusability.

So I set out to redesign the Audience Selector as a scalable product system, not just a feature. The foundation? Atomic Design.

But before we could rebuild, we needed to understand the cracks.

We had direct access to our users, which gave me the chance to hear their frustrations firsthand.

Stakeholder Interviews:

I interviewed five people across marketing, sales, and data teams from three organizations.

They walked me through their current processes, and the pain points came fast:

• Too many filters with no clear organization

• No way to save or reuse a segment

• No collaborative workflow

• Confusing data feedback

User Journey Mapping:

I built a journey map from login to export. We saw frustration peak at:

• Selecting filters (too many options)

• Building queries (trial-and-error logic)

• Waiting for feedback (no real-time preview)

JTBD (Jobs To Be Done):

We turned these insights into functional outcomes:

• I want to quickly filter fans based on behavior

• I want to reuse segments and not start from scratch

• I want to understand what each trait means and how many fans it affects

• I want to share filters with my team

Competitive Analysis:

I reviewed tools like Facebook Business Manager, Twitter Ads, and Hootsuite. They weren’t direct competitors, but they taught us how people expect modern filters to behave: modular, fast, collaborative.

With a clear picture of the problems, I started ideating solutions. I focused on mapping user flows, rather than just sketching screens.

• What would saving and sharing filters look like?

• How can we visualize complex queries clearly?

• How do we give real-time feedback without overwhelming the user?

Once the flows were validated, I jumped into prototyping:

• Wireframes to define layout and logic

• Low-fidelity mockups to test interaction ideas

• High-fidelity designs to bring it all together visually

We tested these with real users inside our client teams. Feedback helped us simplify logic toggles, streamline the save/share process, and emphasize real-time summaries.

We needed a scalable UI system, not just a working screen. That’s where Atomic Design came in.

Once the flows were validated, I jumped into prototyping:

Atoms: Form, inputs, Trait labels, Buttons

Molecules: Filter rows, Logic toggles (AND, OR, NOT), Live summaries

Organisms: Filter Builder, Real-Time Summaries, Saved Audience Manager

Templates: The full Audience Selector workspace

Pages: Audience Management Module (with full functionality and history)

Every component was reusable, responsive, and accessible.

I didn’t just build the UI, I documented every piece:

• Version-controlled Figma files with clear specs

• Design tokens and style guides

• Component library in Storybook for devs

• Handoff notes with edge cases and loading states

We created workflows that allowed design, dev, and product teams to speak the same language.

The new Audience Selector helped teams filter faster, collaborate better, and build smarter segments. With its modular design, it plugged into other FanBank modules and elevated the whole platform.

It became more than a tool. It became a system that teams relied on.

And it all started with listening, breaking it down, and building it back up the right way.