A Design System for OpenSolar
Client:
Solar Installers and Sales Professionals
My role:
Research
High fidelity screens
Implementation
Overview
<span data-metadata="" style="font-style: normal; font-variant-caps: normal; white-space: normal;"><span data-buffer="" style="font-style: normal; font-variant-caps: normal; white-space: normal;">OpenSolar’s Vision, to create a world powered by sunshine, is underpinned by a strategy to build the best App for Solar Professionals.
User interface plays a key role towards the App’s success by contributing to both the functionality and ease-of-use of the App by Professionals. It also serves towards aligning OpenSolar’s products under a single and recognisable identity.
As a typical tech start-up, the OpenSolar App grew at a fast pace, adding features in an accelerated agile environment. This resulted in the development team creating designs and solutions that, while highly functional, lacked a coherent and universal user interface. The design styles were varied and inconsistent, impacting the user experience of our clients.
An audit of the OpenSolar App revealed at least 17 unique styles of button or clickable Call-to-Action components
The Solution
As UX Lead at OpenSolar, one of my key responsibilities was the creation, upkeep and implementation of a unified Design System. The task involved a careful audit of each discrete component type, beginning with 'atomic' elements such as icons, and foundational features such as colours and font type. This lead to reviewing and re-thinking 'molecular' components such as buttons, menus, notifications etc, and finally larger structures such as layouts and spacing on both desktop and mobile screens. We also audited for WCAG considerations which let to the discovery and remediation of numerous non compliant UI instances, such as insufficient colour contrast and illegibly small font sizes.
The objective was consistency, simplicity and clarity, while respecting decisions made in the original build and avoiding a complete overhaul. The final document became the 'source of truth' for user interfaces and user experiences at OpenSolar. Examples of the final screens are shown below:
