Widgets Redesign

After running a site audit, we found that many of our widgets would break visually on smaller screen sizes.

Most of our widgets hadn't been touched for a few years and were using outdated styles.

Our widgets needed to be redesigned to accommodate a wide range of use cases.

We also had many people interested in the data sets we had built out over the years.

Among these was our ability to provide rich data about an energy meter from a simple address search.

Understanding the value of personalized data, we sought to add backlinks to our existing widgets as a starting point.

As with most of my projects, I started with mobile first. This ensures that content won't break and makes designing for desktop stupid simple.

With the widgets themselves designed, I now needed to build out the documentation portion.

Our Head of Engineering provided me with the original documentation. It was my job to present it to users in straightforward manner.

Keeping the scope of the project in mind, we were not able to build a UI that would allow our partners to easily customize the widgets they wanted to use.

We instead provided a series of attributes they could adjust to change the data being shown.

To change the styles, our partners would need to recreate the classes we developed and link to their style sheet within the HTML we provided.

As with other projects, I developed styles and documentation for the widgets from within Webflow.

I relied on our developers to wire in the data though.

I coordinated with one of our engineers to ensure that the widgets were behaving correctly both within our own site and externally.

We were able to verify their external use by testing them on our Grid Hacker site, which was hosted entirely separately from EnergyBot.