SEO product case study · WordPress · AI native

SureRank

Most SEO plugins feel like cockpit dashboards: 300 toggles, colour-coded scores, and warnings like "favicon not optimized" that tell you something is wrong without telling you what to do. SureRank was built on a different premise. I designed it from 0 to 1 as the sole product designer, working alongside PM and PO to define not just the interface but the product's core philosophy: guidance over guesswork, clarity over clutter, and AI that helps at the moment you need it.

My role: Product strategy, UX/UI design, dashboard design
Scope: 0-to-1 WordPress product built entirely on Force UI
Team: PM, engineering, content strategy
Tools: Figma, UX research, AI workflows, React

Outcome

Reviews consistently cite clarity and actionability as SureRank's main differentiator against Yoast and Rank Math.

Overview

Turning SEO data into an actionable workflow

The market problem

Yoast and Rank Math had trained users to expect a score. But a score tells you where you are, not what to do next. Users could see something was wrong, but they had no clear next step. SEO plugins had become bloated with settings, toggles, and technical warnings written for developers, not for the bloggers, founders, and small business owners actually using them. SureRank was built for a different kind of user: someone who wants to understand their SEO, not just monitor it.

My responsibility

As the sole product designer, I shaped the product from the ground up: information hierarchy, the prioritised fix model, plain-language recommendations, contextual AI placements, dashboard layout, per-page analysis, and Force UI implementation. I worked closely with PM and PO to define the product philosophy before touching Figma. Every feature had to pass four questions before we built it: Does it solve a real SEO need? Can anyone understand how it works? Does it guide the user on what to do next? Does it keep the product lightweight?

The product model

SureRank uses two connected surfaces: a site-wide health dashboard and a per-page analysis panel where users complete prioritised fixes. Every session should end with a clear next action.

Constraints that shaped the work

01Support beginners without removing useful technical context for SEO-literate users.
02Differentiate through focus and speed in a market known for feature-heavy plugins.
03Make AI useful without interrupting or pressuring users.
04Validate Force UI inside a data-heavy production product without custom one-off components.

Key decisions

Three decisions that made SEO feel actionable

Decision 1

Prioritised fixes over a score-first dashboard

Context: Competitors led with a score, but a number explains where users are, not what they should do next.
My decision: I made the impact-ranked fix list the primary surface and kept the overall score visible as secondary context.
Tradeoff: Some users expected a prominent score because existing SEO products had trained that behavior. We restored it as visible but deliberately secondary.
Result: Davinder Singh Kainth, founder of The WP Weekly, described SureRank as standing out for "quick and straightforward SEO setup, without the complex options overload." Pascal Claro called it "a clean, focused, yet powerful SEO plugin." The fix-first model was the reason.

Annotated SureRank dashboard showing prioritized site SEO issues, severity labels, and row-level fix actions. — Real product screenshot with annotations: the dashboard leads with prioritized issues, severity labels, and clear fix actions. The score stays visible, but it no longer becomes the only thing users optimize for.

Decision 2

Plain language first, technical context second

Context: Canonical URLs, schema markup, and meta robots language excluded bloggers and small-business owners who were not SEO experts.
My decision: I wrote the actionable instruction as the primary label and placed the precise SEO term and measurement underneath as supporting context.
Tradeoff: Every issue required genuine content-design work and accuracy review; this took significantly longer than simply reusing standard SEO terminology.
Result: Teylor Feliz, founder of Haketi, noted that SureRank "explains issues clearly, so even junior devs can act fast." That line captures exactly what plain-language SEO copy was designed to do: make the right action obvious to anyone, not just SEO experts.

Annotated SureRank analysis drawer explaining a missing meta description in plain language before offering an AI fix. — Real product screenshot with annotations: issue details were written like guidance, not error logs. Users see what happened, why it matters, how to fix it, and where AI can help.

Decision 3

Contextual AI that appears at the moment of action

Context: Early prominent AI suggestions felt intrusive. Users wanted help while solving a problem, not a product that constantly tried to rewrite their content.
My decision: I placed AI touchpoints directly inside relevant issue cards: AI Suggest for titles, Generate Alt Text for images, and content suggestions for analysis issues.
Tradeoff: Contextual placement required bespoke interaction design for each issue type instead of one reusable global AI panel.
Result: Pascal Claro described the AI assistant as "a must-have" after testing the first beta. Because AI lived inside issue cards rather than a separate panel, it felt like part of the workflow, not a feature bolted on top of it.

Annotated SureRank page-level SEO panel showing AI entry points beside title and description fields. — Real product screenshot with annotations: AI entry points sit beside the exact field or issue being fixed. The user reviews generated options and chooses what to apply.

AI feature system

Six capabilities, all native to the workflow

There is no separate AI dashboard in SureRank. Each capability sits inside the relevant workflow step, reducing the distance between spotting a problem and fixing it.

Each AI capability had to pass the same four-question test as every other feature: real need, understandable, actionable, lightweight. Six made it in. Several did not.

Titles and descriptions

Generate optimised metadata using page content and target keywords.

Alt text generation

Create contextually accurate descriptions for images missing alt text.

Internal link suggestions

Find relevant opportunities from existing site content.

Content fix suggestions

Explain specific improvements and the reasoning behind them.

Open Graph images

Generate missing social-share images without a separate design tool.

Plain-language explanations

Translate technical SEO issues into clear action steps.

Annotated SureRank Open Graph image screen showing AI image generation and manual fallback upload. — Real product screenshot with annotations: Open Graph image generation lives inside the relevant social image setting, with a fallback upload path for manual control.

Impact

What changed

0→1designed the product solo, from philosophy to shipped experience
3 decisionsfix-first dashboard, plain-language copy, and contextual AI validated by real user feedback
6 AIcapabilities native to the workflow, none requiring a separate surface
Citedclarity and actionability mentioned across independent reviews as the main differentiator versus Yoast and Rank Math
1stproduct in the suite built entirely on Force UI in production

Reflection

What I would do differently

01Test plain-language copy earlier with real non-SEO users. A few descriptions that felt clear internally were still too technical for beginners.
02Define the AI interaction system upfront: suggestion presentation, acceptance, rejection, and confidence should have been consistent across all six capabilities from the start.
03The four-question feature framework we built with PM and PO kept the product focused. Keyword input exists at the per-page level where it helps users optimise a specific page. Keyword ranking as a dashboard metric did not pass the "guides users on what to do next" test in phase one, so it stayed out. That call was right. Defining the framework earlier would have made every subsequent feature decision faster and easier to defend.