Wellows — Case Study by Umar Akbar

01 Overview

A platform built inside
an emerging category

Wellows is an AI visibility tracking platform under Disrupt Lab — built to help brands, agencies, and marketers understand and grow their presence inside AI-generated answers across ChatGPT, Gemini, Perplexity, Google AI Overviews, and AI Mode. I joined this project from the earliest stages and have been the sole UI/UX designer across every phase of its evolution.

The product in one sentence

Wellows tells you how often your brand appears when people ask AI, why your competitors appear more, and exactly what to do about it — through content creation, outreach, and performance tracking, all in one platform.

My scope

Full product UI/UX — every screen, every component, the design system, onboarding, and feature modules from initial exploration to what's live today.

Team structure

I work directly under a Project Manager. My work covers UI design and UX decision-making, with the PM bridging to engineering and business stakeholders.

Project status

Live product. Actively used by agencies, freelancers, and brands. New features continue to ship. This is a growing, production-grade product — not a prototype.

Years designing the product, from concept to live

AI platforms tracked — ChatGPT, Gemini, Perplexity, AI Overviews, AI Mode

10+

Major feature modules designed end-to-end

Major strategic pivot — from conversational UI to structured dashboard

02 The Problem

A new category with
no visual language

AI search visibility is a genuinely new category. When we started, there was no established model for what this kind of tool should look like or how users should navigate it. That ambiguity was both the challenge and the opportunity.

The core user problem was clear: brands and agencies had no structured way to measure, compare, or act on their presence inside AI-generated answers. They were flying blind while their competitors were being cited by ChatGPT and Gemini.

Market context

The GEO (Generative Engine Optimization) space was forming in real time. Competitors were emerging, category definitions were shifting, and users were arriving with mental models built from traditional SEO tools — not AI-native interfaces.

Who we were designing for

Agencies managing multiple client brands, in-house marketers at startups, freelance consultants, and SEO professionals expanding into GEO. All had one thing in common: they already knew Semrush and Ahrefs. That familiarity shaped everything.

What the product needed to deliver

Track AI citation frequency. Identify where competitors are winning. Surface content gaps. Find outreach targets. Generate optimized content. Report progress over time. All of this in a single, opinionated workflow.

The design challenge

How do you make a technically complex, data-dense product feel immediately understandable to users whose comfort zone is traditional SEO dashboards — without becoming a Semrush clone?

03 The Strategic Pivot

We built the wrong thing.
Then we fixed it.

The first version of Wellows was a conversational AI interface — a chat-based UX where users typed natural language queries to get visibility data and keyword insights. It worked technically. But it failed the user.

Phase 1: Conversational UI — Users typed prompts to get results. Felt novel but created friction at every step.

"We were asking users to learn a new behaviour in a tool they needed to trust immediately. It wasn't working."

New users onboarded into our Slack community consistently showed the same confusion: they didn't know what to ask, they didn't know what the tool could do, and they weren't sure if the outputs were what they needed.

Meanwhile, the competitors entering the GEO space were all converging on structured dashboards — the visual grammar that SEO professionals already trusted. We were creating cognitive overhead where the category needed clarity.

Conversational GSC flow — Multi-step through chat created unnecessary back-and-forth

Keyword insights panel — Data rendered alongside chat felt disconnected and hard to scan

→ The Decision

Pivot to a structured dashboard

After monitoring how real users interacted with the product and surveying competitor positioning, I presented a clear case: users in this category navigate by scanning dashboards, not conversing with agents. The decision to rebuild was made with full alignment.

The new direction borrowed the visual grammar of Semrush and Ahrefs — not their aesthetic — as a cognitive anchor for users already trained on those tools, then pushed further with a cleaner, more focused data architecture.

Phase 1 · Deprecated

Conversational Interface

Users typed natural language queries. Results appeared inline in a chat thread. No persistent navigation. High learning curve.

↓

Phase 2 · Live

Structured Dashboard

Persistent sidebar navigation. Dedicated views per feature. Scannable data tables, charts, and comparison modules. Familiar to SEO professionals.

04 The Design

Every screen has
a job to do

The dashboard was designed around a core workflow: understand where you stand, identify what to fix, take action, then track what changed. Every module maps to one of these four stages.

Overview Dashboard

Brand Visibility Score Single headline metric. Users know immediately where they stand before going deeper into the data.

Competitor leaderboard Ranked list with inline progress bars — the same visual pattern users know from Semrush's domain comparison, immediately readable.

Cross-LLM breakdown Heat-map table showing citation frequency per AI platform. Users can spot which LLMs they're winning or losing on at a glance.

Contextual opportunities surfaced inline The overview doesn't just show data — it surfaces the next action directly on the page, reducing time-to-insight.

Platform & Region filters Global filters that persist across the session — a deliberate structural decision to reduce repetitive interaction.

Visibility Score Detail View

Benchmarking against competitors over time

The Visibility Score screen breaks down the headline metric into constituent drivers — total mentions, explicit mentions, implicit mentions, and tracked queries — giving users a causal chain, not just a number.

Monitor Module

Market intelligence in one view

The Monitor screen was one of the more complex design problems: combining a trend chart, a radar chart for topic positioning, and an AI-generated narrative analysis — without it feeling like a data dump.

The solution was clear sectioning with strong typographic hierarchy, and keeping the AI-generated insight cards collapsible and colour-coded by type: brand performance, industry trends, competitor movements.

Opportunity Modules

Two paths to closing the gap

The platform distinguishes two types of opportunity: Explicit (content topics your competitors rank for — you should write about them) and Implicit (high-authority sites already cited by LLMs — you should get mentioned there). This distinction needed to be structurally clear, not buried in labels.

Explicit Opportunities — Content gaps with estimated citation uplift. One-click to generate the content.

Implicit / Outreach Opportunities screen

Implicit / Outreach Opportunities — High-authority domain targets with DA scoring, topic tagging, and direct outreach action.

Tracking & Reporting

Proving progress over time

Performance History and Citation Share are the screens agencies bring to client presentations. The design needed to communicate trend, comparison, and delta — clearly, at a glance, without requiring explanation.

Performance History — Date range comparison, query-level breakdown with intent and mention type tagging.

Citation Share — Market share view of AI citations. Users see their competitive rank instantly alongside trend lines.

KIVA — Content Engine

From opportunity to published content

KIVA is the content generation module — an integrated keyword research and content creation tool. It needed its own distinct visual language inside Wellows because the interaction model is different: more exploratory, keyword-led, with a multi-step creation workflow.

Entry point — Create new vs. update existing content. Clear choice architecture.

Keyword results — Dense data table with KD, SV, intent, hidden gems, and contextual themes.

Creation modal — Quick Generate vs. Build with Insights. Control vs. speed, user decides.

05 Design System

The language
behind every screen

Every decision in the product traces back to a structured design system — tokens, component patterns, and typographic rules that ensure consistency across a product that spans 10+ feature modules and continues to grow.

Color Primitives

Brand 100 #0554F2

Brand 10 #E6EEFE

Brand 150 #032A79

Black 100 #333333

Slate 10 #F8F9FA

Slate 60 #6C757D

Green 100 #15803D

Red 100 #B63936

Typography Scale

Heading — App Overview

Heading — Section Brand Visibility Score

Body — Default How often your brand appears in AI platforms

Label — Uppercase Citation Share

Data — Numeric 40%

Component Tokens

+12 mentions Explicit

Research Innovation Agility

👁 Visibility Insight

You are ranked 5th in AI visibility. Ahrefs and Frog Design are currently outperforming you.

Open

Contacted

Won

Effect Styles Defined

Card shadow Dropdown Modal

Text Style Groups

Heading Web · Heading App · Body — all defined as named styles in Figma, enabling consistent application across the team.

06 Process

How the work actually
gets done

Designing an ongoing SaaS product over two years is different from a one-off project. The process is iterative, informed by live user signals, and always balancing shipping speed with design rigour.

Competitive & user signal analysis

Before designing any new feature, I study how tools in adjacent categories handle similar problems — Semrush, Ahrefs, SpyFu, and GEO-native competitors. User signals come from the Slack onboarding community where real users voice confusion, requests, and feedback directly.

Wireframing information architecture

New modules start with structural wireframes. The key question: what does the user need to understand, and in what order? For data-heavy screens like Monitor and Performance History, this step is the most critical — the architecture determines whether the screen feels clear or overwhelming.

High-fidelity design in Figma

All final screens are designed in Figma using the shared design system. Components, styles, and tokens are maintained centrally — so any design update propagates across the file. Every screen is documented with states: default, empty, loading, error, and populated.

PM review and iteration

Designs are reviewed with the Project Manager before handoff. This is where business requirements are stress-tested against the UX. Revisions are tracked in Figma with version annotations, ensuring engineering always has the latest approved screens.

Continuous iteration post-launch

Wellows is a live product. Features ship and then get refined based on real usage. This means the design work never ends — it evolves. New patterns get added to the design system, edge cases get resolved, and the visual language matures as the product grows.

07 Reflection

What this project
taught me

Two years into a single product is a different kind of design education. You see the full arc — what you got right early, what needed to be undone, and how a product grows when design decisions compound over time.

🔄

The courage to recommend a pivot

Recognising that the conversational UI wasn't serving users — and advocating clearly for a fundamental direction change — was the most consequential design decision I made on this project. It required research, conviction, and clear communication to the team.

👥

Users shape the product, not just designers

The Slack community gave us direct access to real user confusion. Designing without that signal would have produced a product optimised for our assumptions rather than actual behaviour. Staying close to user feedback is not optional — it is the job.

📐

Design systems pay off slowly, then all at once

Building the token structure and component library felt slow in the early months. By year two, every new feature ships faster because the foundations exist. Investing in design infrastructure is long-game thinking that compounds.

🧭

Familiarity is a feature, not a compromise

When designing for a new category, borrowing the visual grammar of established tools is not a lack of creativity — it is strategic. Users arrive with existing mental models. Meeting them there reduces friction and lets the new ideas land without the cognitive overhead of learning a new interface.

Designing for AI Visibility at Scale

A platform built insidean emerging category

A new category withno visual language

We built the wrong thing.Then we fixed it.