Mobile UX Design Case Study: How We Built An MVP For Wattler

UX studio has got an opportunity to work on the Wattler Android app, which aims to increase personal energy consumption monitoring. Closely following gas and electricity usage not only shows the money spent but also raises awareness of the lifestyle we lead. Prioritize sustainability; this vision drove the intensive month and a half we spent on working with the Wattler team.

Mobile UX Design 101: Finding personas

In a short time frame like this, we needed to think about the multiple functionalities of every basic exploration method.

A hypothetical persona workshop started us off, not just to introduce the client’s possible target audience but also to get familiar with the problem. Then came our clients’ perspective on a successful product.

We also got directions for the upcoming interviews and user tests which we could schedule in our time frame.

Does anyone actually monitor their energy consumption? This question actually challenged us not only from the perspective of recruiting interview subjects but also from that of future user acquisition.

From the four interviews we conducted, we got insights into:

  • Validating personas
  • Which consumption monitoring applications people use (competitors)
  • What motivates people to do so.

We discovered two kinds of personas: those who keep track of their consumption (yes, some conscientious people do!) and those who need awareness education.

Finding the right design

Brand persona workshop

This workshop provided even more domain knowledge indirectly and a view of our clients’ visual and stylistic preferences.

We used Aaron Walter’s template and could set up basic design principles that helped with the process and tone.

We defined the two most important values in building a product as:

  • Informative simplicity
  • Reliability

These general values also clarified that the MVP won’t involve just illustrations and funny empty states.

Considering the short time frame, we could have reasonably chosen to fully follow material design guidelines during the design process.

However, the fallback of creating an MVP app that looks exactly like everything else in the store would have deprived the product of memorability.

Instead of using Roboto, we chose Open Sans to give a special touch to the interface, which had inherited its purple main color from the company logo.

mobile ux design


The scope of Wattler requirements comprised the following:

  • Easy to scan and save meter with the least user effort
  • Store and visualize data
  • (+1) Filter data based on location

Scanning the meter with ease

As we ideated about the app’s different navigation possibilities, we tried to keep the two kinds of personas in mind: the power user who visits the app daily to scan the meter and analyze the diagrams, and those who only record their meter monthly or because they need to report it anyway.

The dashboard had to reflect these two types of attitudes immediately.

mobile ux design

Therefore, we designed the scanning functionality to remain within reach, and of course we could easily implement the material fab icon as a solution.

mobile ux design

Data visualization

Visualizing data makes up a separate profession by no accident, so the task was challenging, especially from a mobile UX perspective. We needed to keep things simple to make it comprehensible at first sight.

Aiming to open up toward those not used to analyzing graphs and diagrams, we went with the simple approach.

We took examples of well-known apps that also handle data so we could provide familiar looks and logic.

The touch points where we needed diagrams comprised the following:

mobile ux design

(a) Entering the dashboard, a graph of the general electricity and gas usage trend appears immediately;

(b) The two semi pie-charts on the top help predict the current month’s data based on consumption to date;

(c) It checks electricity and gas consumption for individual locations as well. For multiple properties, filter for each and easily change between months and time intervals

(d) It also checks daily averages.

Growth opportunities for the app

Wattler provides an intermediate solution between the status quo and a smart home. As a practical solution, it raises awareness about sustainability.

Data will allow it to improve in several directions.

From tendency analysis to providing weather and location-based predictions about consumption, opportunities abound.

Then comes the potential value behind building a community and going sustainable together: gamifying the entire educative process (eg.: “You saved three trees” etc) and translating it into tangible achievements could become the vision of a movement.

But much need doing until then.

Download Wattler from the Google Play Store and start monitoring your electricity and gas consumption 🙂

Do you have any experience in mobile UX design? Have you ever worked on designing a mobile app? Let us know in the comments!

Take the next step to improve your website’s UX

UX studio has successfully handled 250+ collaborations with clients worldwide.

Is there anything we can do for you at this moment? Get in touch with us, and let’s discuss your current challenges.

Our experts would be happy to assist with the UX strategy, product and user research, UX/UI design.


Katica Babarczi

Superempathetic designer with a strategic mindset. Designing accessible products is my ongoing mission in my digital product design journey.

Improve user experience in your product

Download our Guide
The Product managers' guide to UX design