Responsive Web Application for Energy Engineering Startup

Role: Product Designer, Front-End Developer

Date:  Jan – Oct 2019

Responsive Web Application for Energy Engineering Startup

Role: Product Designer, Front-End Developer

Date:  Jan – Oct 2019

Xendee needed a responsive web application to increase the success rate of their product demos.

Who are the users?

From discussions with the CEO & CTO, I learned that we would be demoing with a wide range of people; this included energy engineers, business leaders, facility managers, and building owners.

Defining Requirements:

ArtboardCreated with Sketch.

Quick and Easy to Complete

Accessible for a wide range of users, both technical & non-technical.

Minimalist Modern Design

Minimalist design that communicates to user their data is safe & secure.

Engaging Interactions

Micro-interactions and animations improve user experience.

Quick and Easy to Complete

Because the backgrounds and technology expertise of our users varied greatly, we needed to create questions that would be universally quick and easy to complete. I achieved this by designing for the lowest common denominator, and through utilization of tooltips, where users can find clarifying information about questions.

Minimalist Modern Design

The energy industry requires a high level of data security, and this was reflected in the software design. I kept the UI minimalist and asked the least number of questions required to conduct a meaningful analysis of the data.

Engaging Interactions

In order to facilitate the quick completion of the questionnaire, I also cross pollinated design ideas from successful form-based applications, like Intuit’s TurboTax. Specifically, I borrowed best practices for information architecture and micro-interactions.

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


The responsive web application has increased the success rate of XENDEE’s product demos. Two of the largest customers yet, Johnson Controls & Shell, signed on after demoing the app.

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.

~1 out of 10 men have color deficient vision

I made sure that our data visualizations were accessible to people with varying degrees of color vision deficiencies, including those with color blindness. By testing different types of data visualizations, I was able to confirm this accessibility.

Testing Color Palette Accessibility (Elijah Meeks, Susie Lu)

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

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.