Redesigning WP-SMS to clarify value and guide user decisions
Timeline
2025
PLATFORM
Website Redesign
MY ROLE
Product Designer
Overview
WP-SMS is a WordPress plugin that enables site owners to send SMS notifications for events such as orders, form submissions, and user activity. It serves a wide range of users, from developers with integration requirements to non-technical site owners evaluating whether it fits their workflow.
The website is the primary decision-making surface for these users. While the product itself is mature and reliable, the website had not evolved at the same pace. As new features were added, content expanded without a corresponding update to structure or hierarchy. This redesign focused on helping visitors quickly understand what the product does, whether it fits their needs, and what to do next, without changing the underlying functionality of WP-SMS.
Context
The existing website grew incrementally. Pages were added to support new gateways, features, and use cases, but without a consistent hierarchy or narrative.
Important information such as pricing, supported gateways, and setup expectations existed, but users had to scan heavily and scroll extensively to piece it together. The site relied on exploration rather than guidance.
Goals
- Make the product’s value clear within the first screen
- Help users quickly determine whether WP-SMS fits their use case
- Reduce cognitive load on key pages
- Guide users toward one clear next step
- Create a structure that can scale as the product evolves
Scope
- Homepage
- Pricing and plan explanation
- Entry points to setup and gateway documentation
This work focused on the primary marketing and decision-making surfaces only, not the product UI or in-app flows.
Heatmaps / behavior
Microsoft Clarity heatmaps and session recordings were reviewed for key pages, including the homepage and pricing sections.
Observed patterns included:
- Fast scrolling through dense sections
- Drop-offs before reaching pricing and setup content
- Repeated interaction with non-interactive elements
- Low attention on reassurance and compatibility content
These signals indicated that users were interested, but not being guided effectively.
The problem
The core issue was not missing information, but how information was structured and sequenced.
- The value proposition was not clear above the fold
- Pages were visually flat and difficult to scan
- Technical details appeared too early for non-technical users
- Multiple calls to action competed on the same screen
- Trust signals were disconnected from moments of decision
This increased hesitation and weakened the website’s role as a decision-support tool, despite the strength of the product itself.
Constraints
This redesign was shaped by several practical constraints that influenced both scope and execution:
- The work focused on the website only. Product functionality, backend behavior, and in-app flows were out of scope.
- Existing content, including pricing details and gateway information, needed to remain accurate and could not be rewritten freely or restructured.
- The project is preparing for release, which meant design decisions needed to be validated qualitatively rather than through live metrics.
These constraints reinforced a focus on clarity, hierarchy, and content structure.
Strategy
The redesign followed one guiding principle: clarity before persuasion.
Instead of adding content or marketing language, the focus was on helping users answer three questions quickly:
- What does WP-SMS do?
- Is it relevant to my use case?
- What should I do next?
This required restructuring content around user intent, simplifying layouts, and creating predictable patterns that reduce cognitive effort.
Key decisions
Conversion focus
The redesign treated conversion as the result of clarity and confidence, not persuasion.
Rather than adding urgency or visual pressure, the experience was shaped to reduce hesitation and help users move naturally from understanding the product to taking action.
Key principles guiding this approach:
- One clear primary action per page
- Reduced cognitive load during evaluation
- A logical progression from value → proof → commitment
- Reassurance positioned before irreversible actions
Conversion was intentionally framed as a byproduct of comprehension, not optimization tricks.
Decision 1: Clarifying the above-the-fold message
The hero section was redesigned to state what WP-SMS does, who it is for, and what action to take next, without forcing users to scroll.
Before and After image
Decision 2: Restructuring navigation around intent
Navigation labels were rewritten to reflect how users think about tasks and outcomes rather than feature groupings. Pages were grouped around setup, messaging, gateways, and integrations.
Before and After image
Decision 3: Reordering content based on behavior
Heatmap data showed that users were not reaching important sections. Dense content was moved lower, and key reassurance and decision-making information was surfaced earlier.
Final design
The final design emphasizes simplicity, consistency, and readability. Predictable spacing and reusable patterns help users understand where to look next and what to do.
The structure is designed to scale, allowing pages or features to be added without reworking it.
Outcomes (pre-release)
The redesign has not launched yet, so no performance metrics are available. Post-release impact will be evaluated using qualitative and behavioral signals such as:
- Improved scroll depth on key pages
- Higher engagement with pricing and setup content
- Fewer confusion-related support questions
- Clearer early user feedback during onboarding
Before release, the redesigned structure was reviewed through internal walkthroughs and usability reviews with first-time users. These sessions indicated improved comprehension, faster identification of primary actions, and a calmer first-time experience across key pages.
My role
I led the redesign from problem definition through final design direction. My responsibilities included auditing the existing site, defining navigation and content hierarchy, designing page layouts, and aligning decisions with technical constraints. I collaborated closely with development and marketing throughout the process.
Learnings
The meaningful improvements came from removing noise rather than adding features. Clear structure, hierarchy, and restraint had a greater impact on usability than visual embellishment.
Next steps
- Validate assumptions using post-launch heatmaps and session data
- Iterate on underperforming sections
- Extend the design system to additional pages
- Continue aligning website content with product evolution
Redesigning WP-SMS to clarify value and guide user decisions
Timeline
2025
PLATFORM
Website Redesign
MY ROLE
Product Designer
Overview
WP-SMS is a WordPress plugin that enables site owners to send SMS notifications for events such as orders, form submissions, and user activity. It serves a wide range of users, from developers with integration requirements to non-technical site owners evaluating whether it fits their workflow.
The website is the primary decision-making surface for these users. While the product itself is mature and reliable, the website had not evolved at the same pace. As new features were added, content expanded without a corresponding update to structure or hierarchy. This redesign focused on helping visitors quickly understand what the product does, whether it fits their needs, and what to do next, without changing the underlying functionality of WP-SMS.
Context
The existing website grew incrementally. Pages were added to support new gateways, features, and use cases, but without a consistent hierarchy or narrative.
Important information such as pricing, supported gateways, and setup expectations existed, but users had to scan heavily and scroll extensively to piece it together. The site relied on exploration rather than guidance.
Goals
- Make the product’s value clear within the first screen
- Help users quickly determine whether WP-SMS fits their use case
- Reduce cognitive load on key pages
- Guide users toward one clear next step
- Create a structure that can scale as the product evolves
Scope
- Homepage
- Pricing and plan explanation
- Entry points to setup and gateway documentation
This work focused on the primary marketing and decision-making surfaces only, not the product UI or in-app flows.
Heatmaps / behavior
Microsoft Clarity heatmaps and session recordings were reviewed for key pages, including the homepage and pricing sections.
Observed patterns included:
- Fast scrolling through dense sections
- Drop-offs before reaching pricing and setup content
- Repeated interaction with non-interactive elements
- Low attention on reassurance and compatibility content
These signals indicated that users were interested, but not being guided effectively.
Hero captures attention
Nearly 100% engagement at the top proves users are arriving and interested—the problem isn't traffic quality.
Information hierarchy broken
Important content is ordered by template logic, not user need. The structure assumes everyone scrolls—they don't.
Core features go unseen
Green/blue zones show only 30-40% of users reach the integrations and feature grid—the value proposition is buried.
No "pull" moments
There's no spike where attention returns. The page never re-engages users once they start to leave.
Footer exists in theory only
Deep purple shows near-zero engagement. FAQ and final CTA are invisible to 95%+ of visitors—wasted real estate.
Cliff, not a slope
The red-to-yellow-to-green transition happens in seconds, not gradually. This suggests the hero fails to communicate value or encourage scrolling.
Pricing never loads for most
Blue/purple tones mean less than 20% of visitors see pricing. Revenue-critical content is functionally invisible.
The problem
The core issue was not missing information, but how information was structured and sequenced.
- The value proposition was not clear above the fold
- Pages were visually flat and difficult to scan
- Technical details appeared too early for non-technical users
- Multiple calls to action competed on the same screen
- Trust signals were disconnected from moments of decision
This increased hesitation and weakened the website’s role as a decision-support tool, despite the strength of the product itself.
Constraints
This redesign was shaped by several practical constraints that influenced both scope and execution:
- The work focused on the website only. Product functionality, backend behavior, and in-app flows were out of scope.
- Existing content, including pricing details and gateway information, needed to remain accurate and could not be rewritten freely or restructured.
- The project is preparing for release, which meant design decisions needed to be validated qualitatively rather than through live metrics.
These constraints reinforced a focus on clarity, hierarchy, and content structure.
Strategy
The redesign followed one guiding principle: clarity before persuasion.
Instead of adding content or marketing language, the focus was on helping users answer three questions quickly:
- What does WP-SMS do?
- Is it relevant to my use case?
- What should I do next?
This required restructuring content around user intent, simplifying layouts, and creating predictable patterns that reduce cognitive effort.
Key decisions
Conversion focus
The redesign treated conversion as the result of clarity and confidence, not persuasion.
Rather than adding urgency or visual pressure, the experience was shaped to reduce hesitation and help users move naturally from understanding the product to taking action.
Key principles guiding this approach:
- One clear primary action per page
- Reduced cognitive load during evaluation
- A logical progression from value → proof → commitment
- Reassurance positioned before irreversible actions
Conversion was intentionally framed as a byproduct of comprehension, not optimization tricks.
Decision 1: Clarifying the above-the-fold message
The hero section was redesigned to state what WP-SMS does, who it is for, and what action to take next, without forcing users to scroll.
Before and After image
before
before: Feature-heavy, low hierarchy
After
Clear positioning and guided decision flow
Decision 2: Restructuring navigation around intent
Navigation labels were rewritten to reflect how users think about tasks and outcomes rather than feature groupings. Pages were grouped around setup, messaging, gateways, and integrations.
Before and After image
Before
|
Existing navigation structure
After
|
Re-structured navigation
Navigation grouped by user intent: Features, Use Cases, Resources, and Pricing. reducing scanning time and improving mental model alignment.
Decision 3: Reordering content based on behavior
Heatmap data showed that users were not reaching important sections. Dense content was moved lower, and key reassurance and decision-making information was surfaced earlier.
Primary CTA captures the highest interaction density, validating its prominence above the fold
Intro video attracts exploratory clicks while maintaining clear visual separation from the main conversion path.
Engagement drops 40% before detailed feature explanations reach fold
Top navigation receives scattered engagement, indicating support for exploration rather than primary decision-making.
Final design
The final design emphasizes simplicity, consistency, and readability. Predictable spacing and reusable patterns help users understand where to look next and what to do.
The structure is designed to scale, allowing pages or features to be added without reworking it.
Outcomes (pre-release)
The redesign has not launched yet, so no performance metrics are available. Post-release impact will be evaluated using qualitative and behavioral signals such as:
- Improved scroll depth on key pages
- Higher engagement with pricing and setup content
- Fewer confusion-related support questions
- Clearer early user feedback during onboarding
Before release, the redesigned structure was reviewed through internal walkthroughs and usability reviews with first-time users. These sessions indicated improved comprehension, faster identification of primary actions, and a calmer first-time experience across key pages.
My role
I led the redesign from problem definition through final design direction. My responsibilities included auditing the existing site, defining navigation and content hierarchy, designing page layouts, and aligning decisions with technical constraints. I collaborated closely with development and marketing throughout the process.
Learnings
The meaningful improvements came from removing noise rather than adding features. Clear structure, hierarchy, and restraint had a greater impact on usability than visual embellishment.
Next steps
- Validate assumptions using post-launch heatmaps and session data
- Iterate on underperforming sections
- Extend the design system to additional pages
- Continue aligning website content with product evolution