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.
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.
