Responsive Design for
Enablon SaaS
Scaled the platform from desktop-only to a company-wide responsive design strategy. The mobile-first platform design empowers field operators with a seamless on-site experience
Role:
UX Designer & Accessibility Lead
Tools:
Figma, Miro, Storybook, and Product Board
Process:
Research & usability audit
Information Architecture
Prototyping & Design on mobile-first responsive redesigns
Documentation: Creating enablement guides
Challenge
Enablon’s SaaS applications were built originally for EHS managers and administrators working on desktop computers. As the user base expanded to include field operators, the platform required a comprehensive responsive overhaul to support mobile workflows and diverse on-site conditions.
Responsive details and user flow planning on navigation
Responsive use case on breadcrumbs and dropdowns
Objectives
Universal Adaptation: Deliver a seamless experience across mobile, tablet, and desktop.
Inclusivity: Enhance accessibility and engagement for all user types.
Optimal Performance: Ensure clarity and ease of use in varied field environments.
Approach
User-Centered Experience
Applying semantic HTML page layouts to ensure intuitive navigation and accessible content regardless of screen size.
Prioritized clarity and ease of use for field operators working in varied conditions.
Fluid Layouts & Reflow
Redesigned navigation and page structures using flexible grids that automatically reflow content.
Achieved WCAG 2.2 Success Criterion 1.4.10 (Reflow), eliminating horizontal scrolling and supporting zoom levels up to 400%.
Strategic Technical Execution
Breakpoint Strategy: Collaborated with developers to define specific layout thresholds for optimal display across the device spectrum.
Preserved Control: Integrated accessibility best practices that allow users to zoom and adjust content without breaking the interface.
Impact
Expanded Reach: Successfully expanded Enablon's reach to a larger, mobile-dependent workforce by removing hardware barriers.
Strategic Foundation: Established the mobile-first design template now used for future Wolters Kluwer product releases.
