Image

A process that saved hours of work, and millions of revenues.

The client of this case study is one of the world’s largest steel producers, with an annual crude steel production of more than 100 million tons per year. It is ranked in the 2017 Fortune Global 500 ranking of the world’s biggest corporations. A lot of the products made with steel that we use on a daily basis, like cars and electronic devices, have been handled by this client at some point.

In order to protect the client’s business, interests, and data, most UI elements and processes are hidden in the following case study and don’t fully reflect the complexity of the actual process in place.

CHALLENGE

Over the past years, the client has developed a unique tool on the Salesforce platform in order to power the B2B sales activity. The company’s sales teams from all over the world use this tool on a daily basis in order to manage business opportunities, and prepare offers that perfectly fit their clients’ needs. A powerful pricing technology using algorithms several databases has been developed and automatically calculates negotiation prices. Thus, sales teams use a in-house CPQ to generate offers.

These sales offers used to be calculated and made on Excel, and there used to be many email exchanges and meetings to come up with final decisions. This context was a huge opportunity for process automation, and my challenge was to get it done in various ways. For example with the approval process for offers detailed here.

USER EXPERIENCE

The project I was working on had more than 2000 users around the world, and these users had various levels of digital literacy so we had to keep it in mind when designing complex processes. Above all, we had to keep it as simple and automated as possible. We had the following criterion:

  • There would be up to three validation levels, depending on the total price of the offer. Above a certain price, top management should be involved in the decision making.
  • Validators are different from a country to another so we needed an easy way to map them.
  • Several contacts should be notified each time the validation status changes.
  • Notifications should be sent on the platform, but also with emails.
  • Users asked to have the possibility to select optional contacts that would also be notified.
  • Validators would receive email summaries and have the ability to approve, reject, and comment the offers directly from their email clients.

Actively working with the client during workshops in order to define the business needs, we involved the business and engineering teams, and came up with the idea of a decision matrix that would reflect the complexity of the offer approval process that we needed to put in place. This would allow us to create an almost fully automated approval process that would result in a wizard.

DESIGNING

As the process was running on the Salesforce platform, I wanted to keep the look and feel of the new Salesforce Lightning UI, so I used the design resources provided by Salesforce Lightning Design System in order to build a coherent interface. Using components helped my engineering team and me with ready-to-go interface elements available in HTML, CSS, and the Sketch UI kit. Here is an example of what the Sketch UI kit looks like for desktop components:

lightning_design_system

Quickly, using Sketch became a core part of my workflow and I started to use the Sketch UI kit to wireframe, and create pixel perfect prototypes for all kinds of projects. Later I used InVision, in conjunction with Zeplin to export specs. Using prototypes greatly facilitated the workshops with the client, as we had better chances to spot pain points and challenges.

The process starts as soon as the user hits the “Submit” button. The submitting action triggers a wizard.

image

The system checks all the details and if the offer is ready to be submitted. If not, it prevents the user from submitting and gives him indications about what should be done.

image

The user can send comments that will appear in the email sent to the validators, and can attach a file if needed.

image

The magical matrix determines who are the validators, and who should be informed. On this screen, the user can select two additional contacts.

image

The offer is submitted 🎉

image

INTERACTION

Here is a glimpse into the offer approval process:

Be nice.
Say hi 👋

Where to find me
Email · LinkedIn · Medium · Twitter · Instagram