For the last couple of months we (the digital team) have been working on updating Vauxhall Fleet's flagship toolbox application ‘Whole Life Cost Calculator’ or as we like to call it in the studio, WLCC (because everyone loves an acronym).

WLCC is a tool that enables you to calculate and compare the costs of running a selection of cars according to your personal ownership profile. It takes into account all known future tax changes and, based on the amount of information supplied, can allow for the possibility that the benefit may move you into a higher tax bracket. The WLCC is broken down into two calculators:

BiK & Running Costs Calculator – for Company Car Drivers – compares the running costs of a company car with other models and manufacturers.

Whole Life Cost Calculator – for Fleet Managers – compares the operating costs of different models and manufacturers, and allows the user to build a fleet of cars based on the list of results generated.

The current implementation of the tool needed a refresh, so we went back to the beginning… the very beginning. We re-evaluated the purpose of the tool.

One of the main challenges came from having to communicate a complicated process with varying options into a clear concise application. So Charmaine rallied the troops and put the team together; Ash saw the brief and rolled up his sleeves, while Steve and I were brought in to add a bit of glamour (so we tell ourselves).

We sat down, discussed, sketched, wireframed and prototyped… then carried out some (translate ‘some’ to ‘many') iterations, and repeated steps until all stakeholders were happy with the structure, layout and functionality of the tool.

As part of this process, we also felt as a team that the current GUI of the existing WLCC, along with the toolbox as a whole, needed a refresh. This coincided with work going on in the studio to develop a new approach to designing interfaces that would adopt and also develop the latest technologies and lend itself to a changing responsive digital environment. We wanted an approach that would help designers and developers carry out their tasks but most importantly, provide a better experience for the user. From this list of objectives came a newly developed GUI concept, complete with it’s own approach, principles and rationale, an approach and concept we have come to call Organic UI.

So what is Organic UI? In a nutshell it is a simple, clear but effective approach to design. It strips away some of the unnecessary clutter of design fluff (but not all, because we all like a bit of fluff), leaving the essential functional elements of a design and displaying it in a beautifully executed layout. Less PNGs and GIFs, more CSS drawn elements. It takes the principles of good design, such as balance, symmetry, tone and consistency, providing the user with clear and consistent structure. Economising by doing the most with the least amount of cues, matching the presentation to the capabilities of the user. Another aspect of Organic UI design includes the use of flat, pastel toned colours (though this is not a key design principle, but more of a style preference). The implementation of intuitive responses to user interaction, which also expands out to the use of more helpful, perosnalised, human-orientated messaging.

Organic UI is still in the early stages and will continue to evolve. This is the first roll out of the approach, and while the principles will remain constant the execution will develop over time, phase 2 roadmap already has a huge list of ‘want to haves along with things that could not be implemented at this stage for various reasons’. The list is continuously growing.

Organic UI is here to stay, and we have since applied this approach to our work for World Vision in developing a data collection and report generation application, helping their field experts to monitor facility standards across the globe. This project is currently in UAT and will be going live shortly, so watch this space.