Spotlight Case Study — Enhancing Talent Search
Product Designer
Spotlight
spotlight.com
Tools
Figma Sketch Adobe CC Zeplin InVision Hotjar Maze
Job Overview
Major platform redesign & rebrand
Built design system & component library
User research, prototypes & testing
W3C
Accessibility
🚀
Successful launch of enhanced multi-user platform
Hotjar
Managed post-launch feedback
Case Study

Enhancing Talent Search for
Busy Casting Directors

70,000+ Performers UX Research Interaction Design Component Design Mobile-First
The Challenge

Redesign a dated, non-responsive search tool used by casting professionals to find performers across a database of over 70,000 entries.

  • Simplify complex search behaviours built up over years of organic growth
  • Improve speed, accuracy, and accessibility for casting professionals under time pressure
  • Create a consistent experience across desktop and mobile platforms
Before Before — legacy Spotlight search
After After — redesigned Spotlight search

Research

Phase 1 involved in-depth user interviews and card sorting workshops to understand how we could organise the complex, outdated search options within the legacy platform. This internal workshop helped organise and streamline information.

Phase 2 I then considered these outcomes alongside review of data analytics and user interviews.

Name Actors tab Height Dancers tab Hair colour Equity Playing age Location SAG/AFTRA Drama school Disability Weight Accents Eye colour + more
Starting point
38+ ungrouped search terms
Key Info Name Location Playing age Disability Skills Accents Dancers Languages Appearance Height Hair colour Eye colour Gender Directory workshop sort
Phase 1 · Workshop
Card sorting + user interviews
Data analytics + Interviews
Phase 2 · Refined
Workshop + data + interviews
New Content Structure

New information architecture following card sorting workshops, and data analytics.

🔍 Search
🏷 Name
⭐ Top Filters
⚧ GenderPlaying ageAppearanceDirectoriesLocation
+ Additional Filters
Skills
AccentsPresentersDancersLanguagesSkills
Physical
Weight · Height
Hair colour · Hair length
Eye colour
Other
DisabilityMembershipDrama school
✦ Other Features
NotesMedia
Outcomes Key Findings

Search and filter need to be used both together or independently.

Casting professionals often search for a specific name and want to access that person quickly without returning all results.

80%

The top five filters appeared in 80% of all sessions.

Users often needed repeated access to niche filters beyond the top set.

Certain filters needed bespoke UI components that met complex user needs.

Competitor Analysis

With this information I researched both our competitors' search tools and search best practices on leading platforms, such as Amazon and LinkedIn, with a focus on mobile-first solutions.

Research Area 01Search & Filter Platforms

Leading e-commerce and booking platforms — analysed for filter structure, progressive disclosure, and component flexibility.

Search and filter platforms — competitor analysis
Research Area 02Other Casting Platforms

Direct competitors reviewed for talent search UX, filtering patterns, and profile card conventions.

Casting platforms — competitor analysis
OutcomesKey Insights & Questions
◈  Insight

A filter drawer emerged as the best-practice UI component for a mobile-friendly filter system — allowing full filter access without leaving the results view.

?  Question

Would our users prefer pagination or lazy loading for results — and does the answer differ between desktop and mobile contexts?

?  Question

How do we allow casting professionals to see a quick view for known actors — without losing their place in the results list?

?  Question

How do we incorporate search, filters, and actions into intuitive UI components that work seamlessly across both desktop and mobile?

Phase 03 Prototyping

From the research we defined three principal user journeys that the search and filter page would need to cater for. These shaped every design decision — from the initial lo-fi sketches through to the finished UI components.

Defined 3 Principal User Journeys
Journey A
"I want to find a specific performer whose name I already know."
Name searchDirect lookup
Journey B
"I'm looking for an actor matching specific physical and professional criteria."
Age rangeGenderAppearanceDirectory
Journey C
"I'm looking for an actor by location, language, or accent."
Age rangeGenderLocationLanguageAccent
✏️  Lo-fi sketch & internal flow testing
Early Stage Lo-Fi Prototype & Flow Testing

Using a lo-fi prototype we sketched out a number of flows with basic filter designs to ensure the end-to-end journey worked for all three scenarios before committing to visual design.

Add lo-fi sketch / wireframe here Recommended: photograph of sketch or low-fidelity wireframe export
Phase 04 UI Components

With an initial flow tested internally, we built out the core UI components using the new brand. These were considered as a system — elements designed to work cohesively across different areas of the site. Some were brand new; others were adapted as we introduced new scenarios and edge cases.

Add image
Search BarPrimary text input with autocomplete, keyword highlighting & clear action
Add image
Performer CardGrid tile with photo, name, key attributes & quick-view action
Add image
Filter PanelPersistent sidebar with grouped filter controls & active-state indicators
Add image
Filter DrawerSlide-in overlay for mobile & contextual filter expansion
Add image
Long Filter Listse.g. Accents, Languages — scrollable, searchable lists with selection state & overflow handling
Add image
Pagination / Lazy LoadingNumbered pagination vs. infinite scroll — tested both approaches for the results grid
🧪  Usability testing with casting professionals
Phase 05 Testing with Prototype

We took the prototype to test with leading casting professionals to validate our design decisions — asking them to complete the A B C user journeys in sequence.

Add prototype screenshot or screen recording here Recommended: high-fidelity prototype screens or session footage
Outcomes Results
Validated

New UI elements were easily navigable — participants moved through the interface confidently with minimal guidance.

Finding

There was a need for a quick view that felt more immediate — users expected faster access to performer detail without leaving the results page.

Finding

Casting professionals wanted better media visibility within the main results page — showreels and headshots needed more prominence at the list level.

Learnable

The actions panel for adding an actor to a shortlist was new but learnt easily. Better visibility was needed to confirm actions had been completed.

🔁  Multiple rounds of iteration & refinement
Phase 06 Final Prototypes & Testing

The designs were refined following these insights and we completed multiple rounds of testing, tweaking components each time. The aim was to surface as many areas needing refinement as possible ahead of dev work — since this new filter system was to be launched as part of a new branded platform.

Refined Iterations from Testing Feedback
01
Search Bar EnhancementNew pattern

A dropdown on the search bar that previews an actor's headshot, name and location — allowing casting professionals to navigate directly to a profile without needing to return a full results page.

Add image
02
Actor Card — Media IndicatorsComponent update

Media icons on actor cards indicating whether a performer had showreels or audio available — surfacing key content at the results level without requiring a click-through.

Add image
03
Toast NotificationsNew component

Toast notifications to confirm that an action had been completed — giving casting professionals clear, non-intrusive feedback when adding performers to a shortlist or triggering other key actions.

Add image
Phase 07 Building Smart Search Logic

The final piece of the design work was a close collaboration with the engineering team to ensure the filter and search system behaved exactly as users needed. This wasn't just a handoff — it required detailed specifications and ongoing dialogue to translate design intent into technical architecture.

⚙️  Developer collaboration & technical specs

Search Architecture Decisions

Three core principles shaped how we specified the search and filter system to the development team, each grounded in pain points surfaced during user research.

Elasticsearch

Leveraged Elasticsearch to power fuzzy matching and relevance ranking, ensuring performers with partial name matches or alternative spellings still surfaced — reducing zero-result frustration.

Real-time Updates

Results updated without page reloads as filters were applied or changed, eliminating "dead ends" — a major source of user drop-off identified in the original audit.

Filter Specs

Delivered detailed documentation covering filter hierarchy, interaction states, edge cases, and logic rules so the team could build with confidence and without design ambiguity.

Phase 08 Keeping Agile — Testing & Iterating

Rather than a single large launch, we structured the rollout as a series of intentional, insight-generating releases. Each wave was designed to reduce risk while collecting real user data to inform the next iteration.

🚀  Staged rollout strategy

Rollout in Four Waves

1
Closed beta with a small agent group. We tested core search and filter functionality before any wide release, using a trusted group who worked with their own client lists. This surfaced UX issues in filtering logic and general views in a low-stakes environment.
2
Beta launch with reduced filters. We intentionally launched with a subset of filters and asked agents directly: "What filters do you need?" This let users drive prioritisation for the next development sprint rather than us making assumptions.
3
Quick-view card launch with Hotjar. We released a reduced quick-view card alongside Hotjar session recording, asking: "What information would you like to see here?" This meant we could populate the card with content we knew users wanted, not content we assumed they needed.
4
Full launch — big bang. Hotjar feedback and session recordings continued to run post-launch, giving us a live signal on user behaviour and satisfaction as the wider audience encountered the new system for the first time.
Outcomes Results & Reception

Post-launch feedback validated the phased approach. The majority of critical feedback pointed to planned future iterations rather than fundamental design problems — a signal that the core experience had landed well.

80%
of post-launch feedback rated the new experience 4 or 5 out of 5
Key finding

Much of the negative feedback referenced functionality already on the product roadmap or reflected personal aesthetic preferences — not core usability failures.

Design validation

The staged rollout gave us confidence in the direction. Real user input — not assumptions — shaped both the filter set and the quick-view card content before full release.