top of page
HARMONY 2.0

How might we help water utilities better manage, analyze and report meter data and water usage?

RESEARCH / INTERACTION DESIGN

The clients

Harmony MDM by MasterMeter Inc is an enterprise level meter data management software that helps utilities manage, analyze and report water usage. 

The problem

Over the years as Harmony evolved, it became a pile of features and functionalities that did not necessarily align with user needs. As a result, fundamental usability was an every day struggle and new users had to depend on MasterMeter’s support team for explanation of basic features.

Our goal was to remove irrelevant functionalities, inconsistencies and redesign the software keeping user intentions at the heart of our process.

My role

I was part of the redesign project to make Harmony user-friendly, intuitive and smart. The UX team consisted of 3 people and we closely collaborated with stakeholders and developers during the entire project duration.

I worked alongside the researcher to get valuable insights from users and create wireframes and prototypes which were then passed on to the visual designer. 

PROJECT DURATION:

5 months

PLATFORM:

Web

TOOLS:

Paper & Pen, Whiteboard, Post-it Notes, Sketch

Dashboard-browser.png
RESEARCH

The existing product

Before jumping in to talk to users, I examined the entire product—with an eye for pain points. A thorough site and content audit performed by me revealed many usability and UI problems. On a high-level, the software had major issues with: 

Navigation:

  • No breadcrumb or any navigational aid

  • No back button

  • Commonly used functions were hidden under 5-6 clicks


UI:

  • Misleading field box designs (text box looked like a dropdown)


Copy:

  • Scary and obscure error messages

  • Inconsistent field names

 

We realized most of these were quick fixes, but would improve the product significantly. 

User Insights

Talking to users was the key. It was crucial we understand how they use the existing product, their goals, and frustrations. But before talking to end-users, we decided to talk to all stakeholders and understand their business goals and vision for the product. 

 

We soon realized that Harmony’s support team was the most familiar with users and we consulted them all along the project. 

4

stakeholder interviews

6

support team interviews

8

user interviews

4

office visits

User personas

Based on user interviews, I created user personas for a typical billing clerk and customer service representative to summarize user pain points and focus my design efforts. 

The goal of billing clerks is to send out accurate bills to customers on time, whereas customer service representatives want to spend less time on the phone with customers.

user persona
user persona
IDEATION

Focus area

Digging into the data revealed some very consistent intentions and pain-points. We learned that users only have four intentions when they log on to Harmony, irrespective of their role. This was perhaps the biggest and most important insight. They may have multiple ways of accomplishing their tasks, but the intentions remained the same.

The system that once seemed convoluted of features slowly started making sense to us. Based on this, we identified and prioritized the areas where we should focus our efforts:

  • Redesign around key customer intentions

  • Simplify the information architecture

  • Minimize options for a shorter user flow

  • Progressively reveal advance features

  • Provide useful error messages

Initial wireframes and prototype

Once we knew and understood user intentions, the following outcome was top-level navigation. Based on user tests we conducted later, this navigation was well understood and fit nicely with their workflow.

Next, I started creating wireframes at a high-level, adding more details and screens over time. I would present the wireframes to the team every week and iterate based on their feedback. 

Following this, I created a prototype in Sketch in order to test the designs.

Dashboard
Import meter data
Alerts overview
Alert analysis
Customer details
Reports

User testing

We tested the prototype by asking users to complete some of their day-to-day tasks This made sure we got feedback on various different pages and workflows. Below is a selection of user feedback we received that led to design changes.

6

users

13

screens tested
Alert analysis
  • Users felt seeing all alerts at once was overwhelming

  • "Is it possible to go to the Customer details page from here?"

  • Because users have various ways of handling alerts, it was challenging to design a flow that can accommodate different user types. We brainstormed to understand one particularly challenging question - should the users be able to handle one alert or multiple and when?

4-Alert Details-min.png
  • Users were constantly confused by this Alert Analysis page, since it was new to them. They thought of it as the Customer details page

  • Users expected to see when the alert was triggered and for how long has it been active in ‘Handling History’

6-Customer Details-min.png
  • Users took time to locate certain important details

Solution

After various iterations based on internal and external feedback, I designed the final screens as seen below. These were then passed over to the UI designers.

Dashboard
Alerts
Reports
Customer details
Import meter data

Next steps

All the wireframes designed in this phase have been based on thorough research. However, because of the diversity in user base, we have recommended that another round of usability tests should be conducted after visual designs are ready.

The solution here is based on how users use the software today. In order to survive in the competitive market and to keep up with the technology available, next phase of the project should focus on using data analytics to make Harmony smarter and way ahead of its users.

CONCLUSION

Outcome

After various rounds of interviews and testing, we were able to re-design the software to make it intuitive and user-friendly. Users were able to accomplish the same tasks in fewer clicks. Also, the new designs accommodated their need to see all relevant information on one screen and this made their jobs way easier. 

The most challenging component of this project was understanding how users deal with alerts and accommodating the various approaches to alerts in the designs. Brainstorming with the team and thinking through each step was crucial to come up with a solution.

Besides, this project helped me improve my design skills as I had to work with tons of content and make sure it fits on the screen.

bottom of page