Back to the homepage


SCOL (Shell Card Online) is a system that allows companies that employ drivers to have a prepaid card that allows them to buy fuel and other products while they're out on the road. These companies may range in size from a small family owned business to a giant company like Toyota. Foolproof had previously worked with Shell on SCOL a long time before I joined, but that had tailed off. In the mean time modern web apps had set users' expectations for looks and performance higher and the old system didn't fare well by comparison. In 2017 we began working on a new SCOL, with a brand new modular design that would be able to be rolled out across future features that hadn't even been dreamed of yet.

I led the front end development of this modular design, and built a pattern library of reusable, responsive components.

The Tech

  • ES6 modules in Vanilla JS
  • Babel & Webpack
  • SCSS
  • Assemble (static site generator) to present the patterns in a library and form the basis for documentation of when you should use this pattern and how to use it

The Result

I'm really pleased with the result. We managed to turn quite a dry and complicated subject into something that is attractive and simple to use. And we managed to do it modularly to give Shell a series of patterns that they can use to implement future designs whilst maintaining consistency with the work that's already been done.

The following are screenshots taken from the build:

SCOL pages on mobile

SCOL Order a Card page

SCOL Card Details page

SCOL Recent Transactions page