Internal B2B Site Survey App

Shell · iOS · Sketch · 2019

Shell’s field-based technical advisors visit customer sites to identify areas for improvement and potential cost savings through improving lubrication and maintenance practices. The LubePro app captures structured data from these visits and generates a sales presentation.

The problem

“The customer will get bored”, that’s what Shell technical advisors told us when we asked: What’s the number one problem with LubePro? They explained they want to capture information without being buried in their phones and that the current app often hinders this process.

  • Rigid interaction based on the underlying technical model
  • Difficult to interact with customer
  • Using the app on-site seems antisocial
  • Slow note-taking experience (users revert to camera + Apple Notes)
  • A presentation cannot be generated from messy data

My role

I led user interface design in a design group including one service designer and one user experience designer. Together we crafted LubePro Global with engineeers, a business analyst and product owner. 

A quick huddle to review some iOS directions

Solution

  • Quicker note-taking system to rival phone camera and Notes app
  • Facilitates structured data capture
  • Works on iPad which seems more professional, less antisocial
  • Designed with a presentable output in mind

The LubePro Global solution starts before arriving onsite. Preparations can be made ahead of time including entering the site information, the date of the visit and the type of visit carried out, e.g., site assessment. This saves the technical advisor time and helps them get the details right about the customer they’re visiting. If these details are wrong and the final report lands in the wrong hands things could get messy.

Set up ‘activities’ before arriving on-site

During the visit, new notes can be created quickly. They can also be created independently of where you are in the note-taking flow, e.g. if you’re in a note you can quickly create a new note without navigating back to the home screen. Finding a way to instil trust (for example, teaching the user that your current note is safe) when starting a new note mean some trade-off for speed. If you’re typing, you must tap [Done] then tap again in the same part of the top bar to create a new note.

In addition to this streamlined note creation architecture, new notes can start with a photo. The user can quickly launch the camera for taking photos then attach these to a new note. Working examples could be taking 1 photo and adding it to a note or taking up to 3 photos and attaching them to a single note.

Note capture with 3 images and structured categorisation

With images, we wanted to let the technical advisors highlight particular parts with annotation. This annotation is kept separate in the site visit export for manipulation later. Helpful if an advisor wants to remove annotation upon review. Initially, I designed this with just red and yellow (Shell brand colours), but it quickly proved insufficient, so I added more colours to work across a wider range of images.

I redesigned a new form for capturing structured lubricants. There’s a camera icon here to open the camera so a technical advisor can take a photo of a lubricant if they don’t have time to enter details.

Work in progress lubricant capture

If the TA has time, they can enter details, and if a competitor lubricant is mentioned, the system will recommend a Shell alternative. This saves time and thinking so the technical advisor can get back to building a rapport with a customer.

Once the technical advisor is finished with a site visit, they can share their visit notes to a Shell email address. The back-end will generate a Powerpoint presentation intelligently curating the captured notes for showing a customer.

Approach

I made sure to work very closely with the user experience and service designer towards the project’s start helping with usability testing. I ran a few sessions with Shell colleagues in the US and helped with note-taking and help me better understand the user’s pain points.

Once we’d done enough customer research and spoken to users from the current experience, and seen how they struggled, I co-facilitated a workshop with the team where we ran a crazy-8s exercise. Crazy-8s is a tool where we can all quickly solutionise some loose ideas based on what we know. Afterwards, we vote on all the ideas and formed wires as a team to expedite this step.

Reviewing crazy-8s ideas

I then moved on to creating UI designs to test high fidelity on sections we were more confident in white usability testing with the wires continued in the background. Often and early, I called our team members together to share what I’m working on, review the direction I’m taking and see how I can improve things.

Team user interface reviews — helpful as I’m new to the world of lubricants

This began with an audit of the current solution and stock of the current designs (none existed) and lo-fi rebuilding them in Sketch.

I had several limitations with the UI. We had to incorporate a new internal design style which was incomplete and not quite ready for iOS, and also had to keep things relatively native for a faster build time. Working in sprints, we managed to develop a big chunk of the app.

Today

An internal tool, LubePro Global is not accessible outside of Shell.