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.
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.
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:
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.
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:
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.
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.
The user can send comments that will appear in the email sent to the validators, and can attach a file if needed.
The magical matrix determines who are the validators, and who should be informed. On this screen, the user can select two additional contacts.
The offer is submitted 🎉
Here is a glimpse into the offer approval process: