Go back
Go back
Redesigning a B2B SaaS website: Applying interaction design principles to improve user engagement and conversion clarity
Redesigning a B2B SaaS website: Applying interaction design principles to improve user engagement and conversion clarity
A rapid one-week redesign informed by stakeholder insights, analytics data, and competitive analysis, transforming a static B2B landing page into a conversion-focused experience.
A rapid one-week redesign informed by stakeholder insights, analytics data, and competitive analysis, transforming a static B2B landing page into a conversion-focused experience.
Role
Lead UX/ Interaction Designer
embedded collaboration with client team
Team
Client: SalesMonk — B2B AI-powered sales platform (US-based)
Collaboration: Embedded work with Head of Go-to-Market (daily syncs) + Founder reviews
Research Inputs: Customer feedback data, bounce rate analytics, competitor analysis
Source
Source
Upwork · Freelance
Timeline
Timeline
1 week
The Brief
The Brief
Client Context: SalesMonk, a B2B AI-powered sales platform, identified that their existing website was underperforming as a conversion tool. The site was visually static, lacked clear information hierarchy, and failed to communicate product capabilities effectively to their target audience (sales teams and revenue leaders).
Client Context: SalesMonk, a B2B AI-powered sales platform, identified that their existing website was underperforming as a conversion tool. The site was visually static, lacked clear information hierarchy, and failed to communicate product capabilities effectively to their target audience (sales teams and revenue leaders).
Discovery: Stakeholder Research
Through intensive daily collaboration (2–4 sessions per day) with the GTM Head, I gathered insights about user behaviour and business challenges:
Discovery: Stakeholder Research
Through intensive daily collaboration (2–4 sessions per day) with the GTM Head, I gathered insights about user behaviour and business challenges:
Design Challenge
How might we redesign the website to:
Communicate product value clearly within the first scroll
Reduce cognitive load in pricing presentation
Create interactive moments that reflect product sophistication
Maintain brand tone while modernising visual language
all within a one-week timeline?
Design Challenge
How might we redesign the website to:
Communicate product value clearly within the first scroll
Reduce cognitive load in pricing presentation
Create interactive moments that reflect product sophistication
Maintain brand tone while modernising visual language
all within a one-week timeline?
Research & Analysis
Research & Analysis
Given the intensive timeline, I combined multiple rapid research methods:
Given the intensive timeline, I combined multiple rapid research methods:
Daily sessions with GTM Head served as ongoing stakeholder interviews, surfacing: Voice of customer data (what prospects and customers said about the site) Sales objections related to website perception Brand guidelines and tone requirements
Daily sessions with GTM Head served as ongoing stakeholder interviews, surfacing: Voice of customer data (what prospects and customers said about the site) Sales objections related to website perception Brand guidelines and tone requirements
Synthesis
Synthesis
From this research, I derived four design principles to guide all decisions
From this research, I derived four design principles to guide all decisions
Clarity over cleverness. Value proposition visible within first viewport
Progressive disclosure Reveal complexity gradually, not all at once
Interaction as credibility Micro-interactions signal product sophistication
Visual continuity Consistent design language builds trust
Clarity over cleverness. Value proposition visible within first viewport
Progressive disclosure Reveal complexity gradually, not all at once
Interaction as credibility Micro-interactions signal product sophistication
Visual continuity Consistent design language builds trust
BEFORE / AFTER
BEFORE / AFTER
Issue (from research): GTM Head reported brand inconsistency undermined credibility. Analytics showed high bounce suggesting poor first impression.
Issue (from research): GTM Head reported brand inconsistency undermined credibility. Analytics showed high bounce suggesting poor first impression.
Design Response: Unified visual system, consistent logo treatment, harmonised colour palette, and standardised component styling. Applied the Gestalt principle of similarity to create visual cohesion that signals professionalism.
Design Response: Unified visual system, consistent logo treatment, harmonised colour palette, and standardised component styling. Applied the Gestalt principle of similarity to create visual cohesion that signals professionalism.
Issue (from research): High bounce rate indicated users leaving before comprehending full value. Visual disconnection between sections contributed to cognitive fragmentation
Issue (from research): High bounce rate indicated users leaving before comprehending full value. Visual disconnection between sections contributed to cognitive fragmentation
Design Response: Continuous scroll narrative with consistent typography scale, repeating visual motifs, and intentional whitespace rhythm. Supports Gestalt principle of continuity - guiding users through the page rather than losing them between sections.
Design Response: Continuous scroll narrative with consistent typography scale, repeating visual motifs, and intentional whitespace rhythm. Supports Gestalt principle of continuity - guiding users through the page rather than losing them between sections.
Layered interaction design - unified hover states, smooth scroll transitions, and visual hierarchy directing attention to primary actions. Colour and motion choices position SalesMonk alongside competitor visual standards while maintaining brand differentiation.
Layered interaction design - unified hover states, smooth scroll transitions, and visual hierarchy directing attention to primary actions. Colour and motion choices position SalesMonk alongside competitor visual standards while maintaining brand differentiation.
Click on the images to zoom.
This board simply explains a page within the website.
Note: not the exact hero section of the main landing page.
This board simply explains a page within the website.
Note: not the exact hero section of the main landing page.
Features pages - The Highlight.
Features pages - The Highlight.
Every Feature Page was designed to feel interactive and product-led, not just a list of bullet points. Each feature has its own visual moment, with hover states, micro-interactions, and clear hierarchy.
Every Feature Page was designed to feel interactive and product-led, not just a list of bullet points. Each feature has its own visual moment, with hover states, micro-interactions, and clear hierarchy.
Stakeholder Validation
Stakeholder Validation
Process: Designs were reviewed iteratively with GTM Head (daily) and Founder (milestone reviews). Feedback was incorporated in real-time, with 2–4 revision cycles per day during peak collaboration.
Process: Designs were reviewed iteratively with GTM Head (daily) and Founder (milestone reviews). Feedback was incorporated in real-time, with 2–4 revision cycles per day during peak collaboration.
Final Feedback: "Good design sense from Surya and he puts in the effort to make things right. Good job." - Head of GTM, SalesMonk
Final Feedback: "Good design sense from Surya and he puts in the effort to make things right. Good job." - Head of GTM, SalesMonk
Outcome
Post-launch, the client reported improved conversion performance. While specific metrics were not shared, qualitative feedback indicated:
Increased demo requests
Positive prospect feedback on website experience
Sales team confidence in sharing the site with leads
Note: Quantitative metrics would strengthen validation. In future engagements, I would establish metric tracking as part of the project scope
Post-launch, the client reported improved conversion performance. While specific metrics were not shared, qualitative feedback indicated:
Increased demo requests
Positive prospect feedback on website experience
Sales team confidence in sharing the site with leads
Note: Quantitative metrics would strengthen validation. In future engagements, I would establish metric tracking as part of the project scope
Discussion
Discussion
with the GTM Head provided:
Continuous voice-of-customer insights
Real-time feedback loops enabling rapid iteration
Business context that informed design priorities
This approach — sometimes called "stakeholder-as-proxy" research — is common in B2B contexts where end-user access is limited.
with the GTM Head provided:
Continuous voice-of-customer insights
Real-time feedback loops enabling rapid iteration
Business context that informed design priorities
This approach — sometimes called "stakeholder-as-proxy" research — is common in B2B contexts where end-user access is limited.
