Grønn Kontakt

App Redesign - Hobby UX Case Study

Published summer 2020

In this post I showcase the design process I went through when redesigning Grønn Kontakt’s current EV charging app as a hobby project. From my own assumptions, talking to real users and brainstorming ideas, to creating simple sketches, Lo-Fi wireframes, and parts of the Hi-Fi prototype. This project came about when I was out charging my parents’ Nissan Leaf at one of Grønn Kontakt’s charging locations, and just thought that the app deserves a thorough redesign.

Grønn Kontakt is a Norwegian EV charging network, it offers charging solutions along the roads all across Norway and has recently started expanding into Sweden as well. They also offer options for charging at your workplace, at parking facilities and condominiums. They also state on their website that a home-charging solution is coming soon.

At the start of 2020 Grønn Kontakt had about 529 rapid and fast chargers all across Norway, making it possible for EVs to fill up quick and continue their journey pretty much wherever they wish to go.

The charging infrastructure is only going to keep on growing, and that is thanks to the continuous adoption of EVs in Norway. As of May 2020, there are 297,019 EVs registered in Norway, and that number is growing quickly.

With great demand for chargers, comes great demand for a friendly and stressless user experience, and here is where I see great potential of improvement.

Current Product Analysis

It looks like the app development has been outsourced to Giant Leap Technologies and released in 2015, and by the looks of it, other than minor fixes, it has pretty much remained the same since then. I’ve also spotted that it has pretty bad reviews on App Store and Google Play. So after thoroughly analysing the app on my own, I noticed a couple of things:

Homescreen is very simple, and provides 2 simple options for efficient process of charging, however I think all that screen real estate can be put to better use and spare the user from wasting time on extra clicks.

Starting a charging session is relatively quick when you know precisely where to charge, however I found it personally difficult to search for charging locations in specific areas. I found myself scrolling a lot, and double-checking the map if the location corresponds to where I'm headed. Also swiping up for settings doesn’t feel intuitive, that’s where the swipe-up for exiting the app is located on the majority of modern smartphones.

The profile page doesn't feel consistent with the rest of the app, it takes time to load and brings the user to a completely new destination that doesn't feel the same, where the user needs to spend extra time figuring out the new layout.

The map feels very plain and hard to use, there is no context information around the charging location, no previews until you click something, and not having any buttons for zooming in and out forces the user to use 2 fingers.

A side-note: Grønn Kontakt's main competitor Fortum has almost exactly the same color palette used across the whole visual identity. It's especially noticeable on the app icon and around the app itself, making it harder for users to distinguish which company is which. (I'm not saying that Grønn Kontakt should change their green color to something else since their name speaks for itself, but perhaps another shade of green could help?)

Talking with users

After noting down my own findings, I wanted to hear what real users have to say about their experience with Grønn Kontakt's app. Kristina is a 42 year old woman, and Herman is a 21 year old man. They both have very different needs for the charging network, and it was very nice to see how different their views are. It was also nice that the only 2 people I know using the network were in different age groups, which helped fit better into Grønn Kontakt's target user group (which i assume is most probably all EV drivers no matter the age).

Conversation with Kristina:

Kristina: First of all I would like to say that charging at Grønn Kontakt always ends up being cheaper, when compared to Fortum's charge session total. Thats why I always look for Grønn Kontakt locations when I'm on the road.

The login process at Grønn Kontakt is also much faster, no need to enter the login details every time and the process is seamless.

I like Grønn Kontakt's logo, but it's sometimes hard to distinguish it from Fortum because of the colors.

Me: Alright let's move on to the app, I think we can start with the "Start Charging" part, could you use some time to look around and tell me what you think?

Kristina: I think that it's very nice to have the closest charging location showing up, very easy to choose fast where to charge.

Nice to see the prices are consistent for the most part, not like Fortum's variable prices, not foreseeable. Very nice to see that Grønn Kontakt shows how much bonus you've saved after each session.

I don't really go deep into which types of chargers are available, what effect it is and all the technical details, I focus on the name that I know (Chademo) that works for my car and that's enough for me.

I personally like the efficiency of being able to just choose a charge location and a specific charger by number in the list view. I think that the majority of users are always in the same area, so it's more efficient to choose a charger in this way than using the map. But at the same time I think that it might get very boring for people that use this app more frequently.

I personally find the map being too advanced, but it might be helpful for people going on longer roadtrips, I almost never do that so I don't know for sure. Also I didn't even realise until this walkthrough that Grønn Kontakt had a map at all, and I've been using the app for around a year. I think it's very nice that the map settings allow you to choose specific chargers.

I think that's all I have to say for the "Start Charging" part.

Me: Alright, we can move on to "My Page" now, could you look around and tell me what you think?

Kristina: Very nice function of being able to download the charging session overview in pdf. Very helpful being able to see all the previous invoices as well. I don't see any issues with the process around changing personal info, quite simple. I have no clue what functions like "Kampanjekode" and "Inspeksjonskode" do, so I never use them.

Very nice to see that I can download my personal data, and deleting my account is possible and easy. Don't think I have anything else to say about "My Page".

Me: Thanks, do you have anything else to add?

Kristina: For me the most important thing is a simple app, cheap prices, fast charging, and bonus discounts that make it more attractive, overall less stressful process with less steps towards completion of charging session.

I've never had an experience where Grønn Kontakt had any technical difficulties with chargers themselves, everything looks clean at the charging locations, and I get an impression that everything gets taken care of a lot better, that there is always a roof to hide from say for example rain, and everything has been thought of. Very nice that their location is always near somewhere where I can go and make the use of the charging time.

As for the app I feel like a simple walkthrough in the start would be very useful, to know all the necessary app features. I also somehow feel that more visuals are needed, it gets too boring with only buttons and text, but at same time that's what makes the charge starting fast.

I also think that it would be nice with some more person targeted messages, like here is some more bonus for you, or we opened new chargers near you etc. But at the same time it shouldn't be too personal due to privacy reasons. A feature that calculates the route for me, where I need to stop and charge on the road, how much electricity I will have when I arrive at my destination would also be very helpful, but I assume that needs a lot of precise tailoring work to adjust to all the different types of EVs using this network.

*Looking on the app icon* Last thing I would like to mention is that I'm struggling to understand what is displayed on the symbol, it took some time to understand that it's an "Ø" and a start button symbol. But I think it's a good symbol and they should keep it.

Me: Thanks a lot for your time and feedback Kristina!

A lot of useful information here, but let's move on to the second user before we summarize all the findings:

Conversation with Herman:

Me: Alright, I think we can start with the "Start Charging" part, could you use some time to look around and tell me what you think?

Herman: *Clicks on a location on the map* A black bar is showing up not showing any context of the location, and only after clicking shows what it is.

I like the option of showing chargers from other vendors, but the way its laid out seems kinda strange to me, it could be better to make it fullscreen some how and show a bit more context.

I think the charging experience is fast, few clicks, very nice that pricing is showing.

If I were to go on a trip, and find a charger, I would probably use the app, but not always am I known in the area I'm headed to, so then I would search for it, but here I see that the search function doesn't display any results when searching for an area, only specific chargers.

I also think it would be better to group the charger types in the list view by the charging type, Chademo with Chademo, CCS with CCS etc.

If I were new to charging, names chademo and ccs wouldn't really say much to me, icons would be nice to have, and what stall type it is, and just in general help for new electric car owners. Also would be nice with display of the effect on each charging option, how fast it is.

Would be nice to have a confirmation before the start of the charge, could cause some frustration without. Also I don't see any problems with having a list view of the chargers, very efficient, but in my opinion a map should be the homepage, and the charger list as a side feature.

That's it for the "Start Charging" page I think.

Me: Alright, we can move on to "My Page" now, could you look around and tell me what you think?

Herman: I immediately don't like that it goes into the web view, not very user friendly with smaller elements. The bonus part is alright. I can't really comment on the charging overview since I haven't tried it out yet (Herman hasn't used the app in practise yet). Invoice part seems alright. I feel like the profile settings should be integrated in the app. That's it I think.

Me: Thanks, do you have anything else to add?

Herman: I think that it's kinda strange that the homepage is just 2 buttons and an empty space, it would be a better solution to go straight to the map page, also the overall impression I get is that it just looks old compared to modern standards.

Me: Thanks a lot for your time and feedback Herman!

Both conversations happened over the phone, where me and Herman had a video chat and a screenshare session where Herman pointed out what he meant, where as Kristina explained everything more verbally over the phone while we both looked at the app.

I can summarize the main takeaways from these conversations as the following:

List view is an efficient way to start charging fast, while map is helpful when looking for chargers on a trip or in unknown locations.

Some form of simple instructions are needed to help the users understand all available functionality.

An extra security step in the list view asking if you really want to start charging would be helpful in case the user misclicks. (I'm also aware of Grønn Kontakt asking the user to push a physical/on-screen button on the charger itself when the user wants to start a charging process.)

Elements like icons and illustrations could help users understand things easier, and at the same time lift the overall experience. In general whole app should be more consistent, and basic functionality like app settings and account settings should be easily accessible.

Inspiration and brainstorming

After that i started the brainstorming phase, I looked for inspiration on Dribbble and other designer networks, and created a moodboard on Pinterest to keep everything related to this project in one place. I've also analysed services like Google Maps, Elbilforening’s charging map, Chargetrip, PlugShare, Ladestasjoner, Fortum's charging app, and Ice's mobile subscription overview app, all having their own clever ways of executing concepts relevant to this project. Looking at the ways other people have executed similar services made me come up with better ideas for Grønn Kontakt's application.

Here is a list of ideas I came up with:

• A simple experience of signing up and signing in, with several options.

• A simple onboarding with 3-4 simple steps showcasing the applications core functionality, try to not overwhelm the user, little but meaningful text and more instructive visuals.

• An improved list view of charging locations located close to the user as start page of the app to retain the efficiency of starting a charge, showing more information such as small map cards to show where the charging station is located without needing to go back and forth between the list and map views.

• App navigation menu with descriptive icons and text always showing at the bottom of the app, consisting of 4 pages: List, Map, Charging (perhaps it’s better to call it something like “Session”, to avoid misleading users, norwegian word “Ladeøkt” could also work well) and My Account. Having List and Map side by side in the navigation menu gives them equal value, even though the list view is displayed on the start-up for efficiency's sake.

• An improved map experience, with convenience features like zooming buttons (very helpful for one-hand use), a button for your current location, a search bar and a filter. More previews on charging locations without the user having to tap on anything, such as area names, and amount of available chargers, types based on colors? Perhaps some personalisation features, like one tap navigation to most visited locations, how many chargers are available there etc. Perhaps even tailored to your specific EV plug.

• When tapping the charge location on the map, an info-card pops up right under it, with slightly more info like exact spot name and address, available facilities with icons (toilet, store, etc.), available charging connectors and types of stalls, and an ability to charge here.

• Then it goes into the list view, which will be basically the same as on the list view page, but just showing this specific charger instead. Here is where the user gets more detailed info as well as the ones previously shown, (charger name, address, clickable map as a small card, perhaps photos of the charger location so the user knows what to await at the destination?, and available facilities nearby). An ability to report an issue, either by phone or by mail is essential to have, as well as charger types, speed and price. Clicking on one of the cards goes into the next step of the process and asks if they would like to start charging.

• The Charging Session page will show necessary charging session information when connecting/charging/finishing up a charge, or displaying failure info in case of a connection failure. Information such as charger number, type, effect, price rate, charge progress, price progress while charging, price total and bonus saved after finishing the charge. This page can also be used for something else when user isn't charging their vehicle. Perhaps some sort of statistics? Home charger related?

• A fully rethought "My Account" page, where the user will be able to access all the settings, payment details, and the bonus overview, as well as having a clear preview when a new invoice has arrived. Settings page will organise all necessary app and account settings clearly, including security measures such as two-factor verification. The payment page will have a simple and clear overview of all recent invoices, unpaid invoices with previews, and an ability to view the pdf by downloading it, or paying straight by jumping over to the banking app/payment method of user's preference. The charging bonus page will be more engaging, making user want to charge and save more using gamification principles, having a target to unlock this month's top amount of bonus, and that's where visuals come into play.

Icons & illustrations

That's a good transition to talk about illustrations and icons. In the discovery phase I've had several different ideas for possible illustrations, but each one of them needed to be considered thoroughly, to see how well they fit Grønn Kontakt's overall identity. Not too quirky, but also not too serious, to strengthen the overall positive experience of this professional service, and avoid weakening it. Here is a list of potential illustrations and icons I came up with:

Illustrations/Animations:

• Onboarding: Simple understandable onboarding illustrations/animations that show up right after the user installs the app, simply explaining how the app's core functionality works (list view, map view, my account, analyse what could be best to do here)

• Charging: Simple and descriptive illustrations/animations showing the connection status and progress of the charge, there is definitely room here to use simple elements to create less stressful experience for the user incase something goes wrong. For instance a smiling car? or a more visual representation of bonus gained after the charging session?

• Bonus Overview: show either a typical wall connector or an abstract battery getting filled up with bonus, but at same time very important to show that this is the bonus page and not the charging page to avoid misleading the user.

Icons:

• My Account (A simple recognisable human icon placed in the nav bar)

• Map View (A pin with a map icon, placed in the nav bar)

• List View (Perhaps a list icon grouped with a simple plug, located in nav bar)

• Charging/Session (Perhaps a sideways battery, with a lightning bolt, a connector and a timer icon, or a car icon with a lightning bolt over it? located in nav bar)

• Filter (on List and Map screens)

• Search (in List and Map screens)

• Facilities (Icons like toilet, store, café, garbage, tour trail, park, nature, helps the user know what they can await when they arrive the destination, these will be displayed in the info-card on the map, and on the charging location page)

• Charge Location Pin (a special type for all Grønn Kontakt locations, and a different type for connectors from other vendors, on Map screen, and on small map cards in List view)

• Connector Types (CHAdeMO, CCS, Type 2, Schuko, on the filter screen, on the info-card in Map view, and in the Charging Location list view)

• Electric Vehicle (Perhaps on the option to specify your own EV in Settings?)

• Battery (with indication, accompanied by the charge percentage on the charging screen)

• Meter Icon (Displaying the charge effect on the charging page, maybe even in the List View as well)

Perhaps I've forgotten something, but that would become more evident after putting everything together in Lo-Fi wireframes.

Lo-Fi Wireframes

The point with Lo-Fi wireframes is to simply illustrate the ideas. Roughly showing how the elements would be placed and coexist with each other. For the sake of this presentation I've decided to keep it simple and only outline the most important parts.

Hi-Fi Prototype

After trying back and forth with elements on the Lo-Fi wireframes it became more evident how my ideas could look on a final product, and after settling on something that I was happy with I moved on to create the Hi-Fi prototype. As with the Lo-Fi wireframes, I've decided to outline only the important parts of the prototype that I'm already done with (the majority of the Hi-Fi prototype isn't finished yet).

Further development

Further development would be to finish the Hi-Fi prototype and test it on real users, to see their response, what they like and don't like, and most importantly note down potential improvements for further iteration. Some things that I didn’t cover closely in this case study are potential features like “News” page, where user would be able to easily interract with all the recent news from Grønn Kontakt (perhaps things like newly opened stations, that can also be pushed out as push notifications/pop-up cards on startscreen), and a “Help” page, which has a lot of potential (help with using the app, all tips and tricks when it comes to charging and using the service, helping new EV drivers understand charging, like Grønn Kontakt’s charging video instructions etc.). Perhaps a separate section with all recent operational status updates of charging locations could also be a helpful addition.

In general I view the application as a huge possibility to create a pleasant experience for EV drivers and perhaps even convert them to being brand advocators. The app can surely be just something that starts and stops charging sessions, but something that connects with the user personally, provides helpful information, and creates a desire to be used more creates a stronger bond with the user.

There is room for several features like personalisation in form of charging habits and different EV types, also a better map navigation experience, automatic counting of charging stops needed to reach the destination and making it easier for the user. I can also see great potential of integrating other Grønn Kontakt services such as home charging into the app, perhaps using the "Session" page. Perhaps Grønn Kontakt could consider using some of Chargetrip’s API and build around the existing functionality there.

Grønn Kontakt's website has some improvement potential. Perhaps dividing the website into 2 parts, one for potential customers, and one for existing customers, where potential customers get all the info they need to quickly and easily get convinced to become a customer, and existing customers get a web based platform where they can log in and access most of the functionality that’s available for them in the app.

On the current website the navigation could be improved, highlighting the core functions of the website clearer, more visual aids like icons on important elements like “My Page”. I feel like the online map doesn’t state clearly what it’s able to do, users have to see for themselves through trial, perhaps short information blocks could help solve that. And for example the CTA of becoming a charging customer should be highlighted better. Some other smaller things include: some elements are too big or are kind of misplaced, the search bar over the map on the homepage doesn’t feel interactable, overlap of image corners feels unnatural, light text against light backgrounds on pictures etc.

Something also needs to be done with their branding, as I've mentioned before perhaps a slightly different colour shade, just enough to differentiate from Fortum, yet still remain true to their name. Logo symbol could also be more intuitive, making it more apparent that it's a start button and a letter "Ø".