Overview

Kenya Power is a national electric utility company, managing electric metering, licensing, billing, emergency electricity service, and customer relations. It’s partly owned by the Government of Kenya with 50.1 percent shareholding and private investors with 49.9 percent shareholding.

My redesign

Challenge

As mentioned, buying power tokens is not seamless in as much as it’s done digitally. 

  • No Automation. Most of us are familiar with the long process of buying KPLC tokens. You have to physically go to the meter and manually key in units. In an ideal scenario, after buying power, the token units should auto load themselves in the power meter. Unfortunately, that’s not the case with the current KPLC app.
  • No Real-time Status Updates:  On the app, there isn’t a way to check how many tokens you’ve used, what your average monthly consumption is, and an estimate of how much you’re charged per token unit.
  • Can’t buy Token through the app. At the moment the current app does have an internal feature for buying tokens. 
  • Token reversal is a nightmare. If you mistakenly buy tokens to the wrong account, you can’t request a reversal through the app. You have to print a form, fill it with your ID then write an email to the support department and wait for one of the official agents to come to your house and check your place. Might take months.  I personally bought to the wrong account and it’s been 4 months still waiting.
Role
  • ROLE: UX Designer, and conducted User tester. 
  • Timeline: 4 Weeks, August 2021
  • Team: Michael Kitticai – Solo Project
  • Tools: Adobe XD, Pen & Paper
Approach
  • As a power  consumer, I used some of my pain points to come up with the solutions
  • I later conducted user testing interviews and reached out for feedback.
Results

In general, the prototype got a lot of positive feedback, in fact, it gained some traction on LinkedIn and Twitter. With most people anticipating the rollout of the actual app.

Response from LinkedIn

 Kenya Power & Lighting Company twitter account.

IDEATION

Before we dive into the final product, let’s check out how I came up with the whole design.

Objectives

Before starting any design process, I asked myself while putting the user at the center of the focus.

  • What do I really want the user to achieve from this platform? 
  • How’ll it improve their daily life?
  • What key features would I (KPLC Daily user) want to see in the app? 
  • And how would an average Kenyan with very basic knowledge of tech be able to navigate through? 
  • And how useful will this be to them?
pexels-polina-zimmerman-3782144
Features

So after coming up with a few objectives the app features came out straightforward. These were:

  1. Enable users to buy tokens directly from the app, without being directed elsewhere or using a third-party platform.
  2. Show live updates of my current power usage and an estimate of how long they’ll last
  3. An easy and seamless way to reverse tokens sent to the wrong account
  4. Notify users about future “Planned Power interruption”. This basically means there’ll be a power blackout in your area.

User Journey

The main goal here was to highlight how the user would navigate from point A to Z and highlight all the possible navigation alternatives. 

Lo-Fi Wireframes

Then followed up with low fidelity (Lo-Fi) sketches. I like to do this first on pen and paper, this way I can sketch out ALL the ideas I have in mind without any design constrictions. 

Then later I refined the wireframes on Adobe XD. 

Mid-Fi wireframes designed on Adobe XD

HIGH FIDELITY WIREFRAME

Then came the fun part, my favorite part, adding ‘meat’ on the skeleton. 🤗🥳🎉 This is where I give life to the app.

Colors

I chose blue (#003D8F) and yellow (#FFD617) as the primary colors because the two contrast and are easy on the eye. Also, for accessibility purposes, it’s easy to spot the yellow while on a blue background and vice versa.

The colors PASSED the accessibility test on are my colors accessible.com

Typography

The main typeface used was a variation of Circular Std font. Mainly because it’s easy to read sans serif and it’s not that common. And lastly, all the icons used are free commercial icons from Icons 4 design plugin on Adobe XD.

PROTOTYPING

Now let’s dive into the app prototype and explore some of its features.

You can also try the prototype here.

Splash Screen

The first screen is the splash screen which features the KPLC logo as it loads.

Login & Registration screen

Then followed by the Registration screen. By default, new users will have to register first before login in.

KPLC app homepage

After successfully registering/login in, the user is taken to the home page which is the 3rd screen.

The navigation bar

It’s a common trend nowadays or probably an industry standard to spot a navigation bar at the bottom of the page. This was not an exception here, the navbar was at the bottom too with navigation icons linking to different pages in the app.

  • The cherry on top. 🍰 The main UI highlight and my favorite design about the navbar is the bulb popup menu in the middle. I call it the cherry on top, the sprinkle of awesomeness in the whole app.
  • The animation is smooth and the bulb lights up when pressed and pops out icons showing more menu options. This not only is a fun UI feature, but also good UX to help declutter the navbar with fewer priority features.
Planned
Power Interruptions

Here you can check when there’ll be a scheduled power blackout in your area or in other locations. The calendar shows future planned blackouts.  This helps the user to plan prior and avoid being caught off guard with Power blackout.

Buying tokens
  • This page is meant for recharging tokens by buying them with your preferred money payment platform. 
  • By default, M-Pesa is the selected option because of its popularity with paying bills. But users have the option to change.
  • Another useful feature on this page is tokens estimate. This way you can estimate how many tokens you’ll get before transacting.
Token Reversal

If a user buys tokens to the wrong meter account, all they have to do is, fill a form and request for a reversal. Without having to the hustle of writing long emails to the support team.

Report Blackout

Easily report a Power outage in your area without having to call the service provider.

Other additional features
  • Blog article with useful power saving tips
  • Settings page
  • FAQ page

USER TESTING

Now it’s time to put the rubber on the road. First I gave the users a chance to try the prototype first. I did this by embedding the XD file on my website with a set of instructions. You can also try it here.

Challenges

  • The app is still not coded so, I couldn’t fully test all the functionalities
  • The fact that users had to try it on an embedded platform and not on their actual phones, limits me to see how they navigate the app through their palms.

Hopefully, we’ll get it coded, test and iterate before launching to the public.