Methodology and Tools

• UI and UX Audit

• Design QA of existing implementation

• Component library creation

• Style guides and definitions

• UI design with new library

The Process

Background Issues

Before this exercise there was no central design system for the application and most of the design decisions even for common pages were left up to the designers and design managers. This caused quality issues in production and repeatability issues in design.

Visual Inconsistencies

Inconsistent design elements: Fonts, icons, colours and page layouts (grids, paddings, margins) are not standardized across the platform.

UI Inconsistencies

Lack of UI consistency: Buttons, pop-ups, configuration pages and other elements appear inconsistent across the app and platform. Older sections also deviate from current design style.

Cross Platform User Platform Consistency

Inconsistent UX: Similar functions have varying user flows across different devices.

Devices in Scope

Challenges

Since this was not a new project, there were existing paradigms that were established over many years and multiple components and their instances existing in production. So, we needed to identify these instances and bring different teams (Development, Product Management and Design) on the same page on what would be acceptable changes.

We had to -

• Conduct design audit on the hundreds of screens to identify variation in shades, in components, fonts and icons.

• Reverse engineer the inconsistent screens to identify it as a design/development bug

• Coordinate with cross-functional teams (dev, product) to align on the functionality, feedback and metrics

• Prioritise the features that would be taken up based on dev, product bandwidth and feature pipeline.

• Identifying component states from the code since legacy design files weren’t available and had to be recreated on XD/Figma.

Summary of Work

Purpose

"Advancing a sustainable future for all"

Typography

 Enphase Visuelt is the primary typeface for all visual communication and should be used for most copy, including body copy, headlines, and CTAs.

For highly technical information, detailed stats, section eyebrows, and captions, Enphase uses T-Star Pro. Its shared proportions and mono-line stroke weight are reminiscent of precision instruments such as callipers, cameras, and microscopes.

Colour Palette

Condensed to this functional palette after condensing the 200+ shades used in the designs.

Accessibility

Neutrals

While using the colour palette for designing components or screens, it should be be ensured that sufficient contrast should be maintained to keep legibility in design. The Web Content Accessibility Guidelines (WCAG) set specific guidelines for contrast ratios to be maintained to be legible.

Brand Colours (Light Mode)

Brand Colours (Dark Mode)

Grid System

The grid system was built to standardize and optimize the existing screens and to give structure. Standard practices for web and mobile wasn’t followed while building the grid because of limitations in existing structure and to minimizee structural changes on the screens. A newer version of this app is in progress and is getting all the needed changes.

Atomic Design

The component library was built on Atomic design principles and built as standard lego-like pieces which can be put together to build other components, page-level sections and page templates. These could be used and re-used in different permutations to built other components as and when needed. This component library was built for mobile, desktop and LCD platforms.

Mobile Component Library

The redesign and design system exercise started with the mobile-specific components and style guides since the majority of end users were on mobile platform.

Desktop Component Library

The web specific library was built with common elements from the mobile system such as colour palette but had slightly different component structures because of the subset of features supported on web-based devices.

Connected Devices and LCD Component Library

This was again an offshoot of the mobile design system as the LCD touchscreen on connected devices such as the IQ Portable Energy system had different feature sets and did not support complex interactions (only touch actions) because of screen size and memory limitations. This also had a different colour palette because of the different RGB characteristics of the LCD and native mode is dark mode.

Return on Investement