Product Design & Development for Energy Engineering Startup

Role: Product Designer, Front-End Developer

Date:  April 2019

Product Design & Development for Energy Engineering Startup

Role: Product Designer, Front-End Developer

Date:  April 2019

XENDEE needed a responsive web application to demonstrate the capabilities of their renewable energy planning technology.

Stakeholder Interviewing

From discussions with the CEO & CTO, I learned about our goals and the requirements for the project:

  • Delightful user experience for a wide range of people using the software; this included energy engineers, business leaders, facility managers, and building owners.
  • Provide the user with real insights about the benefits of renewable energy systems for their organization. This won't replace a thorough energy engineering analysis, but it will get a user's feet wet in considering new energy generation sources and designs.
  • Web based software application that is responsive on all devices (smart phone, tablet, desktop). 

Content Design

Because the backgrounds and technology expertise of our target audience varied greatly, we needed a user flow that would be universally quick and easy to complete.

I assured ease of use by limiting the question difficulty. Additionally, I included tooltips, which helped users find clarifying information about questions.

In order to reduce the time required for a user to complete the application, I asked the minimum number of questions required to conduct a meaningful energy analysis.

User Interface Design

The energy industry requires a high level of data security, and this was reflected in the software design. I kept the UI minimalist in order to inspire user confidence and maximize usability.

I used UI design elements from the common front end framework Bootstrap, which helped assure that the user interface would be familiar and intuitive to users.

Interaction Design

In order to facilitate the quick completion of the questionnaire, I utilized micro-interactions and animations. I referenced successful form-based products, such as Intuit’s TurboTax.

Rapid Prototyping

I expedited the product development process by introducing the team to the rapid prototyping and collaboration tool, Axure RP.  I shared early prototypes with the project stakeholders and quickly incorporated their feedback into the product.

This process saved our team many hours of costly software development revisions.


I worked on the software engineering team to code the front-end of the interface, using HTML, CSS, and Javascript. The chief software engineer and senior software engineer did all of the back-end engineering and integration of the energy analysis program. 

App Walkthrough


Two of XENDEE’s largest customers yet, Johnson Controls & Shell, signed on after using this application.

How it works:

  1. User inputs information about their energy use
  2. The application runs an energy optimization program.
  3. A report is generated with recommendations for renewable energy generation & followup information.


XENDEE's data reporting needed to be accessible for users with color deficient vision.

8-10% of men have color deficient vision

I tested the visualizations to make sure they were accessible to people with varying degrees of color vision deficiencies, including those with color blindness.

Testing Color Palette Accessibility (Elijah Meeks, Susie Lu)

Our customers found the new data visualization to be much easier to interpret and preferred the new look.

New Data Visualization

Old Data Visualization

I created a Sankey diagram that depicts XENDEE’s process of designing microgrid energy systems.

Quick Definitions:

A microgrid is a group of interconnected loads and distributed energy resources, within clearly defined electrical boundaries, that acts as a single controllable entity with respect to the grid. A microgrid can connect and disconnect from the grid to enable it to operate in both grid-connected or island-mode (Source: Berkeley Lab).

​Sankey diagrams are a type of flow diagram in which the width of the arrows is proportional to the flow rate (Source: Wikipedia).

Thank you for reading!

Work inquiry, question, or something else?

I'd love to hear from you, so feel free to reach out.