Back to home

Designing a software platform for an early-stage climate startup that's helping well owners improve efficiency, increase profits, and lessen their environmental impact.

Back to home

Designing a software platform for an early-stage climate startup that's helping well owners improve efficiency, increase profits, and lessen their environmental impact.

Back to home

Designing a software platform to help well owners cut costs, improve efficiency, increase profits, and lessen their environmental impact.

"Liam is the best designer I've ever gotten to work with and his contribution to our company was immense! He generated a full set of designs and Figma prototype for the very first version of my early stage startup's web app and I could not be happier. Liam is the dream designer that will deliver the highest quality designs for any stage company, and a great experience along the way."

Nakul Garg

Co-founder and CTO of Resource Monitor

Water management for the future

Project Overview
I worked with Resource Monitor (RM), an early-stage (6 person) climate startup based in Texas and New York, to lead the redesign and expansion of their web application. RM's mission is to connect and manage the world's critical resources, helping individuals and companies develop sustainable relationships with the environment. They're starting by creating software for well owners to track and limit their groundwater usage and maintain ecological balance.

RM's software integrates with water flow meters, processing real-time data and providing actionable insights to help well managers make informed decisions. As the first UX designer, I created a full Figma prototype for a brand new web application that everyday, non-tech-savvy people could quickly navigate and use to gain important information.

resourcemonitor.com
My Role
Lead UX Designer
The Team
1 UX Designer, 1 Product Manager, 2 Developers
Output
Complete responsive Figma prototype for RM's new web app
Key Contributions
Data Visualization, UX Design, Visual/UI Design, Information Architecture, User Research
Timeline
March 2024 - June 2024

Water management for the future

Project Overview
I worked with Resource Monitor (RM), an early-stage (6 person) climate startup based in Texas and New York, to lead the redesign and expansion of their web application. RM's mission is to connect and manage the world's critical resources, helping individuals and companies develop sustainable relationships with the environment. They're starting by creating software for well owners to track and limit their groundwater usage and maintain ecological balance.

RM's software integrates with water flow meters, processing real-time data and providing actionable insights to help well managers make informed decisions. As the first UX designer, I created a full Figma prototype for a brand new web application that everyday, non-tech-savvy people could quickly navigate and use to gain important information.

resourcemonitor.com
My Role
Lead UX Designer
The Team
1 UX Designer, 1 Product Manager, 2 Developers
Key Contributions
Data Visualization, UX Design, Visual/UI Design, Information Architecture, User Research
Timeline
March 2024 - June 2024

Water management for the future

Project Overview
I worked with Resource Monitor (RM), an early-stage (6 person) climate startup based in Texas and New York, to lead the redesign and expansion of their web application. RM's mission is to connect and manage the world's critical resources, helping individuals and companies develop sustainable relationships with the environment. They're starting by creating software for well owners to track and limit their groundwater usage and maintain ecological balance.

RM's software integrates with water flow meters, processing real-time data and providing actionable insights to help well managers make informed decisions. As the first UX designer, I created a full Figma prototype for a brand new web application that everyday, non-tech-savvy people could quickly navigate and use to gain important information.

resourcemonitor.com
My Role
Lead UX Designer
The Team
1 UX Designer, 1 Product Manager, 2 Developers
Key Contributions
Data Visualization, UX Design, Visual/UI Design, Information Architecture, User Research
Timeline
March 2024 - June 2024

Who?

Well owners can be farmers, home owners associations, golf courses, or individual home owners.

When?

Farmers check their meters every day, while other users might only check once per week or month.

Why?

Well owners need to be alerted of flow errors, check that they're within budget of government allocations, view past reports, and analyze future projections.

Empathize

Understanding the User

Before designing RM's platform, it was important for me to learn about the people who would be using the software.

Who?

Well owners can be farmers, home owners associations, golf courses, or individual home owners.

When?

Farmers check their meters every day, while other users might only check once per week or month.

Why?

Well owners need to be alerted of flow errors, check that they're within budget of government allocations, view past reports, and analyze future projections.

Empathize

Understanding the User

Before designing RM's platform, it was important for me to learn about the people who would be using the software.

Who?

Well owners can be farmers, home owners associations, golf courses, or individual home owners.

When?

Farmers check their meters every day, while other users might only check once per week or month.

Why?

Well owners need to be alerted of flow errors, check that they're within budget of government allocations, view past reports, and analyze future projections.

Empathize

Understanding the User

Before designing RM's platform, it was important for me to learn about the people who would be using the software.

Challenge

Most of the people managing wells are unfamiliar with navigating techy dashboards and modern UIs. I needed to create a design that contains all of the complex information that RM wants to show, but is still simple enough for the average well owner to interpret.

Researching the Industry

As someone new to the water well industry, I also needed to understand the mechanical processes of how wells and meters work, and how RM's software intervenes to solve a common problem that people face.
Problem: Most people have to manually check the readings on their wells in order to track their flow and make sure they are within allocation and that there are no leaks.
Solution: A web application that automatically records flow readings and sends updates directly to your phone or computer.

Researching the Industry

As someone new to the water well industry, I also needed to understand the mechanical processes of how wells and meters work, and how RM's software intervenes to solve a common problem that people face.
Problem: Most people have to manually check the readings on their wells in order to track their flow and make sure they are within allocation and that there are no leaks.
Solution: A web application that automatically records flow readings and sends updates directly to your phone or computer.

Researching the Industry

As someone new to the water well industry, I also needed to understand the mechanical processes of how wells and meters work, and how RM's software intervenes to solve a common problem that people face.
Problem: Most people have to manually check the readings on their wells in order to track their flow and make sure they are within allocation and that there are no leaks.
Solution: A web application that automatically records flow readings and sends updates directly to your phone or computer.

Ideate

Design Values and Feature Roadmap

Once I understood RM's users and how it was positioned within the water industry, I set the design values I wanted to commit to. Charting these values helped me determine the features that would be necessary to include in my designs.
Click here to view the full chart.

Site-Mapping

Next, I organized the features I had brainstormed into a site map. I then used a user stories document to check that my map included everything users would need to accomplish every possible task.
Click here to view the user stories document.

Ideate

Design Values and Feature Roadmap

Once I understood RM's users and how it was positioned within the water industry, I set the design values I wanted to commit to. Charting these values helped me determine the features that would be necessary to include in my designs.
Click here to view the full chart.

Site-Mapping

Next, I organized the features I had brainstormed into a site map. I then used a user stories document to check that my map included everything users would need to accomplish every possible task.
Click here to view the user stories document.

Ideate

Design Values and Feature Roadmap

Once I understood RM's users and how it was positioned within the water industry, I set the design values I wanted to commit to. Charting these values helped me determine the features that would be necessary to include in my designs.
Click here to view the full chart.

Site-Mapping

Next, I organized the features I had brainstormed into a site map. I then used a user stories document to check that my map included everything users would need to accomplish every possible task.
Click here to view the user stories document.

Create

Low/Mid-Fidelity Wireframes

With everything mapped out, it was time to create low and mid-fidelity prototypes. I studied how financial dashboards like Stripe and energy companies like Enphase visualize their data and organize their sites. This provided a template for me to iterate on for RM's specific dashboard.
I knew I wanted to condense all of the most important information into a small card for people to view at a glance when they open up the web app.
I next focused on sketching out the most important graphs: total water production vs. government allotted allocation, daily production, and daily production vs. weather.
I then finished up the prototype by designing an alerts page, settings page, and installation flow.

Create

Low/Mid-Fidelity Wireframes

With everything mapped out, it was time to create low and mid-fidelity prototypes. I studied how financial dashboards like Stripe and energy companies like Enphase visualize their data and organize their sites. This provided a template for me to iterate on for RM's specific dashboard.
I knew I wanted to condense all of the most important information into a small card for people to view at a glance when they open up the web app.
I next focused on sketching out the most important graphs: total water production vs. government allotted allocation, daily production, and daily production vs. weather.
I then finished up the prototype by designing an alerts page, settings page, and installation flow.

Create

Low/Mid-Fidelity Wireframes

With everything mapped out, it was time to create low and mid-fidelity prototypes. I studied how financial dashboards like Stripe and energy companies like Enphase visualize their data and organize their sites. This provided a template for me to iterate on for RM's specific dashboard.
I knew I wanted to condense all of the most important information into a small card for people to view at a glance when they open up the web app.
I next focused on sketching out the most important graphs: total water production vs. government allotted allocation, daily production, and daily production vs. weather.
I then finished up the prototype by designing an alerts page, settings page, and installation flow.

Verify

Testing

Once the prototype was prepared, I tested it by having our "well guys" (people who install well meters) in Texas click through the design and try to accomplish different tasks.
We came away with a few main findings:
  • The installation flow needed to consider how both well installers and users would interact with the app.
  • The well guys weren't sold on the display order of the graphs, and had notes about how the data should be displayed.
  • The alerts page needed to be more explicit about what was editable and what was not.
  • Overall, they considered the designs an enormous upgrade on anything that existed so far in the industry.

Verify

Testing

Once the prototype was prepared, I tested it by having our "well guys" (people who install well meters) in Texas click through the design and try to accomplish different tasks.
We came away with a few main findings:
  • The installation flow needed to consider how both well installers and users would interact with the app.
  • The well guys weren't sold on the display order of the graphs, and had notes about how the data should be displayed.
  • The alerts page needed to be more explicit about what was editable and what was not.
  • Overall, they considered the designs an enormous upgrade on anything that existed so far in the industry.

Verify

Testing

Once the prototype was prepared, I tested it by having our "well guys" (people who install well meters) in Texas click through the design and try to accomplish different tasks.
We came away with a few main findings:
  • The installation flow needed to consider how both well installers and users would interact with the app.
  • The well guys weren't sold on the display order of the graphs, and had notes about how the data should be displayed.
  • The alerts page needed to be more explicit about what was editable and what was not.
  • Overall, they considered the designs an enormous upgrade on anything that existed so far in the industry.

Prototyping

Branding

With the notes from testing in mind, I made several changes as I moved on to creating high-fidelity designs.
First, I established a branding kit for Resource Monitor. While they already had a basic list of logos and colors, I suggested adjustments to the typography and developed standardized buttons and components to fill out the design library.(with help from shadcn/ui)
Typography

Open Sans Bold

Aa123

Open Sans

Aa123

Colors

Data Visualization

I then set to work refining the main graphs on the dashboard, implementing new features to allow users to customize what they see (eg. overflow alerts or suggested usage statistics) as well as to hover for more detailed information.

Time Selector

Next, I designed the time selector tool to show how users would navigate to different time ranges on the dashboard, whether by using preset date ranges or setting a custom range with the calendar widget. I also created a "click-in" feature where users can click on a "month" bar to navigate to that time frame.

Reports, Alerts, and Settings

Finally, I designed the remaining sections of the web app: a search-functional reports page, a customizable alerts tab, and a comprehensive settings submenu.
The final design was responsive to desktop, mobile and tablet. After another round of testing, it was time to hand off to the developer team to bring the designs to life.

Prototyping

Branding

With the notes from testing in mind, I made several changes as I moved on to creating high-fidelity designs.
First, I established a branding kit for Resource Monitor. While they already had a basic list of logos and colors, I suggested adjustments to the typography and developed standardized buttons and components to fill out the design library.(with help from shadcn/ui)
Typography

Open Sans Bold

Aa123

Open Sans

Aa123

Colors

Data Visualization

I then set to work refining the main graphs on the dashboard, implementing new features to allow users to customize what they see (eg. overflow alerts or suggested usage statistics) as well as to hover for more detailed information.

Time Selector

Next, I designed the time selector tool to show how users would navigate to different time ranges on the dashboard, whether by using preset date ranges or setting a custom range with the calendar widget. I also created a "click-in" feature where users can click on a "month" bar to navigate to that time frame.

Reports, Alerts, and Settings

Finally, I designed the remaining sections of the web app: a search-functional reports page, a customizable alerts tab, and a comprehensive settings submenu.
The final design was responsive to desktop, mobile and tablet. After another round of testing, it was time to hand off to the developer team to bring the designs to life.

Prototyping

Branding

With the notes from testing in mind, I made several changes as I moved on to creating high-fidelity designs.
First, I established a branding kit for Resource Monitor. While they already had a basic list of logos and colors, I suggested adjustments to the typography and developed standardized buttons and components to fill out the design library.(with help from shadcn/ui)
Typography

Open Sans Bold

Aa123

Open Sans

Aa123

Colors

Data Visualization

I then set to work refining the main graphs on the dashboard, implementing new features to allow users to customize what they see (eg. overflow alerts or suggested usage statistics) as well as to hover for more detailed information.

Time Selector

Next, I designed the time selector tool to show how users would navigate to different time ranges on the dashboard, whether by using preset date ranges or setting a custom range with the calendar widget. I also created a "click-in" feature where users can click on a "month" bar to navigate to that time frame.

Reports, Alerts, and Settings

Finally, I designed the remaining sections of the web app: a search-functional reports page, a customizable alerts tab, and a comprehensive settings submenu.
The final design was responsive to desktop, mobile and tablet. After another round of testing, it was time to hand off to the developer team to bring the designs to life.

Takeaways

If you understand your user, they'll understand your product.

It's often easiest to start by designing what I think is the best solution to the problem. But this strategy leads to creating designs that I think are simple, but could be confusing to my actual users. Working with RM, I talked with the well installers who would be using the web app and learned about how they think and interact with well data. This helped me redefine my idea of what good design would look like for this specific project. By meeting the user where they were, I was able to create a design that looks good, but most importantly is functional for the people using it.

Don't reinvent the wheel.

Every good design builds upon decades of successful designs that come before it. To create RM's app, I studied dashboard designs from other companies and adjusted an established design library to RM's brand guidelines, rather than starting from scratch.

Build fast and iterate.

Working with a small startup to design their primary product, it was tempting to get into the weeds of design details to try to make every component perfect. However, with fast turnarounds and a small labor force - not to mention being a newcomer to the well industry - it was far more effective for me to create designs quickly and allow the rest of the team to give feedback, then make iterations based on their notes. Instead of wasting time creating perfect designs that weren't useful to our primary clientele, this process allowed me to steadily improve the fidelity and functionality of the designs while making adjustments based on user feedback.

Takeaways

If you understand your user, they'll understand your product.

It's often easiest to start by designing what I think is the best solution to the problem. But this strategy leads to creating designs that I think are simple, but could be confusing to my actual users. Working with RM, I talked with the well installers who would be using the web app and learned about how they think and interact with well data. This helped me redefine my idea of what good design would look like for this specific project. By meeting the user where they were, I was able to create a design that looks good, but most importantly is functional for the people using it.

Don't reinvent the wheel.

Every good design builds upon decades of successful designs that come before it. To create RM's app, I studied dashboard designs from other companies and adjusted an established design library to RM's brand guidelines, rather than starting from scratch.

Build fast and iterate.

Working with a small startup to design their primary product, it was tempting to get into the weeds of design details to try to make every component perfect. However, with fast turnarounds and a small labor force - not to mention being a newcomer to the well industry - it was far more effective for me to create designs quickly and allow the rest of the team to give feedback, then make iterations based on their notes. Instead of wasting time creating perfect designs that weren't useful to our primary clientele, this process allowed me to steadily improve the fidelity and functionality of the designs while making adjustments based on user feedback.

Takeaways

If you understand your user, they'll understand your product.

It's often easiest to start by designing what I think is the best solution to the problem. But this strategy leads to creating designs that I think are simple, but could be confusing to my actual users. Working with RM, I talked with the well installers who would be using the web app and learned about how they think and interact with well data. This helped me redefine my idea of what good design would look like for this specific project. By meeting the user where they were, I was able to create a design that looks good, but most importantly is functional for the people using it.

Don't reinvent the wheel.

Every good design builds upon decades of successful designs that come before it. To create RM's app, I studied dashboard designs from other companies and adjusted an established design library to RM's brand guidelines, rather than starting from scratch.

Build fast and iterate.

Working with a small startup to design their primary product, it was tempting to get into the weeds of design details to try to make every component perfect. However, with fast turnarounds and a small labor force - not to mention being a newcomer to the well industry - it was far more effective for me to create designs quickly and allow the rest of the team to give feedback, then make iterations based on their notes. Instead of wasting time creating perfect designs that weren't useful to our primary clientele, this process allowed me to steadily improve the fidelity and functionality of the designs while making adjustments based on user feedback.

Here's what Resource Monitor thought:

"Liam is the best designer I've ever gotten to work with and his contribution to our company was immense! He generated a full set of designs and Figma prototype for the very first version of my early stage startup's web app and I could not be happier. He is customer-focused, mission-oriented, hard-working, collaborative, and iterative. Liam set clear milestones to start the project (which he hit) and perfectly scheduled feedback sessions along the way to ensure everyone was thrilled with the designs, and we were! He is also very open-minded and seamlessly worked with the ShadCN component library when I asked if he'd do so. Liam is the dream designer that will deliver the highest quality designs for any stage company, and a great experience along the way."

Nakul Garg

Co-founder and CTO of Resource Monitor