Israel Electric Corporation
A company website, including online electricity bill payment
UI/UX PRODUCT DESIGN
RESPONSIVE DESIGN
REDESIGN
ISRAEL ELECTRIC
PROTOTYPING
My role in the project
Developing a design concept, updating all web pages, providing a structure for the internal pages
Oversaw all aspects of the design process and provided support during the ideation phase
Working in collaboration with the client, project manager and UX team
Collaborating with the developers to provide design solutions and support various resolutions
Core values
We defined the three core values of the system to guide all the design decisions in this project.
Functionality
Uncluttered and uncomplicated website navigation that improves orientation and encourages users to take action.
Trust
Develop credibility and trust for the product through consistent UI and behavior.
Innovation
Clean and innovative design that helps the user to focus on the important actions.
Brainstorming ideas and inspirations
After compiling the information, we sat down to analyze and brainstorm; at the same time, I collected some inspirations for the behavior of the interface that helped formulate a UX concept.
Storyboarding and mind mapping
Selected references
Searching for good references before starting the work can create magic and solve project blockers early.
-
This layout stands out due to the additional value of seeing all available tabs simultaneously
-
It allows focusing on the most common actions
-
Application-like behavior
-
Using carousel to show the content in a slideshow-like manner
-
A layered design that helps separate the operations
Concept
After a UX concept, and there are ideas of how navigation should work and many other decisions we made with the team. Now we can approach the design.
I created several versions of the home page that were tested and received feedback from the project stakeholders.
03
Final version
02
01
The desktop layout before and after
Homepage - before
Homepage - after
Reduce the load on the call center
Challenge #1
Create a website that encourages user registration and performing actions online to reduce inquiries and the load on the call center.
Solutions
01
Quick and easy registration process. We offer a simple and intuitive login process that makes the user feel that we know him and only need a few more details to upgrade him to become our client in the digital environment.
02
We showed the registration in many places throughout the site and integrated it into different processes, but not in an intrusive manner, as a way to get access to additional services and benefits.
Registration process
As a result, the daily load of calls to the call center has decreased to a large extent. In the first weeks after the new site went live, tens of thousands of new users registered online.
Personalizing the experience
Challenge #2
To change perception and focus on the customer and his experience, to create an interface that gives the feeling that we know the user.
Solutions
01
We mapped all profiles: private, business and commercial. And we identified their specific content and information.
02
Save the user's credit card details, recent invoices, and addresses. Suggest auto-fill already from the home page for quicker processes.
The meter's serial number
In the past, a user had to enter all the invoice details. Today, you only need to enter the meter number, and we will automatically locate the rest of the information.
Information overload
Challenge #3
To create a modern, pleasant look and feel despite the heavy information load.
Solutions
01
The solution concept included sticking to a mobile-first approach, including the application-like behavior for everything and keeping the mobile design on tablets and desktops.
02
The solution was to go for the drawers, which we also use for navigation. This layout gives us an additional value, which is seeing all tabs simultaneously. We reduced the number of components in favor of focusing on the user. Simplifying the site makes the experience effortless, especially while performing the most common actions.
Drawer "Electricity bill"
Before authorization
After authorization
Drawer "Power outages"
Before authorization
After authorization
Drawer "Actions"
Before authorization
Electricity meter reading - after authorization
Another way to access the Common actions and All actions on the site - sidebar menu
03
Moving from the long forms to just one question on each screen. For example, paying an electricity bill (see below).
Paying the Electricity Bill
Challenge #4
No one enjoys paying, so at least make it a fun and easy process. The payment procedure needed to be updated and match the spirit of the new site; we had to make adjustments and upgrade it.
Solutions
We designed the payment process in a clean line, with each step focusing the user on a specific task he must perform. Statistics showed that the payments are made mainly through mobile, so we first planned the process with a mobile approach.
The goal was to create a process comprised of clean and simple screens, showing one question at a time.
In addition, we created an intuitive connection between the digital and physical worlds by illustrating the text interactively with an illustration of a credit card.
The payment process for a logged in user
The payment process for a user who chooses not to log in
Desktop view
A fully responsive web design for an impressive and pleasant experience
Designing icons is fun
As part of the project, we had to understand and correctly present all types of information. The icons had to clarify and complement the content and the actions and help convey the message to the user by providing a visual cue.
Main icons
Secondary icons
Action icons
"How simple, how great! The new website of the electric company and the payment platform for the citizen did an amazing job there both at the level of the experience and the design (works really well on mobile, feels like a native) and also in the texts, hats off 👏"
"Very successful. I happened to use it for the first time yesterday and you just feel a sense of relief. It's amazing what a good interface can do."
"Joining the compliments. I also paid in the last few days, and I was enthusiastic about the new website. In the past I had to call 103 at the same time, because I simply got lost among all the numbers and rubrics. This time it was so simple!'
"I paid a few days ago, it's really a pleasure. It was simply an excellent corrective and aesthetic experience, everything a user needs is found and very accessible, whether it's a document, action or information that a business or private user uses, a matter of a few clicks and sometimes just one click."
The day after...
It was amazing to see the immediate impact of the change we made, already a few days after the launch of the new website. The number of people who signed up and completed their tasks exceeded everyone's expectations. The number of calls to the service hotline decreased significantly, and many forums highly praised the change.