B2B

B2B

UI/UX Redesign

UI/UX Redesign

Atomic Design

Atomic Design

The ITK Design Language System

The ITK Design System

Created a design system for a B2B solar installation app, improving usability and scalability while streamlining the set up of electrical systems.

Created a design system for a B2B solar installation app, improving usability and scalability while streamlining the set up of electrical systems.

Teal Flower
Teal Flower
Teal Flower

Industry

Industry

Green Energy

Green Energy

Headquarters

Headquarters

Fremont, CA

Fremont, CA

Founded

Founded

2006

2006

Company size

Company size

2000-5000

2000-5000

Opportunity

The Enphase Installer Toolkit app faced usability challenges due to inconsistent UI patterns, fragmented workflows, and unclear navigation. Field installers reported inefficiencies in solar panel configuration and design updates, leading to errors and delays. A UX revamp was critical to streamline complex processes, reduce cognitive load, and align the app with evolving technical requirements. The lack of a design system compounded inconsistencies, slowing both development and use. This presented an opportunity to unify the experience through a design+code library, ensuring clarity for installers.

Opportunity

The Enphase Installer Toolkit app faced usability challenges due to inconsistent UI patterns, fragmented workflows, and unclear navigation. Field installers reported inefficiencies in solar panel configuration and design updates, leading to errors and delays. A UX revamp was critical to streamline complex processes, reduce cognitive load, and align the app with evolving technical requirements. The lack of a design system compounded inconsistencies, slowing both development and use. This presented an opportunity to unify the experience through a design+code library, ensuring clarity for installers.

Opportunity

The Enphase Installer Toolkit app faced usability challenges due to inconsistent UI patterns, fragmented workflows, and unclear navigation. Field installers reported inefficiencies in solar panel configuration and design updates, leading to errors and delays. A UX revamp was critical to streamline complex processes, reduce cognitive load, and align the app with evolving technical requirements. The lack of a design system compounded inconsistencies, slowing both development and use. This presented an opportunity to unify the experience through a design+code library, ensuring clarity for installers.

Outcome

Post-launch data showed 15% fewer installation steps due to streamlined workflows and 33% faster design updates from the code library’s reusable components. The design system reduced inconsistencies, leading to 42% fewer QA issues. Installers reported improved confidence in task completion. The improved UI demonstrated enhanced usability, with simplified navigation and contextual guidance reducing training needs.

Outcome

Post-launch data showed 15% fewer installation steps due to streamlined workflows and 33% faster design updates from the code library’s reusable components. The design system reduced inconsistencies, leading to 42% fewer QA issues. Installers reported improved confidence in task completion. The improved UI demonstrated enhanced usability, with simplified navigation and contextual guidance reducing training needs.

Outcome

Post-launch data showed 15% fewer installation steps due to streamlined workflows and 33% faster design updates from the code library’s reusable components. The design system reduced inconsistencies, leading to 42% fewer QA issues. Installers reported improved confidence in task completion. The improved UI demonstrated enhanced usability, with simplified navigation and contextual guidance reducing training needs.

15%

Faster installation

33%

Faster update TAT

42%

Fewer QA bugs raised

Industry

Green Energy

Headquarters

Fremont, CA

Founded

2006

Company size

2000-5000

15%

Faster installation

33%

Faster update TAT

42%

Fewer QA bugs raised

Hypothesis

Creating a centralised design system with reusable components and standardised workflows would minimise development errors, and accelerate design updates. By aligning the UI with installer mental models and technical needs, the app could improve task completion rates. A parallel code library, developed collaboratively with engineers, would ensure design-to-development fidelity, reducing QA bottlenecks. Testing this hypothesis required scalable components, simplifying navigation hierarchies, and measuring efficiency gains post-implementation.

Hypothesis

Creating a centralised design system with reusable components and standardised workflows would minimise development errors, and accelerate design updates. By aligning the UI with installer mental models and technical needs, the app could improve task completion rates. A parallel code library, developed collaboratively with engineers, would ensure design-to-development fidelity, reducing QA bottlenecks. Testing this hypothesis required scalable components, simplifying navigation hierarchies, and measuring efficiency gains post-implementation.

Execution

The UX revamp began with auditing existing pain points via user interviews and workflow analysis. A modular design library was built in Figma, prioritising atomic components and task-specific templates (site mapping, system configuration). Complex workflows, like panel layout adjustments, were restructured into linear, context-aware steps. Weekly developer syncs ensured the code library mirrored the design system’s structure. Iterative testing with installers validated clarity, while before/after screens highlighted reduced visual clutter and intuitive interactions.

Execution

The UX revamp began with auditing existing pain points via user interviews and workflow analysis. A modular design library was built in Figma, prioritising atomic components and task-specific templates (site mapping, system configuration). Complex workflows, like panel layout adjustments, were restructured into linear, context-aware steps. Weekly developer syncs ensured the code library mirrored the design system’s structure. Iterative testing with installers validated clarity, while before/after screens highlighted reduced visual clutter and intuitive interactions.

Testimonials

Comments from colleagues and friends

Testimonials

Comments from colleagues and friends