H Logo

An app helping homeowners ditch fossil fuels

Gridly / Home Energy Improvement App

Gridly is web app that helps homeowners in New England breakup with fossil fuels. Folks enter their address, answer a few questions, and receive a “Action Plan" for their homze. The Action Plan is a series of projects designed to reduce the home's carbon footprint. And projects in the plan vary in scope from appliance replacement to complete solar transition.

Gridly has an unique brand perspective and market fit. Lot's of companies are offering solutions for each category, but no one is pulling them all together. The idea presented a big design challenge: how do we combine disparate experiences into a unified flow? And how do we avoid overwhelming the user? To select projects for the Action Plan, Gridly needs a lot of information. Our goal was to leverage oodles of property data and prevent folks from answering lots of technical questions. Visitors need to only confirm information, which gets them to project recommendations faster.
Project Type / Agency

Responsive Web App / The Gnar Company


I helped sell the project, led discovery workshops and user interviews, collaborated with a Product Manager and the engineering team at The Gnar, collaborated with a marketing agency and copywriter, designed the app, and worked directly with Gridly founders.

Design Activities
  • User Journey Mapping
  • Digital Strategy
  • Wireframes Prototyping
  • Visual Design
  • Design System
  • UX Copywriting
Desktop and mobile screens of the Gridly Action Plan page.
Questions & Challenges
Desktop and mobile view of the address entry page.

We made the app faster to use by pulling home data.

The landing page of the application was simple by design, and the aim was to grab folks attention immediately, reinforce the messaging that got them there, and ask the question that drives a lot of the backend: “what's your address?”.

Address entry is fast through the validation and type-assist work of the Google Maps API. Ideally, folks would only have to enter a couple of keystrokes to find their home.

The mantra of the entire product team: “the least amount of user entry, the better.”

Desktop screenshots showing the home data entry process

We organized and chunked information to make onboarding faster.

In order for a visitor to see their custom Action Plan, they must provide a bit more home information. We designed a series of three screens with a logical, linear flow. Behind the scenes, data sources provide most of the answers. Visitors don't have to type everything line by line; they just review and confirm the info's right.

Because we knew email entry would be a roadblock for some folks, we designed content areas to specifically test savings and incentive messages to keep visitors moving forward.

Mobile views of the user onboarding process.
A collection of screens showing the project detail pages.

We got wicked good feedback from home owners, kid.

In the Action Plan, there are lots of home projects aimed at achieving 100% renewable home energy. Projects vary from large to small, and each have their own Detail Pages. The PDPs explain in plain talk the benefits and savings, as well as the home owner's investment.

Most of the projects are crazy complex. So we sliced up the benefit/savings content and the additional user-entry questions. And used Progressive Disclosure methods to feed visitors small, quick bites. (Here comes the airplane!)

We validated hierarchy and savings content with a small group of home owners in Boston. Frequent feedback helped us strike a good balance between education, information-gathering, and sales pitch.

Users can easily compare home projects.

We created shopping tools to simplify big decisions.

We designed a way to compare similar projects that's fast to use and easy to skim. One of Gridly's value propositions is acting kind of like an energy sherpa. (Someone who's done it all and is here to help you get to the peak.) We spent lots of time validating project summaries and ordering of benefit chunks.

A collection of screens showing the wireframe prototype.

Quick prototypes helped us talk to users and engineers more frequently.

Producing high-fidelity wireframes allowed us to get faster input, which ultimately sped up the overall project and led to a better app. And because much of the experience relied on home data APIs, we worked with the engineering team from the start of the project to understand what's possible.

A handful of artifacts from the project.

Formalizing and maintaining artifacts kept everyone on the same page.

Throughout the project, we created several user journey flows, diagrams, and documentation. They helped more ideas forward and acted as the single point of truth for Gridly, design, product, engineering, and marketing.

Examples of the custom UI kit that was created.

We designed and tuned a custom UI Kit for max speed.

Since a lot of the screens and flows went through many iterations, it was important to maintain an accurate and small library of design components. Limiting the number of one-off styles sped up dev time. And each element was constantly tweaked and re-factored anytime a major section was added or changed.

Let's talk.

Copyright 2023 Joshua Hathaway - Handmade in Austin, Texas - Eleventy, Sass, Nunjucks, HTML, and good ol vanilla Javascript