IEC's Website Redesign
Israel Electric Company
The website serves as the primary gateway to access the services and information provided by the Israeli Electric Company, serving as the main communication channel for all its customers.
B2C
PUBLIC SERVICE
UX/UI DESIGN
RESPONSIVE DESIGN
INFORMATION ARCHITECTURE
My Role In The Project
Lead the design team,
which includes UI designers, UX designers, and content writers
Hands-on design of UX concepts
for numerous processes, from the initial research stages to detailed design
Some Context On The Unique Nature Of IEC's Projects
Throughout the upcoming pages, I'll showcase a range of screens and solutions. However, what you'll view is just the tip of the iceberg. Behind each presented solution lies a myriad of variations tailored for different scenarios. This complexity is a direct result of the Electric Company's distinctive characteristics as a public and large-scale company.
Diverse Customer Base
Including households, businesses, large-scale consumers like factories, and professional electricians
Inclusive Essential Service
Support five languages, meeting the strictest accessibility standards, and responsiveness to any device
Turning a Big Ship Takes Time
Maintaining service quality during changes by balancing long-term vision with interim solutions
The Primary Goal Of The Redesign
As the client openly admitted in a moment of honesty
Reduce the load on the call center because, well... let's say their service is not the best
Key Challenges To Achieving Customer Self-Service Success
According to in-depth research we conducted, we learned that in order to achieve customer self-service success and reduce call center calls, we needed to confront these three challenges:
Brainstorming Concepts And Guidelines
Before sketching the screens, the first crucial step was conceptualizing the project in a collaborative setting with members from the CX, UX, UI, and content teams. I strongly believe that involving professionals from diverse departments in the initial stages enhances both the outcome and collaboration throughout the process.
Outlining Core Guidelines And Values
Make the user feel we know him
Service
orientation
Core Values
-
Responsibility
-
Transparency
-
Digital innovation
-
Familiarity
Main Interests
-
Payment matters
-
Power outages
-
Carrying out actions
A sense of
mutual trust
Effortless Registration - sign up in a snap
Storyboarding And Mind Mapping
The Desktop Layout (before and after)
Homepage - Before
Homepage - After
The New
Mobile Layout
Personalizing The Experience
Challenge #1
The IEC serves a diverse customer base, ranging from home consumers and businesses to factories, professionals, and even home solar energy producers. Each of these customers requires a different kind of content. Thus, the IEC can customize content through registration and personalization, thereby reducing information overload, providing users with fresh relevant content, and simplifying interactions by prefilling known information.
Solutions
01
Simplifying The Registration Process
By carefully mapping and planning, we made the registration process straightforward and easy.
02
Inspiring A Sense Of Trust
We designed the registration flow with user trust in mind, including reassuring messages that make users feel at ease sharing their details, all while highlighting that it's a quick and one-time task.
03
Offering Multiple Login Options
Instead of sticking to the traditional 'login button' placement, we seamlessly integrated the ability to login in multiple locations, making it an intuitive extension of the user's original action.
04
Softening The Difference Between Registration And Login
On websites of this kind, many users forget whether they've previously registered and often attempt to log in without hesitation. However, when confronted with the need to register, they tend to hesitate. This is why we've blurred the lines between the login and registration processes, focusing on aspects like visibility, flow, and the system's tone before and after logging in.
Engaging in the complex mapping process behind the scenes allows us to keep the registration and signup simple for all user types
An example of the registration process
(this one is for a domestic user who has reached the process as part of billing payment)
Let's examine the bill payment process for both registered and unregistered users to illustrate the advantages of registration in streamlining procedures
Registered User
-
They can preview the payment status before proceeding
-
They have the option to pay all their bills at one time
-
No contract account number or credit card information is required
Unregistered User
Of course, we also made every effort to keep this process as easy as possible; however, it is still less convenient.
-
They can only pay one bill at a time
-
They have to input those long contract account and credit card numbers
Keeping It Clean And Simple
Challenge #2
While it may seem like an obvious task, keeping things simple was a true challenge due to the information overload on every screen. When it came to filtering and prioritizing screen elements, we faced a dilemma – everything appeared important and necessary to include for users. Thus, we had to find a way to craft clean and welcoming screens without sacrificing essential content. Here's how we tackled it:
Solutions
01
Sticking To A Mobile-First Approach
We first started solving every process on mobile resolution, creating an application-like experience and keeping the mobile feel on tablets and desktops.
02
Integrating Drawers And Side Menus
When the idea of using drawers struck us, it was a breakthrough moment. Using drawers became a pivotal component of our concept as it offered an elegant solution to declutter the interface and acted as a central navigation tool.
The 'Three drawers
Solution' In Its Closed State
"Payment and invoices"
Drawer
Unauthenticated user
Authenticated user
"Power outage"
Drawer
Unauthenticated user
Authenticated user
"Additional transactions"
Drawer
The Side Menu
We invested significant effort in crafting a user-friendly menu, prioritizing precise category organization and clear element naming. To achieve this, we conducted card-sorting exercises and user tests.
Desktop View
The mobile-first approach led to clean and pleasant desktop screens
Making Everything Clear And Understandable
Challenge #3
Many users hesitate to take independent actions regarding electricity because of its technical and potentially confusing nature. They are often concerned about the potential consequences making mistakes could have on their billing or power supply. Therefore, to encourage self-service, we provide clear and understandable explanations, making users feel capable and confident.
Solutions
01
Bridging The Gap Between The Physical And Digital Worlds
For tasks that involve data extraction from documents or electricity meters, we ensured users can easily understand what data is needed and where to find it.
02
Minimizing User Data Entry
To prevent errors, streamline processes, and boost user confidence, we obtained the necessary information ourselves, even if it meant overcoming regulatory challenges.
03
Providing Contextual Explanations
We've seamlessly integrated explanations on relevant topics within the processes, addressing users' concerns to foster clarity and transparency.
This is how we use graphics to ensure that the users
understand what data is needed and where to find it
Below is an example of information users had to input manually;
now, they simply need to confirm.
The address is certain
Multiple possible options
"How simple, how great! They did an amazing job on the new website of the electric company and the payment platform for citizens, both at the level of the experience and the design (works really well on mobile, feels like a native app) 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 was enthusiastic about the new website. In the past, I had to call 103 simultaneously, 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 can be found and is very accessible, whether it's a document, action, or information that a business or private user uses. It’s all a matter of a few clicks, and sometimes just one click."
The day after...
It was amazing to witness the immediate impact of the change we made just days after the launch of the new website. The number of people who signed up and completed their tasks exceeded everyone's expectations. Though I cannot disclose the numbers, this project led to a significant decrease in the number of calls to the service center and greatly impacted IEC's KPIs.