Role
Product Designer
Project Type
UI Modernization
Duration
Ongoing
01.
Project Overview
UI Modernization
To address declining engagement and high user drop-off in a legacy SaaS platform, I led a UI modernization initiative grounded in user needs and expectations. The existing interface hindered usability and obscured key features, prompting a comprehensive redesign focused on clarity, consistency, and discoverability. I implemented a scalable 8pt grid system, restructured the information architecture, and overhauled navigation to better align with user workflows and business objectives. Branded, action-oriented CTAs were introduced to guide users through high-value tasks with greater clarity and intent. The result was a measurable improvement in engagement, task completion, and overall product adoption — with a notable reduction in user abandonment.
02.
the problem
Generac's Problem
The Generac Dealer SaaS platform supports order management, user administration, purchase history, and other high-level operational tasks. However, the legacy interface created friction for both day-to-day users and management-level roles. User feedback consistently pointed to unclear navigation and difficulty locating essential features — leading to frustration and workflow inefficiencies. Users expressed a need for a more intuitive experience that would support task execution and surface critical information with clarity. From a business standpoint, there was a growing concern around declining engagement and a rising volume of support-related emails.
04a.
Design Process
Discover
The discovery phase began with aligning key stakeholders around core business objectives and success metrics, ensuring a shared understanding of both challenges and opportunities. I conducted user interviews with frontline dealers and internal users to uncover pain points, behavioral patterns, and unmet needs. A heuristic evaluation of the existing UI revealed friction in navigation, inconsistent patterns, and a lack of visual hierarchy. Additionally, product analytics highlighted critical drop-off points in core workflows, reinforcing the need for clearer task flows and more intuitive interaction design. These insights collectively shaped the strategic foundation for the redesign.
04b.
Design Process
Define
Building on insights from the discovery phase, I reframed the core problem around misaligned user expectations, unclear workflows, and a fragmented UI that hindered efficiency. I synthesized user needs into clear themes—such as task clarity, faster access to high-frequency actions, and improved visibility into account activity—while mapping them against business goals like reducing support dependency, increasing dealer engagement, and driving task completion. Through this process, I identified key UX opportunities, including rearchitecting navigation, clarifying page hierarchy, and surfacing actionable data. These priorities guided the direction for design and helped establish a focused, problem-driven foundation for the modernization effort.
04c.
Design Process
Introduced the 8pt Grid System
To bring consistency and visual rhythm to the redesigned interface, I introduced a responsive 8pt grid system across web, tablet, and mobile breakpoints. This framework created structure for layout, spacing, and alignment—helping reduce visual clutter and improve scannability. The grid also served as a foundation for future scalability and design system cohesion. The accompanying visuals show the grid overlaid on both the legacy and modernized designs, highlighting improvements in alignment, spacing, and overall hierarch
04d.
Design Process
Simplified Navigation
As part of the redesign, I restructured the global navigation to reduce cognitive load and improve feature discoverability across web and mobile. The new layout consolidates redundant paths, prioritizes high-frequency actions, and introduces updated iconography for quicker recognition. By simplifying the hierarchy and improving labeling, users can now navigate the platform with greater ease and confidence.
04e.
Design Process
Before & After Comparisons
Key workflows across the platform—including the home page, user management, order management, and purchase history—were redesigned to improve clarity, efficiency, and visual hierarchy. The previous layouts often buried critical information and lacked consistent structure, making routine tasks harder to complete. In the updated designs, content is organized with clear entry points, streamlined task flows, and responsive layouts that scale across devices. Each page now better reflects user priorities and business goals, resulting in a more intuitive and purposeful experience end to end.
05.
Validate
Usability Testing
Throughout the redesign process, I conducted usability testing to evaluate task clarity, navigation efficiency, and overall comprehension across key workflows. Internal demos with product and support teams helped surface edge cases and usability gaps early, while stakeholder reviews ensured alignment with business objectives. Feedback from each round was synthesized into actionable insights, driving iterative refinements that strengthened both the user experience and functional relevance of the design.
06.
Future Impact
Lessons Learned
Following the redesign, I delivered a comprehensive Figma handoff supported by detailed dev documentation and QA rollout guidance to ensure smooth implementation. Post-launch feedback validated many of the design decisions, with users reporting improved clarity and efficiency in daily workflows. Engagement metrics showed early signs of increased task completion and reduced support dependency. This project reinforced the importance of continuous alignment between user needs and business priorities, and the value of early testing and iteration in driving scalable, high-impact design outcomes.