Improve the customer experience on the self-service support, decreasing call centre cost.

The Challenge

Decrease call centre inquiries and solve the high rejection rate, improving the customer experience on Comgás self-service support.


Product Designer

Team & Time frame

Two months in the middle of 2017. I designed it with Leandro Paiva and Richard Vannucci, both are Interaction designers.


Responsive web service


Comgás was founded in 1872 and it is Brazil's biggest gas distributor, it has around 1,7 million residential, commercial and industrial customers. It is a lot of people to support and requires a reliable self-service support for their users, that wasn't the case. The users had trouble finding and completing the service flows. Most of the times they gave up and called the call centre support - which means more expenses for the company. My team at Accenture was hired to design a new version of it, that would solve the usability problems to offer a better service to their clients.

The Approach

We had a short time to deliver this project, we decided to design only the main experience: anonymous/identified homepages and the two most needed service flows. Along with this new experience, we defined the guidelines to be followed by their internal team to update the secondary services. We needed to do this to have more time to understand the current issues and why the users were struggling so much.






Visual Design



1. Empathize

We kicked the project off interviewing the product stakeholders. We learned about the product roadmap and the company's key objectives. To improve their service for the customers, they were planning updates to their internal system. The platform that they were using at the time was sluggish and has lots of technical limitations.
Following these first interviews, we went to see by ourselves why the users were struggling so much. I'm a Comgás customer but I never needed their support. I logged on my account and started to use the self-service support. This was how the homepage looked at the time:


We analysed the homepages (anonymous and identified view) and all the service flows. Almost all services require a lot of data from the user, but the input forms weren't well designed at all. Some of then needed a click on a button to validate the information.

How a service flow looked like

There weren't UI feedbacks for the users, it was a really hard experience. There were some technical support services that require payment, but the customer only knows how much it would cost when the technical staff arrives at their homes. It wasn't a surprise when I tried on mobile and make sure that it wasn't a responsive web service.
The next step was to listen to the users at the call centre. We found that most recurrent queries were:
Myself and the clerks
1. Change the name of the invoice owner. In Brazil, whenever you move from one house to the other, you need to change the name of the invoice owner for the basic needs services (water, light and gas). Even if you're renting the place.
2. Generate a new invoice. This was only possible to do by the self-service support, the call centre clerks always explain to the user how to enter the self-service support.
3. Turn the gas on/off. Normally needed when you'll spend a long time without using gas.

2. Ideation

Another big issue that we found in our analysis was some misleading labels. The services names weren't clear, some of them were similar to each other. They also weren't organised in any way to be easily located by the user. We started our ideation phase solving this.
We sent a taxonomy survey for users to understand the better way to call each service. Each survey question explains the service in an unbiased way and asks what is the name option that represents better this service. For the answers, we created 3 new ways to write each service name. Along with these new ways, one option was the current name.
To organise the services in the proper way, we invited some users to card sorting sessions. We did two ways of card sorting. First, we wanted to get a sense of how the users would divide these services and how they would call these groups.

Card sorting sessions
The first sessions generated 4 groups. To test if these four groups really make sense we did more card sorting with the users. But this time they were asked to distribute the services into these four groups.
With the services properly named and divided, we went ahead and defined the new sitemap. To make sure the new structure will be feasible, we started to wireframe the future solution to validate it with the Comgás product team.

3. Visual Design

Now that the new experience was designed on wireframes, it was time to add delight to the experience. I started defining the colours and typography to be used based on their visual identity. After, I designed the main UI elements: buttons, forms, steppers and so on. From a visual point of view, everything needed to be changed. Beyond the usability issues, the old UI was visually dated. It had poor use of colour, the elements had weird sizes and shapes, none of this was delightful.
Main UI Elements

Mobile fisrt

Starting the experience from the missing part
To design the new experience I used the mobile first approach. When I finished the main mobile screens, I prototyped the experience and tested some hypothesis with users. For example: at first, we designed the service cards using two columns cards on mobile. But the services on the right column was harder to scan than the ones on the left. I tested it against another version, that has only one column, like a list of cards. The guerrilla tests proved that on mobile, users find the desired service much more easily with the list view.
List view X two column cards

4. Delivery

At the end of this short project, we delivered the new main product experience and the assets that we generated. This would be used by their internal team to design and implement the secondary flows. The design of the screens was made to be responsive. We designed for the worst case scenario, lots of users are still using old resolutions.

Home - Anonymous view

Before user authentication
Most users only access this product if any service is needed. We made it simpler for who seek support service on the anonymous view. The new groups help users to find the services in an easy and faster way. Each group has its colour, making it easier to recognise the services. Users just need to choose the service, authenticate and go through the steps of the service flow.

Service flows

For the service flow, we designed the two most frequented services. We improved these flows removing redundant steps, adding loading feedback for dynamic fields, adding a technical service list with price, improving the calendar system for schedule technical visit, improving the widget to upload attachments.
Steps of 'Turn the gas on/off' service flow

Home - Identified view

After user authentication
At the authenticated home, users have a dashboard. Essential information and access to all services are displayed on it:
  1. Latest invoice with easy access to pay it
  2. Notice banner space, for occasional warnings or institutional campaign
  3. Customisable service shortcuts (for frequent users)
  4. Timeline to browse the history of usage
  5. Widget to Inform gas meter level (some users need to inform their own consume)
  6. On mobile, the services menu became a navbar that follows the user through all navigation

Next Steps

The product team was in love with our delivery. I really enjoyed our design proposal, considering the time that we had. Following this, the product team would develop and scale the other service flows. Our delivery also was designed to give room for the new features that was on the roadmap.