ATOM

Provider of End to End
MOP/MAM and Smart Services

Imagine a truly big online web software and application for managing users and jobs for providing electricity and gas in England without using a single product designer role in the development team for years. A simple task with a simple goal becomes a nightmare!

My job was to create an impressive visual identity for it in the first step. Then, start redesigning the whole software including a huge web platform and an application for specific engineers whose job was installing, removing, and maintaining electrical or gas meters in English customers’ home.

Stay with me through the whole process which leads to the generation of this awesome software.

Visual Identity

There was no visual identity in the project. So, the enjoyable process of working with colors, forms, and layouts just started in the early days.
I talked with the stakeholders and managers not only about the vision and goals but also about the industry that they’re working in and their competitors in the field of FSM (Field Service Management). I went through benchmarking in the industry to get more insight into what I was going to design.
Paper has always been my friend! So, I start designing a logo for the Atom product on paper. I made a digital vector version of nearly 10 logos. After discussing with my managers and taking their feedbacks about different logos, we agreed on one of them with some minor changes.

Lovely Colors

Playing with more than 16 Million Colors is my hobby. Getting colors out of natural landscapes like the sunset, sunrise, a beautiful rainforest, and any other natural view inspires me.

Some results were too chic. We want a logo that represents our goals and at the same time, it should be casual, because lots of engineer users who have the tough job of installing, removing and maintaining electricity and gas meters every day, didn’t want to work with a heavy and chic design.

Our final choice was a combination of yellow and blue which is stylish and unforgettable.

Finalizing my work on designing the logo, I went for the color palette which was going to be used on over two main platforms and you can see them in the picture.

Enough with visualizing! Let’s Begin with

User Researching

I dove into the first stage of designing user-centric software which is knowing the users. There were several types of users who work with this software:

FSM managers

People who work at the office and their job is to schedule appointments for the people who want new smart electricity or gas meters, managing engineers’ job and supporting them by phone through the whole complicated process of installing, removing, and maintaining meters.

Engineers

Professional engineers who go home to home every day, bringing different types of assets with themselves, removing old meters, and installing new smart ones. Also, a firm bond with FSM managers at the office to support them in some situations through this process.

Suppliers

Companies that sell energy to customers and need their meters to be installed at homes. These companies needed a platform to manage their users, assets, and also monitor engineers’ jobs while they should view an archive of every user’s profile.

Customers

Last but not least, people like you and me who use electricity and gas in their home or office. They need a supplier for these energies and meters which monitor consumption rate and their instant bill.

Yes, I talked with FSM managers and tried to understand the pain points, requirements, and critical points that should be considered carefully. Also, I had several meetings with two operation managers about different functionalities and their approaches utilized during all years.

Benchmarking

Watching and analyzing successful products with a detail-oriented attitude has always been inspiring for me!
I visited the websites of energy providers, watched the videos on YouTube and how their engineers do their jobs, watched closely their applications, and how they arrange information structure, flow management, and user accessibility in their apps. Some of them were JobLogic, bigChange, Jobber, Freshdesk …
I’ve learned a lot in this field and it helped me design a product that is aligned with the business side and user’s side simultaneously.

Flowcharts, WOW!

You know nothing about how much the process of installing a new smart meter is complicated! Imagine an engineer installing a meter and concurrently working with an application and need to record every little step. At some points, he/she needs to request for joining a new device to the provider network while it needs an FSM manager at the office to support and confirm it.

These flowcharts were my Bible to understand how to design the flow. We have dozens of flow charts for different job types like electricity, gas, check commission, commission-join, install only, remove only, and so on.
Studying these flowcharts and working with the old application gave me a bright path to design both application and web software for FSM managers.

FSM Panel

Job Management

A job would be created by customers or suppliers or during a promotional campaign. It was crucially significant that FSM managers could track a job from the very beginning state (not booked) to the ending state (job completed). Every job has its own type, customer, state appointment type, installation type, date and time of the job, the name of the engineer.
I designed low fidelity wireframes that present different functionalities both on paper and digital. I designed a comprehensive search and filter panel which helps FSM managers to easily find the job they want in specific criteria. Also, I designed two types of Cards which were card view and row view that represented all data associated with the job.
In addition, a job detail page was designed to show all of the information associated with a single job and consisted of lots of data and covered all links to customer information and photos of the job.

FSM Panel

Customer Management

Managing approximately 1 million customers all around England is not an easy task to do. How can I design a panel that FSM managers can search through name address, postcode, and MPAN and MPRN which are unique identifiers of electricity and gas IDs in the UK? They want to filter results by their status such as job status, appointment types, their suppliers, and so on.
Actually, after having multiple sessions with managers and taking their requirements and their pain points in the current system, I designed different wireframes which not only covered their requirements but also added some functionalities which give more speed to find other information they needed.

Mobile Android application

huge and remarkable redesign

First and foremost I should point out the fact that the current application was a real pain. As I said before, it was developed without truly considering engineer users whose job was tightened with this application every day.
An engineer could see their jobs for that day and the next day. Also, they could search for archive jobs in the past. They could select a job to see an overview of what should be done and go to the property and start a new job. Having in mind that the type of the job is the most important for engineers to see, I’ve designed job cards very carefully.
I designed appropriate pictograms for each type of job and used a specific color for each job type to be distinguishable in the list of jobs.

Normal cards

Cards with note

Card loading shimmer style

Sections and steps

The beating heart of the application

The power of making the application more usable and pleasant

As you read previously about flow charts, there were lots of steps with different characteristics.
I categorized several steps into sections. After designing four different wireframes each of which presents a unique way to access sections and steps, I discussed with engineers who spent years installing and removing meters.
We analyzed the pros and cons of every design and reached an agreement about how to organize steps into sections and how and where an engineer would access to do a specific task. Then I went on to design the UI of all steps and sections.

Final Design

Sections

Final Design

Sections and Steps

Mobile Android Application

Server Driven UI

During the design process of the application, we got a new requirement which was weird for all of us in the product team!
FSM support managers wanted to dynamically insert new steps into a specific job that was being done by an engineer. It needed a completely new approach through the programming application. After the Android engineer team researched and studied the feasibility of how they could implement this architecture, they came up with a brilliant solution: Server driven UI
They explained that every single part of the UI containing input boxes, buttons, drop-down, labels, and … with almost all attributes including font size, color, position, default data, and also specific validations for each part, should come from the server as a JSON file. After fetching the JSON file, they render any part of the UI and construct a page. So they can cover inserting new steps dynamically while an engineer is doing a job.

Mobile Android Application & FSM Panel

Design System

A design system is vital in every product designing process.
After deciding on the new constructive approach to using a server driven UI solution, I realized it was time for our design system to play a more vital role in the application. So, I started designing a comprehensive design system including lots of elements in different states including input boxes, dropdowns, buttons, modals, text blocks, checkbox and radio button, toggle, loadings, tab bar, error and warning messages in a snackbar and so on.
Every element was designed carefully considering Material Design guidelines and consistency all around the application.

Mobile Android Application & FSM Panel

Iconography

WEB ICONS

MOBILE ICONS

Our Team

THANK YOU

This could not have been achieved without extraordinary teamwork including back-end developers, front-end developers, Android engineers, and on the business side, our great product owner and professional CTO supervision.

Also, a group of FSM managers at the office always helped us to understand this complex business and this was not achievable without their support. I worked in a disciplinary remote job which was fantastic for me and I’ve learned a lot working with them.