Qurrent case study

After having moved in to my own place about a year ago, I got a smart meter installed in my apartment. Sure, its nice to see at any given moment how much electricity and gas you are using. I was just more excited to finally be able to see the product and analyze it as a UX designer. I logged in to the dashboard of my provider (Qurrent) and started looking around. I did this over the course of a few weeks to be able to see and understand what was happening over time. And it left me with a bunch of questions about the usability and I wondered why some choices were made. On top of that, I had seen the Current website update in terms of UI over time, but it felt like the “Mijn Qurrent” (dashboard) section was left behind… I think I can come up with a more user friendly and more desirable product, let’s try!

Self initiated
Miro, Sketch, Invision Studio
Research, UX Design, UI Design, micro-interactions

The process

Google Play Store reviews for the Qurrent app

After spending some time on the platform myself, I was curious to see what other users thought. I went to the Apple App Store and Google Play Store and I was surprised to see such negative comments and reviews. I had the feeling the platform could use an update, but didn’t realise all the user struggles. The app had a 2,6 out of 5 rating and most of the complaints are related to logging in and data not being displayed. Other than technical related complaints, which caused a lot of frustration, I found out that users didn’t think the most valuable data was shown (which I experienced as a user as well). Check out the Exercise Canvas I used below!

Exercise canvas - built in Miro

Exercise canvas

Goal of the exercise
What are the challenges you are trying to overcome?
I want to create a cleaner, clearer dashboard experience for Qurrent customers with a smart meter in their homes. The information currently displayed seems to not be the most valuable to users. The main challenge is going to be data visualisation.

What is the ultimate purpose of the exercise?
The purpose for me as a designer is to work on data visualisation. I want to see what I can do with very little insights but yet trying to design a more informative and simple experience for Qurrent customers.

Problem Statement
What problem are you solving?
The current product looks outdated, has a lot of technical issues (unable to log in and data not being shown) and is not showing the most relevant data. It is not very easy to navigate and especially the native app needs a cleaner layout.

Data & assumptions
What are the biggest assumptions you’re making based on what you know, and what you don’t know about the user, the business and the technology?
As this is a self initiated project and other than being a customer, I have nothing to do with Qurrent, I am making a fair share of assumptions. Though I am able to collect user feedback from their online community and from the Google Play Store and App Store.

After finishing up a number of screen, I plan to test it with users to collect feedback and to improve on it further.

In terms of business and tech, I have no insights. A lot of user feedback comes from the technology side: users not being able to log in and data not being shown. These are not the areas I am focussing on as I have no insights and capability to solve these issues.

How would you validate them?
I know there are some assumptions that I will not be able to validate without getting in touch with the company and its design department. What I can do is test my prototype with users and gather feedback and use user feedback from their online community and from the Google Play Store and App Store.

User persona
Which user group are you considering?
I am targeting a group similar to myself (though I fully understand I am not the user): tech savvy Qurrent customers using a smart meter in their homes. These users knows what the technology is capable of and want to have a quick and easy way to access their personalised data. What they mostly care about it whether they are using up more electricity and gas than they’re paying for with their monthly deposit.

What motivates them?
Being in control of their own finances and not willing to wait for a surprise when their annual settlement bill is coming.

What is getting in the middle of them and them achieving their goals?
Currently they do not have the option to have these clear insights up front. But based on selecting the right data points, this doesn’t have to be this way. The upfront deposit is available as a data point (as you can update this in your account) and also your usage is available for users with a smart meter.

What are their goals and frustrations?
Goals: being in control of their finances and being able to plan ahead as accurate as possible. Frustrations: Not knowing what the annual settlement bills will bring.

Who is your primary persona?
My primary persona is Maarten. He is an environmentally conscious person who cares a great deal about what he can do as an individual to make this planet a better place to live in. In his search for the greenest electricity supplier, he came across Qurrent and decided to become a customer. Money is not so much an issue for him that he needs to find the cheapest supplier, but after his decision to go with the greenest supplier, he does want to be in control of his spendings with Qurrent. He does not want to get caught by surprise at the end of the year with a bill because he didn’t pay a big enough deposit.

His usage compared to other households in the Netherlands is less relevant to him. He is conscious and very aware of his own usage in his house. He is also aware that there are many variables that play a role in these numbers and is sceptical of the accuracy of these graphs that are currently available to him in the Current dashboard.

Maarten is also intrigued by wind credit. Qurrent gave him some for free after he signed up and he is wondering if it would pay off if he would get more wind credit.

User journey
What is the goal of your persona?
Maarten wants to be on top of his electricity and gas usage compared to his deposit. Having quick and visual insights of his usage and a notification system that keeps him on track would help Maarten to achieve his goal. He also expects the algorithm to learn and understand his energy consumption behaviour. Maarten works full-time and is often out and about with friends. On weekdays he is home in the evenings and needs to charge all his devices, finish up some work and watches TV or plays some records. He likes to cook so he spends quite some time in the kitchen on the evenings that he is home. Maarten needs his data to learn and be able to accurately predict his usage versus his spending.

What are the touchpoint with your product?
Maarten keeps an eye out in the Current app to monitor his spendings. If his deposit is too far off from his actual usage, he logs in to his account on his laptop and updates the amount of his deposit. Since he cares about he environment he prefers to not receive any physical mail from Qurrent but rather has a digital version of his monthly bills in the app. If, at the end of the year, he needs to pay a little bit extra, he would preferably do that right in the app.

What design opportunities can you identify?
➙ Graphs that display deposit vs. usage, accurately, based on his lifestyle
➙ Have all his bills in the app so there is no need for paper bills sent through mail or emails.
➙ Notifications to make Maarten aware if his usage is above or below his average
➙ Being able to settle bills right in the app
➙ Update deposit amount
➙ Advice on the benefits on buying wind credit based on his usage

What are the main functionalities selected?
➙ Graphs that display deposit vs. usage, accurately, based on his lifestyle
➙ Have all his bills in the app so there is no need for paper bills sent through mail or emails.
➙ Notifications to make Maarten aware if his usage is above or below his average

Visual/UI Design

I started off with designing the Dashboard page to see what I could do with the style of the product. Choosing the dashboard page made sense to me since all the other pages were going to be data heavy or list heavy. I felt this page would give me the most freedom in terms of setting a mood and style. This also gave me the opportunity to work on the secondary color and see it applied to the design.

Using Stark for color contrast checking, trying to comply to AA standards for accessibility.

Once I had the dashboard page down, it was time to dive deeper in to why I wanted to do this project in the first place: data visualisation. Looking at the desktop version of Qurrent, I had a ton of questions and I really wondered why they designed it the way they did (spoiler alert: after a lot of exploration I came to the conclusion it wasn’t a bad solution at all!).

Luckily, a lot has been written about data visualisation. After reading a bunch of articles on the subject, I found this, this and this article most useful and it guided me in the right direction. While reading, I started testing some solutions on my designs. The main issue I found it displaying exact values on the graph, especially when users have Windtegoed (wind credit, which is deducted from they usage) turned on and are looking at a 12 month overview. In order to keep the graph clean I decided to put usage and wind credit in to one bar and add a draggable line over the graph that would enable the users to see exact values.

Various options for a draggable value indicator. User testing showed the first (left) option did the trick. It does require more indicators in case of wind credit.

After tackling the hardest design problems, I built the rest of the screens while building and maintaining a tiny design system and component library. See some of the screens below:

...to be continued

I will be working on the micro-interactions and testing the product more. Also, while working on this, Qurrent and Greenchoice merged, taking the Greenchoice branding. Because I have all color and text styles and nested components properly set up, it would be a matter of minutes to rebrand the entire app 🤓#worksmart

[Of course I have no idea about the restrictions, limitations and resources the designers and developers of the platform had. Disclaimer: my version of this product is just an attempt to understand and practice data visualisation better. No judgement.]