YEAR: 2018
TEAM: Individual work
DELIVERABLES: Charger app UX, Charger pairing process, Easee status icons
TOOLS: Sketch, Pen & Paper
2018?? why show this project?
This job for Tibber was my first real UX-design project, and it was before I had started my masters in Interaction design and technologies. Looking back, there are of course things I see that could have been improved, but won't that always be the case if you want to improve? When I did this project I hadn't learned any design processes, methods or tools yet, or had the routine of saving things throughout the process, so you'll see that there are a few gaps in this process. So why do I choose to show this project? I did this project entirely on my own, both problem-solving and learning Sketch, and I really did learn a lot - and I realized that this is what I want to do. I love problem solving, working with visuals, and learning new things, although - I prefer working in a team :)
PROJECT SCOPE
➢ Easee UX & UI + Easee Icon
Tibber is an electricity provider that advocates smart electricity consumption, they want households to use their electricity in a smarter way, that are better for the environment and the Tibber users’ economy. This can be achieved by using electricity during that time of day when the electricity load is low, and we can use the renewable energy.
Easee is an electric vehicle charging box which offers smart charging. My task was to design the UX for the charging box’ interface on their main platform, the mobile application. As well as designing icons for their starting page that shows the different states of the charging box.
EASEE ICON
➢ Icon process
When I started to work on this project, I began by having a look around in the mobile application. I wanted to get a sense of how it worked, how the different icons were displayed and what the different colors within the app meant. I had some brainstorming sessions to come up with ideas for the home screen icon for the charging box, and did some lo-fi sketches on paper. After that, I created the prototypes in Sketch and showed it to Daniel, the head of Tibber Sweden. Together we decided on one of the icon prototypes (shown in first iteration) and from there I started to work on the different modes the icon would show.
I changed the icons background to a dark blue, since that is what Tibber use for the icons where the user can change the setups, such as the temperature of a heat pump connected to a house. I made two different types of these icons, icons with borders only, and filled icons (second iteration).
The icons with boarder only were preferred by Daniel, and so I continued to work on how the different states of the charging box should be represented. Lastly, the final icons ended up looking as shown in the third iteration. This icon is now used in the Tibber application.
CHARGING BOX
➢ Easee functionality
The charging box offers smart charging, meaning it charges the car during the hours of the day when the cost for electricity is low, and pause the charging when the cost is high. The charger is connected to the Tibber app where the user can control the charging in different ways. The user can choose smart charging, immediate charging, pause the charging, or set a timer for departure when the car needs to be fully charged. The user can also see the charging speed, overlook historical costs of charging, lock the charging box, see what WI-FI it's connected to, and also see which car is connected to the charging box.
➢ Requirements
Tibber provided me with information about how the charging box worked as well as what functions the app should contain. They also gave me access to the app so I could see its present design and the different functions within the app, such as controlling a heat pump connected to the house. Based on this, I had the creative liberty to design a prototype of the charging box-page in the app.
Visual Requirements:
1) Show if charger is online/offline.
2) Show if charging port its open/closed.
3) Show if its charging, delayed, complete.
4) Show if a car is plugged in or not.
5) Potentially show the car-model that is connected.
6) Show charging speed (kW)
7) Show historical costs (kr & kWh)
Quick controls the charger:
1) Charge now (on tap, switch to Stop and charge later?)
2) Lock cable/unlock cable
Advanced settings:
1) Set smart charging settings on/off. (Will be inherit from paired cars when those are connected)
2) Set departure time (Will be inherit from paired cars when those are connected)
3) Add cars. Potentially part of home profile? (Automatically filled with paired cars.)
4) Configure maximum charging power
5) Load balancing settings, be able to see if you have load balancing with more than 1 box.
➢ Research
I started by having a look at the actual charging box, the design, the different functions it had and how it worked in reality. I started to think about what different functions or information that is most relevant for the users, as I didn’t want the page to be loaded with unnecessary content. I wanted to give the user fast access to the most important information without being distracted. And at the same time, I wanted it to be easy to find the not so frequently used information within the charging box page, such as statistics.
I looked at the different functionalities within the app, what they looked like and what they did or meant, the use of color, and the navigation bar at the bottom.
Unfortunately, I didn’t save the screenshots of how the app looked like in December 2018, so the images below to the right are of how the application looks today. The images below to the right are the pictures of Easee that I got inspiration from in 2018.
PROTOTYPES
➢ 2 Iterations
The prototypes was created in Sketch, they went through 2 iterations of testing and designing.
Reflecting on the project
The job for Tibber was my first real UX-design project, and it was before I had started my masters in Interaction design and technologies. Looking back, there are of course things I see that could have been improved.
One thing is that I didn’t have the routine of saving everything I did in my process, such as the first sketches on paper. I was more focused on where I was in my process and how I could improve my design. Therefore, unfortunately, I cannot show my whole process from start to end. I also don’t have pictures of how the Tibber app looked before my project so I can compare it to the end result.
When I started this project, there was already a time pressure. I would have liked to do some more iterations of my design process, as well as real evaluations and interviews with Tibber users. But because there wasn’t enough time, and because Tibber had a lot of other things going on at that time and couldn’t respond so quickly, I just didn’t have the time to do so.
One thing I struggled with in this project was the colored line that goes around the coin icon. This is a function that Tibber is already using, but instead of a blue color, they use green to show when the electricity cost is low. Tibber also use the green color as a saving mode. This was tricky, because if we use green as an indicator for a saving mode, the color green should also be used when the charging box is paused. But the color green when charging a battery, would more likely be interpreted as fully charged rather than paused.
The green color against the Tibber blue is also a difficult color combination, even for a person with normal color vision. Due to this reason, I have chosen the blue color to indicate that the price for electricity is low, and a light turquoise color to represent the charging being paused. I chose these two colors mostly because of their contrast which is easier to perceive, both for a person with reduced color vision as well as a person with normal color vision.
