The whole product, in about three minutes
Seven short chapters with on-screen guidance: Topic setup and insights, the signature drill-down, AI, dashboards, the Brand track and the shared workspace. Built from 31 designed screens and 11 overlays.
Two questions that needed two different products
Signal Intelligence is part of the Research Intelligence Suite. It collects public mentions from social, news, blogs, forums and more. Topic and Brand studies use the same sources with a different mindset: Topic is exploratory and neutral; Brand is evaluative and comparative.
Analyse a subject
"What is being said about this topic, and why?"
- Used for
- Mentions, trends, spikes, sentiment and emotion, themes, influencers and search interest around a topic, keyword set or event
- Setup
- 5 steps: Study Basics · Topic Setup · Sources · Filters · Preview
- Analysis
- Overview · Media Coverage Trend · Topic Associations · Conversation · Influencer and Author Impact · Search Trends, plus Forecasting (scope open)
- Compares
- Current vs previous period, and topic vs topic
Evaluate a brand
"How is my brand performing, and how do we compare?"
- Used for
- Brand health, reputation and crisis risk, media and campaigns, content, channels and customer care, alone or against competitors
- Setup
- 6 steps: adds Output Type, brand details and Competitors (up to 5)
- Analysis
- 8 modules, from Brand Health to Digital Care
- Compares
- Self-Brand, Competitor-Only or Self + Competitor
What I owned
Everything on the design side, for both tracks, as the only designer.
Who I worked with
A product owner and the engineering team, who wrote the functional requirements document. I designed against it and reconciled the designs with it line by line (section 15).
Answering "what's being said, where, and why" takes a patchwork of tools
Research, brand and PR teams stitch together social listening, news monitoring and spreadsheets. The requirements name five consequences:
- Slow insight cyclesAnalysts spend their time stitching sources together instead of finding signals.
- Shallow competitor contextComparing a brand with its peers across channels and time is manual.
- Limited actionabilitySpikes and emerging themes are spotted late; the next step is unclear.
- Inconsistent reportingStakeholders want reliable dashboards and summaries; output is ad hoc.
- Governance gapsPlans, quotas and source entitlements are hard to manage in one place.
Inside the tools themselves, there's a smaller problem that analysts hit many times a day: opening a widget's detail covers the rest of the page.
How might one product explore topics and judge brands, and let an analyst dig into any number without losing sight of the others?
Drill-downs that don't cover the page
I designed every widget in two variants, Expanded and Collapsed. Opening a drill-down reshapes the page instead of covering it.
The problem
In the listening tools I benchmarked, including Sprinklr, clicking a widget opens a side overlay over the page. It covers everything on the right side of the screen, so moving to another widget means closing the panel, finding the widget and opening it again.
What I did
The clicked widget stays expanded as the active one. Every other widget switches to its collapsed variant: a thumbnail of its type (line graph, pie chart, bar chart, table, post or blog). The page makes room for the panel, and closing it expands everything back.
Options I weighed
Overlay drawer Common pattern
The drill-down V2.0 used, and the one most tools use. The detail gets plenty of room, but it covers half the page.
Inline expansion Explored
The card grows in place across the grid. It keeps context above it, but pushes the widgets below down the page and limits the detail to the card's space.
Split screen, expanded and collapsed Chosen
The panel gets its own space; the page keeps every widget in place, in a compact form that's one click away.
Before and after
See it in motion
Animated recreation of the interaction in the design file, simplified to its layout and sample data.
The design
- 1Active widget stays in its expanded view, highlighted.
- 2Collapsed thumbnails keep each widget's place, title and type. Its values return when the panel closes.
- 3Drill-down panel with breadcrumb, date range, and current vs previous period.
- 4Drag handle to resize the page and the panel.
Trade-offs. Collapsed widgets show their type, not their values, so side-by-side number comparison still happens in the panel or on a dashboard. And every widget type needs two designed variants, a cost paid once per type (line, pie, bar, table, post, blog) and shared by both tracks.
An estimate of the time saved Estimate
Using the Keystroke-Level Model, moving from one widget's drill-down to another's takes six operators with the overlay (decide, point and click to close; find, point and click the next widget) and three with my design.
Card, Moran and Newell operator times (M = 1.35 s, P = 1.1 s, click = 0.2 s). Loading and scrolling aren't included. This is an estimate to check in the comparison test, not a measured result.
Where established tools leave their users stuck
I compared four tools across 15 capability areas and mapped 18 pain points on the project's FigJam board, then checked them against the requirements. This was desk research; interviews come first in the validation plan.
Competitor snapshot
SSprinklr
- Core
- All-in-one CX, publishing and care
- Built for
- Enterprises, CX teams
- Strength
- Breadth, governance, automation
- Weakness
- Overbuilt for analytics-only users, slow to set up
BBrandwatch
- Core
- Enterprise consumer intelligence
- Built for
- CMOs, analysts, CPG
- Strength
- NLP, personas, deep dashboards
- Weakness
- Steep learning curve, slow for quick analysis
MMeltwater
- Core
- PR, media, social and sales
- Built for
- PR and comms teams
- Strength
- News wires, journalist data
- Weakness
- Dated interface, cost
BBrand24
- Core
- Affordable real-time listening
- Built for
- SMBs, startups
- Strength
- Price, speed, simple UX
- Weakness
- Shallow insights, no prediction
As recorded during my research. These products change often, so details may have moved on since.
Pain points an interface can answer
| Pain point | Meltwater | Brand24 | Brandwatch | Sprinklr | Design response |
|---|---|---|---|---|---|
| Complex onboarding, steep learning curve | Guided setup, three query levels, live preview Designed | ||||
| Volume shown without the reason | Spike Analysis and card-level AI Summary Designed | ||||
| Shallow influencer analytics | Influencer and Author Impact section Designed | ||||
| Weak sentiment layering | Sentiment and emotion by source, region and time Designed | ||||
| No demographic and affinity view | Audience profession and interest cards Partly designed | ||||
| No trend forecasting | Forecasting tab designed; its place in scope is open Open |
"Designed like a research tool, not a publishing tool with add-ons."
The positioning I took from it: faster to set up than the enterprise suites, deeper than the budget tools. Publishing, scheduling, reply inboxes and ticketing stay out.
Four roles, and the analyst's path through the product Assumed
The roles come from the audience list and segment-fit ratings on the board. They haven't been validated with interviews yet.
Research & insights analyst
Primary. Goes deep: explores a subject, finds patterns and causes, collects evidence.
Job to be done"Tell me what people are saying about X, what changed, and why."
Brand & marketing manager
Primary for Brand. Tracks brand health, campaigns and channels against competitors.
Job to be done"Show me how my brand is doing against competitors, and where to act."
PR & comms lead
Secondary: the board rates the fit as partial. Watches coverage and needs early warning of spikes.
Job to be done"Warn me before a spike becomes a crisis."
Executive / CMO
Reads dashboards and AI overviews, rarely drills down. Shallow, frequent visits.
Job to be done"What's happening, and what should we do?"
Open question. The board rates customer experience teams a poor fit, yet the requirements include a Digital Care module. I'd settle which it is with the PM before designing that module.
The analyst's journey, from a new study to an explained spike
- Doing
- Defines keywords, sources and filters
- Thinking
- "Will my query catch the right conversation?"
- Pain today
- Boolean syntax, long onboarding
- Design response
- Three query levels and a live preview
- Doing
- Scans KPIs, the trend and sentiment
- Thinking
- "What's the headline?"
- Pain today
- Cluttered, all-in-one interfaces
- Design response
- One question per section, one card anatomy
- Doing
- Notices a spike or a shift in sentiment
- Thinking
- "Is this real, and why now?"
- Pain today
- Volume without the reason
- Design response
- Spike marker opens Spike Analysis
- Doing
- Opens a widget's detail, then the next
- Thinking
- "How does this relate to the other numbers?"
- Pain today
- The overlay covers the other widgets
- Design response
- Expanded and collapsed widgets
- Doing
- Collects evidence, adds cards to a dashboard
- Thinking
- "Can I trust this enough to share it?"
- Pain today
- AI answers not tied to the data
- Design response
- Card-scoped AI Summary, Add to dashboard
What the design had to achieve, and what's in or out
Four goals from the requirements, each with the measure I'd track. Targets get set after the first usability baseline.
Guided, unified setup
Topic and Brand studies set up with the same pattern.
- Measure: time to the first launched study, and studies launched without later query edits
Evidence behind every number
Sections that each answer one question, down to the individual post.
- Measure: time to find the posts behind a number
Explainable changes
Spikes explained where they appear, with AI at page and card level.
- Measure: share of spikes explained without leaving the page
Dashboards that just work
A default dashboard on first run, built from cards users already know.
- Measure: dashboards revisited each week per user
Scope
Designed
- Topic setup 5 steps
- Topic Insights sections 6 + Forecasting
- Drill-down, expanded and collapsed Shared
- AI Overview, AI Summary, Spike Analysis Shared
- Dashboards and Manage Widgets Shared
- Configure: sources, filters, dashboards Shared
- Brand Health and Campaign Benchmark Brand
Specified, still to design
- Brand setup screens Brand
- Media & Advertisement, Channel Optimization, Digital Care Brand
- Loading and error states Shared
- AI confidence states Shared
- Alert builder Shared
- Add Competitor flow Brand
Out of scope (non-goals)
- Publishing and scheduling
- Reply inbox and community management
- CRM, ticketing and SLAs
- Paid media buying
- Long-range forecasting
Two branches from one "Create new study"
Both tracks share Setup, Insights, Dashboard and Configure. What's inside Insights makes them different products.
User flows
Topic branches on query mode; Brand branches on output type. Paid sources never stop setup: they join as "Pending purchase". Both flows end in the same drill-down loop.
Analysing everything around a topic
From defining the topic to explaining a spike in its conversation.
Topic track screens
Study Basics: the result is visible while it's built
A progress rail keeps the whole setup in view, and a live preview on the right fills in with every choice.
Topic Setup: the same query at three levels of difficulty
Boolean syntax is where non-specialists drop off, so nobody has to start with the hardest option.
Sources and Filters
Sources are grouped by what the plan includes; a paid source joins as "Pending purchase" instead of stopping setup. Filters narrow by region and language.
Preview: a review, not a surprise
Configuration, AI-suggested terms, cost and a launch-readiness checklist on one screen.
Trade-off. Five steps is slower for an expert with a query ready. Advanced mode lets them paste it in one go; for everyone else, the preview catches mistakes before any data is collected.
Insights: each section answers one question
Instead of one long report, the analysis is split into the questions an analyst asks about a topic.
The cards that explain the conversation
Themes show what it's about, news clusters group coverage into stories, and top posts bring the loudest voices forward.
Evaluating a brand, alone and against competitors
The same sources, read from the brand owner's side: health, reputation, media, campaigns, content, channels and care.
Brand track screens
Setup starts with one question: whose performance are we measuring? Specified, screens in progress
The same wizard pattern as Topic, plus only the decisions a brand study needs. The setup model is settled; its screens are still being designed.
Output Type, chosen first
Self-Brand analyses the user's own brand, optionally with competitors. Competitor skips the self-brand details and analyses only competitors. Asking first means the rest of setup shows only the fields that matter.
A query built from the brand
Alongside Basic and Advanced, the AI generator gets a "Create Brand Query" path: enter the brand and its products or services, and the query is drafted from them.
Comparison is a mode of the whole study, not a separate tool
Each card declares which data it shows, and the mode decides what appears.
Your brand's KPIs first, with competitor data as a secondary comparison.
Only competitors, compared with each other. Self-only metrics are hidden.
Both side by side from the start, with a toggle between views.
Trade-off. Tagging every Brand card as [S], [C] or [S+C] adds work to each one. In return, no card ever shows a comparison that doesn't make sense for the chosen mode.
Eight modules, from overall health to customer care
Each module answers one family of questions about the brand.
Awareness, engagement, perception, reputation and loyalty in one score
Coverage volume and quality, share of voice
Reach, engagement and resonance against competitors
Themes, tone, formats, virality and timing
Advocates, detractors and high-impact creators
Presence and efficiency per platform
Care volume, response and contact drivers
Search interest in the brand and its categories
Brand Health: one score, then the reasons behind it
A composite score across five pillars, benchmarked against the competitor average and best in class, then each pillar broken down.
The other modules reuse the same cards
Different questions, the same card anatomy and the same expanded and collapsed variants as the Topic track.
Where it stands. Brand Health and Campaign Benchmark are designed in depth, Content Intelligence in part, and Influencer & Author reuses the Topic design. Media & Advertisement, Channel Optimization and Digital Care are specified and mostly still to be designed.
AI answers the question where it comes up
AI isn't a separate assistant. It's attached to the three moments an analyst asks something, in both tracks.
"Why did this spike happen?"
From the marker on a trend line: time, volume, change against average, and the clusters behind it.
"What does this card mean?"
AI Summary, scoped to the card it was opened from, so every statement can be checked.
"What does this page say?"
AI Overview from the header: highlights, each linked to its card, and which cards moved most.
Trade-off. Three entry points mean three scopes to keep consistent. The requirements also ask for confidence scores and a low-confidence state on every AI output; that's the next thing to design.
One system under both tracks
I built the libraries every card comes from, whether it sits in a Topic section, a Brand module or a dashboard.
Colour
#6346E5#3013B2#170099#876DFF#101828#475467#E4E7EC#F2F4F7#00880D#F04438#F79009#FF0EABTypography
Fira Sans is the system font (Regular, Medium, SemiBold); the revamp introduced Inter.
Next system work
Some screens still mix the two typefaces, and the tokens need a semantic layer (text-primary, surface, border). Consolidating both comes before build.
Screen anatomy
Card anatomy, in both tracks
Once a user has learned one card, they know them all. Each widget type also has a collapsed variant: line graph, pie chart, bar chart, table, post and blog.
- 1Title names what the card answers.
- 2Chart switcher: a default view and alternatives.
- 3AI Summary, scoped to this card.
- 4Menu: add to dashboard, set an alert.
- 5Locked dimension with a sortable metric.
- 6Insight marker on values worth a look.
- 7See All: the way into the drill-down.
UX laws and principles behind the screens
Four generations of the design
The drill-down is the clearest thread through them: from a drawer over the page to a split screen that keeps the page visible. Along the way I also explored inline expansion.
First analysis pages
1280 px frames that mapped the first sections, such as Brand Associations.
Full product at 1920 px
A two-column widget grid, with the drill-down in a drawer over the page.
Where the overlay problem showed upNew shell and wizard
A left Insights menu, Manage Widgets, the vertical setup wizard and alert templates.
Split-screen drill-down
Full-width cards, expanded and collapsed widgets, a resizable panel and native post cards.
The signature solutionDesigning while the requirements were still moving
The PM and engineers wrote the requirements while I designed. When I reconciled them line by line, a few assumptions changed. Two are already fixed in the screens shown here; the rest are next.
| Area | The design assumed | The requirements settled on | UI change |
|---|---|---|---|
| Data freshness | Live monitoring, syncing every 5 minutes | Manual refresh, at least 24 hours apart | To do "Last updated", a Refresh control and the next refresh time |
| Competitors | A Brands selector on Topic screens | Competitors belong to the Brand track only, at most five | Done Brands selector removed from Topic screens; Brand keeps it |
| Comparison period | "Current / Past Session" tabs | The previous period of the same length | Done Renamed to Current period and Previous period |
| Paid sources | Payment inside the setup wizard | Sources join as "Pending purchase", paid for later | To do Remove payment from Preview; setup never stops for it |
| Topic sections | 7 tabs, including Forecasting | 6 sections, with no separate Forecasting section | Open Whether Forecasting stays a tab |
| Brand modules | 7 modules | 8, adding Search Trends and renaming two | To do Align module names on screen; design Search Trends |
States
Designed
- Search before typing: quick access and recent searches
- Empty Data Sources step: "Add Sources"
- Empty Add Competitors step
- Drill-down empty state, the layout the page returns to
- A source that needs re-authorising
Still to design
- Loading skeletons for widgets, drawers and AI
- Errors: sync failure, API limit, AI generation failure
- No data for a filter or period; no search results
- Confirmations: delete, reset, unsaved changes
A study's lifecycle, in both tracks
The lifecycle is specified; its screens are part of the next round.
Accessibility and screen sizes To specify before handoff
Not colour alone
Sentiment and competitor charts always carry a label and a percentage next to the colour, as in the sentiment card.
Keyboard drill-down
Opening a drill-down moves focus into the panel, Esc closes it and returns focus to the widget, and each collapsed thumbnail is a button named after its widget.
Dense data on laptops
The drag handle and widget resizing are designed. Layouts at 1280 and 1440 px still need specifying.
How I'd test it before build Planned
Ordered by risk: the decisions that would be most expensive to get wrong go first. Pass marks are my proposal, to agree with the PM.
Drill-down comparison test
FirstBoth patterns as prototypes, in counterbalanced order. Task: move between three widgets' details and explain a change.
- With
- 6 research analysts
- Measure
- Time on task, errors, Single Ease Question (1–7)
- Pass
- Faster median time and an average ease score of 5.5 or more
Topic setup usability test
SecondCreate a study from a written brief, starting in Basic mode.
- With
- 6 analysts: 3 new to listening tools, 3 experienced
- Measure
- Completion, time to launch, query errors caught at Preview
- Pass
- At least 5 of 6 launch without help
Brand comparison modes
ThirdFirst-click and comprehension tasks on the three modes, plus short interviews to validate the roles.
- With
- 5 brand and marketing managers
- Measure
- Correct mode chosen for a given question
- Pass
- Correct first click in at least 4 of 5 tasks
After launch
OngoingProduct analytics tied to the four goals.
- Track
- Time to first launched study; spikes explained in-page; time to evidence; weekly dashboard revisits; mode chosen by Brand users
What this project taught me
Being the only designer on a product this size meant every structural decision was mine to make, and to defend.
Separate the questions before designing the screens
Treating Topic and Brand as one study type with options would have mixed exploratory and evaluative analysis in every card.
Question the pattern everyone accepts
Big tools accept that a drill-down covers the page. Two variants per widget removed that trade-off instead of living with it.
Put AI where the question is
Tying each answer to a card or a spike makes it checkable, which matters more than making it clever.
What I'd do differently
Reconcile with the requirements earlier and more often, so screens never drift from them; and settle the Brand setup and comparison modes before designing the Brand modules, since every module card depends on them.
A topic is explored. A brand is judged. The product had to know the difference.
Sole product designer, working with a product manager and engineers.
Continue exploring complex systems.
Two more case studies across complex products and enterprise design.
