Shopmanager Website Redesign

Shopmanager Website Redesign

Redesigned Shopmanager’s outdated product website into a user-centered, SEO-optimized platform that boosted engagement by 40% and conversions by 25%, with a strong focus on accessibility, responsiveness, and brand alignment.

Redesigned Shopmanager’s outdated product website into a user-centered, SEO-optimized platform that boosted engagement by 40% and conversions by 25%, with a strong focus on accessibility, responsiveness, and brand alignment.

Shopmanager Product Website

Shopmanager Product Website

Shopmanager Product Website

Web Design

Web Design

Web Design

4 Weeks

4 Weeks

4 Weeks

Introduction

Shopmanager, a SaaS platform for auto repair businesses, needed a complete redesign of their product website. Their existing site was underperforming: high bounce rates, poor user engagement, and outdated visuals made it difficult to earn trust or convert visitors into users.

The goal was clear—transform the site into a high-performing, user-centered platform that would increase conversions, enhance brand perception, and function flawlessly across all devices.

The new site had to feel modern, trustworthy, accessible, and optimized for business outcomes. Through a full-stack UX process, we reimagined every layer of the experience—information architecture, design, interactivity, and performance.

How might we create a trustworthy, accessible, and high-performing SaaS product website that increases user engagement and conversions?

Introduction

Shopmanager, a SaaS platform for auto repair businesses, needed a complete redesign of their product website. Their existing site was underperforming: high bounce rates, poor user engagement, and outdated visuals made it difficult to earn trust or convert visitors into users.

The goal was clear—transform the site into a high-performing, user-centered platform that would increase conversions, enhance brand perception, and function flawlessly across all devices.

The new site had to feel modern, trustworthy, accessible, and optimized for business outcomes. Through a full-stack UX process, we reimagined every layer of the experience—information architecture, design, interactivity, and performance.

How might we create a trustworthy, accessible, and high-performing SaaS product website that increases user engagement and conversions?

Project Overview

  • Client
    Shopmanager

  • Industry
    Automotive SaaS

  • Objective
    Redesign the product website to boost user engagement, conversions, SEO visibility, and accessibility.

  • Platform
    Designed in Figma and developed in Framer, supported by Photoshop, G-Suite, and Google Analytics for implementation and optimization.




Research & Analysis

  • Heuristic Evaluation
    Identified usability issues including poor content clarity, navigation confusion, and ineffective CTAs.

  • Competitive Analysis
    Benchmarked Shopmanager against competitors like Shopmonkey and Torque360 to extract UX and branding best practices.

  • User Insights
    Collected feedback indicating lack of clarity, outdated aesthetics, and user trust issues.


  • Stakeholder Collaboration
    Conducted sessions with stakeholders and project managers to outline site structure and core functionalities.


Project Overview

  • Client
    Shopmanager

  • Industry
    Automotive SaaS

  • Objective
    Redesign the product website to boost user engagement, conversions, SEO visibility, and accessibility.

  • Platform
    Designed in Figma and developed in Framer, supported by Photoshop, G-Suite, and Google Analytics for implementation and optimization.




Research & Analysis

  • Heuristic Evaluation
    Identified usability issues including poor content clarity, navigation confusion, and ineffective CTAs.

  • Competitive Analysis
    Benchmarked Shopmanager against competitors like Shopmonkey and Torque360 to extract UX and branding best practices.

  • User Insights
    Collected feedback indicating lack of clarity, outdated aesthetics, and user trust issues.


  • Stakeholder Collaboration
    Conducted sessions with stakeholders and project managers to outline site structure and core functionalities.


Ideation & Wireframing

  • Information Architecture
    Restructured site hierarchy and sitemap to support clear user flows and SEO.

  • Responsive Wireframes


  • Navigation & Layout
    Crafted intuitive navigation menus and mobile-first wireframes to support a broad user base.

Ideation & Wireframing

  • Information Architecture
    Restructured site hierarchy and sitemap to support clear user flows and SEO.

  • Responsive Wireframes


  • Navigation & Layout
    Crafted intuitive navigation menus and mobile-first wireframes to support a broad user base.

  • Visual Style & High-Fidelity Designs

  • Visual Refresh
    Redesigned the site using modern, professional UI to align with Shopmanager’s brand values.

  • High-Fidelity Screens
    Showcased real product features through updated mockups and illustrations.

  • Branding System
    Reworked iconography, visual hierarchy, and motion to establish a consistent and credible presence.

  • Visual Style & High-Fidelity Designs

  • Visual Refresh
    Redesigned the site using modern, professional UI to align with Shopmanager’s brand values.

  • High-Fidelity Screens
    Showcased real product features through updated mockups and illustrations.

  • Branding System
    Reworked iconography, visual hierarchy, and motion to establish a consistent and credible presence.

Prototyping & Functionality

  • Interactive Prototype
    Included motion-based CTAs and seamless mobile interaction.

  • Form Redesign
    Simplified and tested the Request a Demo form to increase form completion and lead capture. Integrated the demo request form with Klaviyo to automatically capture and store customer information in the Klaviyo platform to be later used for crafting email marketing campaigns.

  • Conversion Workflow

    • Simplified and tested the Request a Demo form to increase form completion and lead capture.

    • After form submission, users are guided to schedule a demo session directly via Calendly—streamlining the process, reducing drop-off, and improving the chance of a successful onboarding.

    • This created a smooth experience that aligned with our sales strategy and allowed the CEO to host meaningful demo conversations that often led to conversion.

  • Accessibility & SEO
    Integrated SEO best practices and tested to ensure WCAG AA compliance. Included motion-based CTAs and seamless mobile interaction.



Usability Testing

  • Remote Testing
    Conducted unmoderated tests to validate navigation and CTA interactions.

  • Performance
    Used Lighthouse and Google PageSpeed to improve site load speed and performance.

  • Browser & Device Testing
    Validated consistency across modern browsers and device types.





Prototyping & Functionality

  • Interactive Prototype
    Included motion-based CTAs and seamless mobile interaction.

  • Form Redesign
    Simplified and tested the Request a Demo form to increase form completion and lead capture. Integrated the demo request form with Klaviyo to automatically capture and store customer information in the Klaviyo platform to be later used for crafting email marketing campaigns.

  • Conversion Workflow

    • Simplified and tested the Request a Demo form to increase form completion and lead capture.

    • After form submission, users are guided to schedule a demo session directly via Calendly—streamlining the process, reducing drop-off, and improving the chance of a successful onboarding.

    • This created a smooth experience that aligned with our sales strategy and allowed the CEO to host meaningful demo conversations that often led to conversion.

  • Accessibility & SEO
    Integrated SEO best practices and tested to ensure WCAG AA compliance. Included motion-based CTAs and seamless mobile interaction.



Usability Testing

  • Remote Testing
    Conducted unmoderated tests to validate navigation and CTA interactions.

  • Performance
    Used Lighthouse and Google PageSpeed to improve site load speed and performance.

  • Browser & Device Testing
    Validated consistency across modern browsers and device types.





View Live Website

View Live Website

View Live Website

Results & Impact

  • +40% Engagement
    Improved visual hierarchy and UX led to longer session durations and higher interaction rates.

  • +25% Conversions
    Clear CTAs and simplified demo flows encouraged more leads.

  • +56% Search Visibility
    SEO-focused design boosted organic traffic.

  • WCAG AA Compliance
    Enhanced accessibility and inclusivity.




Key Takeaways

  • Real-time Figma to Framer workflow improved design-to-code precision.

  • Strategic use of motion and interaction increased product perception.

  • SEO and accessibility are non-negotiable for modern SaaS products.




Next Steps

  • Expand design system to the full SaaS application.

  • Continue blog and content strategy to further drive SEO.

  • Monitor analytics for continued iterative improvements.

Results & Impact

  • +40% Engagement
    Improved visual hierarchy and UX led to longer session durations and higher interaction rates.

  • +25% Conversions
    Clear CTAs and simplified demo flows encouraged more leads.

  • +56% Search Visibility
    SEO-focused design boosted organic traffic.

  • WCAG AA Compliance
    Enhanced accessibility and inclusivity.




Key Takeaways

  • Real-time Figma to Framer workflow improved design-to-code precision.

  • Strategic use of motion and interaction increased product perception.

  • SEO and accessibility are non-negotiable for modern SaaS products.




Next Steps

  • Expand design system to the full SaaS application.

  • Continue blog and content strategy to further drive SEO.

  • Monitor analytics for continued iterative improvements.

View NEXT CASE STUDY

View NEXT CASE STUDY

View NEXT CASE STUDY