electricity bill
REDISIGNING BESCOM's old
from paper to digital
-
Creating an information hierarchy.
-
Representing this hierarchy in an efficient way.
-
Experimenting with screen size.
-
Layouting (Using grids)
-
Information sorting
-
Representation
Skills
Goals
Why the reformat?
While looking at the bill, the amount of information that was there on the bill was overwhelming which obviously lacked classification, it also seemed very monotonous and boring to look at.
Design process
The user group of an electricity bill is extremely large, hence the design has to be simple and efficient at conveying information.
User group | Adults (18-60 yrs)
Information sorting
My first step in redesigning the bill was identifying the most important information on the bill, information that was relevant to almost everyone who views it. This gave me a sense of what to highlight in the redesigned bill.
In the previous bill there was no information design that would aide the user in understanding the bill efficiently, therefore I added a pie chart indicating the charges levied by the company in order to help the user in understanding the breakdown of charges quickly.
This chart would also reduce the text heaviness noticed in the original bill.
while hovering over
the different segments
Old bill
Interface design
An electricity bill is expected to be a formal document hence, it has to look serious and neat. I made the choice of using sans serif fonts to emphasize this feeling in the viewer.
The colour palette I chose was shades and tones of green and yellow to calm the viewer while viewing the bill and not overwhelm them with colour.
I played with the size of fonts as well as colour to direct attention to the most viewed parts of the bill, therefore making the search for a particular piece of information easier.
#C1ECBE
Tea Green
#F7BC45
Lincoln Green
#18320C
Phthalo Green
#FDFEE0
Light yellow
#E8FDCC
Nyanza
#0A4F08
Final output
The layout of the components was informed by the usual way users view screens, which is in a ‘z’. Therefore the most important information, which is the net amount due and the subsequent due date are placed at the bottom right of the screens. They are also highlighted by a darker background and light text as compared to the other information which are vice versa.
I created a separate screen for the breakdown of charges as it seemed unnecessary to include in the first page, therefore it is made optional to view for the user. The information on this page is placed using gestalt’s laws of similarity and proximity.
800*800
Other projects
