Utilities Mobile App Redesign
Project Date: November 2018 - October 2019
My Role: UI/UX Designer
On the left is the old app home page. The right is the new home page for non-logged in users showing open services and locked services.
Project Summary
The company required to redesign their customer facing app that manages electricity and water services. The app is bilingual (English and Arabic) with about 36 services. The end goal of the project was to make customers complete a service successfully in the shortest time possible without the need to visit nor call the service center.
The Challenge
The app originally was designed for few services and as the services has built up, the information architecture of the app became messy and sometimes misleading. Most of the services are based on customer’s data entry and every time they get a task done, they spend more time to enter the same data. The app also had many redundancies and it looked very outdated. Another major challenge was a business requirement to combine customer app with employees app.
Solution
Discover
First I started with studying the old app and listing all the services and their importance to users (based on frequency of use). Then I highlighted any redundancies and made interviews with stakeholders and users to include any missing steps. As a result of these two steps I was able to create a new information architecture that provides the minimum steps and time to get a task done.
Ideate
Also, I have introduced new features like turning long forms into steps with auto-save, showing the user’s consumption of water and electricity, tracking requests status, “Electricity and water outage” requests, and managing properties.
I started to sketch out many ideas for the home page as it is the main page to navigate through app. Since most of the app screens are forms, I produced wireframes as a sample of long and short forms. The app has many screens, therefore I had to decide on a list of screens to wireframe as a template.
Design
After presenting and discussing ideas on wireframes with stockholders, designs were produced reflecting brands’ identity and keeping it user friendly. One goal I had was to make the app compliant with Accessibility Standards as it’s used by wide group of users. Therefore, many iterations of colors, fonts, and content resizing were done to make sure the overall look and usability of the app is maintained.
Results
During my time with this project I got the chance to think like many types of users, almost all the country uses this app. For each service in the app there are 3-4 systems running in the background to get the data needed, and since there was no requirement document for the project, I had to be curious about how the systems works, what more meaningful information we can pull to show users, and even what new features can be added.
Unlike all different projects I worked on, one of the goals for this project was to make users spend the least time on the app. This required me to think about many scenarios and many design iterations to find the shortest path for users.
The designs are still missing some life to it and some animations should be added to feel more natural and friendly to users. Designs should also go through user testing to capture any missing details or even new possible features.