Back to Work.
sketches

Design System for Renewable Energy

Project Overview

Design system, user interface design solutions for a microgrid simulation company

2017-2018

Role

  1. Branding & identity
  2. Logo creation
  3. Design system
  4. Prototype design for Powering Health
  5. Crisp and consistent iconography

The Background

As a microgrid modeling software with a global presence, HOMER Energy needed a refreshed look and feel that captured the essence of their brand. With over 150,000 users in 193 countries, HOMER is the established global leader for microgrid design optimization. I developed a comprehensive and scalable design system which can be applied to their marketing efforts as well as user interfaces.

Goals

The redesign included a complete refresh of the look and feel of the brand as well as the application of the design system to HOMER Energy's products.

  1. Rebrand HOMER Energy's identity to resonate with users
  2. Create a system that can scale to future products
  3. Establish a unified design system for print, web and mobile
  4. Develop a design system for their user interface design

The Approach

I initially approached the re-design by first creating the logo and branding and identity. Once the brand identity was defined, I created a user interface style guide and applied the system to HOMER Energy's Powering Health product.

Brand Attributes

This brand framework explores HOMER Energy's look and feel, including color, typography, logo, and identity concepts. The logo combines the core brand attributes as well as the energy and enthusiasm of the brand to create a consistent identity. The mark aims to be flexible in its layout and adaptable across print, web and mobile as well as scale for multiple screen sizes.

HOMER style

Process & Sketching

Early logo explorations took inspiration from objects with circular movement, adding energy and depth to the mark. The mark explored concepts which evoked a familiarity with the renewable energy space, but also had a refreshed and modern look. During the sketching phase, I typically aim for about 100 ideas. These quick and simple sketches helped expand the realm of possible shapes to apply to the brand mark.

sketches sketches

Design System

I aimed to create a comprehensive brand system that projected a trustworthy and professional appeal while still seeming friendly and approachable. We wanted to set HOMER Energy apart from other companies in the same space by creating a strong mark, energized but appropriate color palette and a flexible type treatment. The entire system is minimalist and adaptable for future product or feature development.

The mark combines crisp and consistent diagonal lines with curved edges for balance, and to infuse the mark with movement. Shadows and depth add complexity and contrast to the design.

template

Iterations on the Logo Concept

I created several rounds of logo concepts targeted at the central themes of energy, movement and renewable resources. Explorations in color and form were key to arriving at the final mark.

homer early template template

The final mark used slight adjustments to the typeface allowed for visual distinction between the letter-forms.

template
Variations in letter-form arc of the stems
template
HOMER Energy product logo variations
template
HOMER Energy product logos

Developing a Palette

Iterations on the color palette use muted tones with more darker colors. The spectrum uses a high-contrast palette, with color options for user interface actions (warning, success, error or neutral messages). Each palette option uses blue as the central color, which could be used for headers, backgrounds and click-able actions.

color final
color final
color final
color final
color final
color final

Versatile Typography

With the color palette and mark defined, we could continue refining the brand identity. We chose the typeface Lato, for its versatility and strength. As a newer typeface family (released in 2010), its stylistic direction is familiar, professional but not necessarily following a particular trend.

mocks

Design System In Use

One the system was defined, I applied the identity to the Powering Health product, a health clinic power design system. This tools allows users to simulate power systems for rural health clinics by inputting data about their site, users can discover the solution with the lowest lifecycle cost.The versatility of the design system allowed for complex data visualization as well as charts and tables.

template template

Read more about this project in my Powering Health Case Study

Get in touch.