ChallengeA Dublin-based B2B SaaS company (Series B, EUR 18M raised, 220 employees, 3,600 enterprise customers across 14 European countries, selling a compliance management platform) had accumulated significant UX debt over 5 years of feature-driven development. The product had been built by engineers adding features without design guidance, resulting in: 14 different button styles, 8 different form patterns, and 3 different navigation paradigms across the product. The interface was functionally powerful but visually inconsistent and difficult to learn. New user onboarding required 4 hours of guided training (compared to 30 minutes for the category-leading competitor). Customer satisfaction with the product interface scored 3.2/5 in the annual survey, and "ease of use" was the #2 reason for churn (after pricing). The product served 14 European markets in 6 languages (English, German, French, Spanish, Italian, Dutch), but localization was inconsistent -- some screens supported all languages, others were English-only, and the layouts broke when displaying longer German or Dutch text. Accessibility was not addressed: the product failed WCAG 2.1 AA on multiple criteria, creating liability under the European Accessibility Act for the company's enterprise customers who had their own accessibility obligations. The VP of Product wanted a comprehensive redesign that improved usability, reduced onboarding time, achieved accessibility compliance, and established a design system that would prevent future UX debt accumulation -- all without disrupting the 3,600 existing customers who had learned the current interface.
SolutionWe executed a design system and product redesign over 16 weeks, with phased implementation over a subsequent 12 weeks. Phase 1 (weeks 1-4): research and design system foundation. We conducted UX research with 24 users across 6 European markets: task analysis (how users actually complete their work vs. how the interface expects them to), pain point mapping (where users struggle, make errors, or abandon tasks), and workflow observation (watching users work in their natural environment to identify patterns the product could better support). Competitive analysis assessed 5 competing compliance platforms across usability, accessibility, and localization quality. The design system was built in Figma with: a component library (48 core components: buttons, forms, modals, tables, navigation, data visualization, status indicators, and compliance-specific components), design tokens (colour, typography, spacing, border radius, shadow -- enabling consistent theming and future white-label capability), accessibility specifications embedded in every component (contrast ratios, focus states, ARIA requirements, keyboard interaction patterns), and localization guidelines (text expansion budgets, layout flexibility requirements, RTL preparation). Phase 2 (weeks 3-8): information architecture and navigation redesign. We restructured the product navigation from a feature-organized hierarchy (users needed to know which feature contained the functionality they needed) to a task-organized hierarchy (navigation reflects what users want to accomplish: "Monitor Compliance", "Manage Risks", "Generate Reports", "Configure Policies"). The restructured IA reduced the average number of clicks to complete the 10 most common tasks from 6.4 to 3.2 clicks. Search functionality was added with AI-powered intent recognition: users describe what they want to do in natural language, and the search suggests the relevant product area and action. GDPR-compliant design: the compliance platform itself handles sensitive regulatory data. The redesigned interface implements role-based data visibility (users see only the data their role requires), audit trail accessibility (compliance officers can review who accessed what data), and data subject rights integration (the platform enables its customers to process GDPR requests for their own end users). Phase 3 (weeks 7-12): key screen redesign. We redesigned the 12 highest-traffic screens that comprised 85% of user interaction time: the compliance dashboard (from a dense data table to a visual risk-based dashboard with clear status indicators, trend visualization, and actionable insights), the risk register (from a spreadsheet-like interface to a structured workflow with status-based filtering, bulk actions, and contextual detail panels), the report builder (from a complex form with 40+ configuration options to a guided workflow with smart defaults and progressive disclosure of advanced options), and the settings and configuration screens (from scattered settings across 8 different areas to a centralized, searchable configuration centre). Each redesigned screen was: designed mobile-responsive (the existing product was desktop-only), WCAG 2.1 AA compliant (verified through automated and manual accessibility testing), localization-ready (text-flexible layouts with language-specific testing for German, the longest-text language), and validated with 6 users from the research cohort in usability testing before engineering handoff. Phase 4 (weeks 11-16): implementation guidelines and transition design. Engineering handoff documentation: every component and screen design included detailed specifications -- spacing, typography, colour tokens, interaction states, animation specifications, accessibility requirements, and responsive breakpoints. Storybook component library: we built the design system components in React/Storybook (mirroring the Figma components) to provide engineers with reference implementations and interactive documentation. Transition design: recognizing that 3,600 existing customers had muscle memory for the current interface, we designed a phased rollout: the new design was introduced behind a feature flag with optional early access, the classic interface remained available during a 3-month transition period, and contextual guidance (tooltips, a "what's new" tour) helped existing users discover the reorganized interface. User preference analytics tracked adoption of the new interface to inform rollout pacing.
OutcomeThe redesign launched in phased rollout over 12 weeks. Onboarding time: reduced from 4 hours to 45 minutes for new users (81% improvement). The guided product tour, intuitive navigation, and consistent interface patterns enabled self-service onboarding for 72% of new users (vs. 15% previously requiring hands-on training). Task efficiency: average time to complete the 10 most common tasks reduced by 44% across all users. The navigation restructuring and reduced click counts directly drove the improvement. User satisfaction: product interface satisfaction improved from 3.2/5 to 4.4/5 in the quarterly survey (37.5% improvement). "Ease of use" dropped from #2 to #6 as a churn reason. Accessibility: WCAG 2.1 AA compliance achieved across the entire product. Accessibility audit passed with zero critical or major findings. Enterprise customers confirmed the product met their European Accessibility Act requirements. New interface adoption: 78% of existing customers voluntarily switched to the new interface within 8 weeks of availability (before mandatory transition). The transition design approach -- optional early access with the classic interface as fallback -- prevented the disruption that forced redesign migrations typically cause. Design system adoption: the engineering team adopted the design system for all new development, ensuring consistency going forward. Design debt accumulation rate dropped to near-zero: new features built with system components maintained design consistency without requiring design review of every implementation detail. Localization: all 6 language versions rendered correctly with the text-flexible layouts. German-language usability (previously the worst-performing language due to text overflow issues) improved to parity with English. Churn impact: "ease of use" churn reduction contributed to an estimated EUR 420,000 in retained annual recurring revenue. Implementation cost: EUR 210,000 (design + Storybook component development). ROI: 2.0x in year one on churn reduction alone.