An analytics tool for "AI SEO" with 11 Labs
0-1 Product Design
Startups
End-to-end Design
UI, Product Strategy
My first chat with the PM
What features make an AI SEO tool?
Content needed consolidation
I observed agents jumping between multiple open tabs because articles were written by multiple authors over months/years.
Quicker access to answers in the tool
The tool only showed them what SKU the customer was on.
No brief on features
No link to relevant article
Marketing jargon
Customers didn't care that the software would handle 1 million threats. They wanted to know how it would impact them.
Missing visuals and no simulators
With frequently changing UI and no simulation tool, agents had to guess what the customers were seeing.
With a clear strategy, I began designing the core user experience as a series of chapters, each answering a critical question for the user.
The Report: The landing experience provides an immediate snapshot of brand health. Key scores for Visibility, Rank, and Sentiment give a high-level answer to "How are we doing?"
Competitor Analysis: A comparative view answers, "How are we doing relative to others?" By juxtaposing scores across different LLMs (e.g., winning on ChatGPT but losing on Gemini), the tool tells a story and highlights model-specific optimization opportunities.
The Prompts Playground: To build trust and grant users control, we exposed the engine itself. Here, users can see every prompt run against the LLMs, sort them by performance, and even contribute new prompts using an AI-powered generator. This transparency turns the tool from a black box into a hands-on workshop.
Source Tracing: Instead of just reporting a brand mention, we traced it back to its source—be it a Reddit thread, a blog post, or a forum. This provided marketing teams a direct map of where to engage online communities.
This structured approach ensured users could move from a high-level overview to granular details seamlessly.
Experienced agents each had unique methods of organising information
Insight - Agents were finding workarounds to poor processes
A Word doc with every relevant link organised by subject
Sticky notes with price points and shortcuts to commonly asked questions
Taping a pricing chart to the wall
Go on and "Focus" - Turning a settings feature into a core product strategy
3. Deep Dive: The "Aha!" Moment with Focus Area Visualization
Initially, "Focus Areas" were just a list in a configuration menu. It was functional but lacked strategic value. The data felt flat. I asked myself: What decision are we trying to help the user make? The goal wasn't just to see the topics, but to decide where to play. This question led to a fundamental shift from a data table to a strategic visualization.
Agent looks up SKU inside of tool
Agent places the customer on hold
A given topic could have 6-9 articles
Designing for Focus Areas
Why the colour purple?
This contrast revealed a deeper issue: Knowledge wasn’t organised.
Exploration & Rationale
Before arriving at the final design, I explored several other directions:
A Simple Table: A sortable list with metrics. This was information-dense but failed to show relative market importance at a glance.
A Tag Cloud: Visually more engaging, but poor for precise comparison and understanding market share.
A Bar Chart: Good for ranking but disconnected from the feeling of a "landscape" or "territory."
These options presented data, but they didn't guide strategy. I landed on a diagrammatic map where each Focus Area was a block, because it could visually encode multiple layers of information simultaneously. I prioritized visualizing two key metrics:
Market Share (Size): The size of the block represents the total volume of conversation for that topic across LLMs. This immediately shows users where the biggest markets are.
Brand Visibility (Color/Opacity): The brightness or color saturation of the block indicates the brand's visibility score within that topic.
This combination allowed users to understand the landscape in seconds. A large, dim block meant a huge, untapped opportunity. A small, bright block signified a well-defended, valuable niche.
![A conceptual sketch or wireframe of the Focus Area visualization would be placed here in a real portfolio.]
From Insight to Action: Securing Buy-In
When I presented this visualization to the team (Product Manager, Data Scientists, and Engineering Lead), the reaction was immediate. The PM noted, "This doesn't just tell you how you're doing—it tells you where to focus next." This single feature elevated the entire product from a reporting tool to a strategic decision-making engine. Getting buy-in was straightforward because the design directly answered the core business need in a way a spreadsheet never could. It became a cornerstone feature rather than a simple configuration setting.
The development was a collaborative effort. I worked with our data scientist to confirm we could reliably generate the "conversation volume" metric and with engineering to ensure the UI could be rendered dynamically and performantly.
MVPs and validating an idea in an emerging field
From Insight to Action: Securing Buy-In
Handling Scale and Edge Cases
A key consideration was scalability. How would this visualization handle a brand with 20+ focus areas, or a niche market that suddenly explodes in popularity? We designed for this by:
Using a Treemap Algorithm: For a large number of areas, the layout would automatically arrange itself to maintain readability without overwhelming the user.
Implementing Dynamic Resizing: The UI was designed to adapt gracefully to shifting data, with animations to subtly indicate changes week-over-week.
Adding Trend Indicators: To address sudden market spikes, we planned to overlay icons or trend lines to highlight significant changes, turning volatility into a clear signal for the user.
4. Outcomes & Impact
While the product is pre-launch, the design has already shaped the company's strategy by providing a clear vision for what a next-generation analytics tool can be.
The design philosophy—"from insight to action"—is now a guiding principle for the product. Instead of simply delivering charts, every feature is now assessed on its ability to surface a concrete "Opportunity" with a recommended next step.
Measuring Success
Once shipped, we would track the feature's success by measuring its influence on user behavior. Key metrics would include:
Adoption Rate: Percentage of users who engage with the Focus Area visualization within their first week.
Strategic Action Correlation: Tracking how often users who view this visualization proceed to add new prompts or create content related to a low-visibility/high-volume focus area.
Repeat Usage: How frequently users return to this screen to monitor their strategic landscape over time.
Qualitative Feedback: Interviewing users to collect stories of how the visualization directly influenced a shift in their marketing strategy or budget allocation.
Craft & Systems
As a new product, we didn't have an existing design system. This feature served as a catalyst for creating our foundational components. We established a minimalist "microSaaS" aesthetic to ensure that complex data visualizations felt clean and approachable, not overwhelming. We relied heavily on principles of progressive disclosure, showing the high-level map first and allowing users to click into any block to see detailed metrics, competitors, and specific prompts for that area.
5. Conclusion & Key Learnings
This project was a lesson in designing for an entirely new paradigm of the internet. It reinforced that the designer's primary role is not just to organize information, but to imbue it with meaning and guide the user toward a confident decision. By pushing past the obvious solution (a table of data), we unlocked the product's core value and created a tool that empowers companies to navigate a future where discoverability is more conversational than ever.
Every feature/topic had mutliple articles associated with it
What they currently trained with:
Handwritten posters
A cheatsheet - to print + digital
FAQ style prep sheet
Final Solution
Instead of creating yet another resource (like a flashcard) for the agent to handle, I saw an opportunity within the tool itself.
What could the pop-up modal look like?
Ultimately the easiest means for Engg to implement the change was a stripped down version
I proposed embedding feature summaries directly within the internal tool’s "View Assets" section.
Each product feature now:
Explained what it does, in human terms
Linked to the most relevant (and updated) KB article
Reduced the need to switch tabs or guess
A small change, but a significant impact.
While the proposed changes could be a quick win, the internal tool required Dev resources
