LubePro Global

Redesign of an existing solution to improve customer relations and user experience.

Role

Figma, Adobe CC

Date

2018

Timeline

8 months

Tools

Sketch

Challenge

The current LubePro app made it difficult for technical advisors (TA) to capture and analyse data from customer site visits. Often, it was quicker for a technical advisor to use their phone camera and a manual notepad or note-taking app.

Rigid workflows in the app prevented technical advisors from building rapport with customers while on-site visits and ended up creating more work and getting in the way.

Discovery

"The customer will get bored, " technical advisors told us during interviews. When customers agree to allow a technical advisor onto their plant or warehouse, they are accompanied on a site walk.

Instead of discussing work with the customer, building rapport and upselling, they were buried in their iPhones or iPad, trying to use LubePro — or giving up entirely..

After interviews and synthesis, I worked with our UX and service designer to 'promote' the findings in our office.

We had to rethink how we'd approach LubePro as we transformed and eventually relaunched as LubePro Global.

Design

All of Shell runs on Apple devices; we knew the iPhone was suitable for this task, but I wanted to push the boat out and add a solution that works on iPad, too—entering data on an iPad looks less antisocial than on an iPhone, which might look like texting.

Working in Sketch, I grabbed the latest library of Solaris, a design system I was co-creating for Shell simultaneously. Luckily, with a few line items, note-taking space and camera capture, most states were covered.

New to LubePro was the option to set up a 'site assessment' before arriving on-site with a customer. Site assessment and gear inspection were two critical activities for the app.

On this dashboard, technical advisors can see their activities.

Because the app was internal-facing, we had permission from Shell Brand to venture away from their palette, type styles, etc.

With our styles, we could prioritise conventions such as 'recognition over recall' and mirror UX seen in consumer apps that the technical advisors used outside of work.

Data capture

The most important piece to get right in this redesign was structured data capture. The tension between flexibility and having useful data persisted with every solution we tried.

Should we start with a Shell Lubricant or the application, it's used for? If a technical advisor sees a drum of a lubricant is it more important to note what it's used for or who makes it? Let's decide together.

I ran a crazy 8s session. I grabbed a bunch of markers and this film paper that can stick to any surface. I ran a session that gave everyone 8 minutes to sketch 8 ideas for lubricant capture, and we reviewed them as a team.

Everyone had 2 minutes to walk through their ideas, then we had 2 minutes for questions.

Eventually we landed on a solution that allowed both lubricant-first and application-first data capture.

Even better, we added a database connection (that worked offline!) where we could enter an application and see what the best Shell Lubricant would be. No longer did technical advisors need to remember hundreds of products.

Confidently, they could recommend a Shell Lubricant.

Wireframes from our UX designer and my designs via Solaris design system.

Note-taking

Alongside data capture was the note-taking. During a site assessment (for example) technical advisors can take notes and photos of what's happening on-site. Notes can be tagged as 'best practice' or 'room for improvement'.

Anything marked 'room for improvement' was a huge opportunity. That's where the technical advisor can have the greatest impact.

But we didn't just want plain text notes any longer. Considering how many technical advisors were often using their phone cameras simultaneously, we wanted to support adding images to notes.

Upon export, each note was a slide in a Powerpoint presentation. I supplied Powerpoint formats supporting text and 1, 2 or 3 images.

UI review as a team — you can see I was considering up to 5 images per note.

Finally, we landed on up to 3 images per note and added a screen to view notes, their tags, note content and images in one place.

New notes can start with an image, text or a lubricant, and the export Powerpoint requires little to no editing before sharing with a customer.

Thew new site assessment overview page.

Development

Four engineers (two back ends, two front ends) powered LubePro Global towards launch, ensuring it's a reliable, secure platform that doesn't get in the way of our technical advisors.

A highlight for the whole team was a technical spike which we later shelved where two iPads could locally edit the same Site Assessment activity within range over Bluetooth.

I worked very closely with the front-end team to ensure I was never a bottleneck. As the project used Sketch, when I wasn't sitting alongside them, I continuously pushed the latest versions to the cloud with Abstract to keep us on the same page.

Results

The LubePro Global redesign has had a significant impact on Shell's field operations, providing several benefits, including:

  • Increased flexibility: The ability to customise the app to the specific needs of each customer and industry allows for more accurate data collection and analysis.
  • Improved efficiency: The redesign streamlines the data collection and analysis process, allowing advisors to spend more time with customers and less on administrative tasks.
  • Increased effectiveness in a global market: The adaptability of LubePro Global to different regions and languages makes it more effective in a worldwide market.
  • Better data management: The digital nature of the app allows for easy sharing and analysis of data within Shell, providing valuable insights into customer needs and usage patterns.
Team LubePro Global in London.

The redesign of the LubePro app to LubePro Global has been a significant improvement for Shell's field-based technical advisors, providing a more flexible and efficient digital solution for capturing and analysing data from customer site visits.

This case study highlights the importance of redesigning and updating technology better to meet the changing needs of customers and the market.

But wait, there's more...

Read another case study

Shell MarketHub

$19B e-commerce platform redesign
UI, UX, Design System, B2B

Shell GTP

Traceability on bottles, cartons, pallets
UI, UX, B2B

Hive Home

Design system for a smart home co
UI, UX, Design System