Shell - Saas ‘Demand’ refinement

Before

The Shell Demand team focused on understanding global demand for hydrocarbon-based fuels. This project began as an exercise in providing Shell’ in-house traders with the best knowledge possible to help them make quicker / more informed decisions via an internally developed on-demand website.

The current design, although functional, had developed over time without much UX/UI input resulting in feature-creep and a confusing and, at times, inconsistent use of UI, and interaction feedback.

My heuristic assessment fell into two categories, refinement observations and questions, which I put to the; primary Stakeholder (and sole user), Project Manager, Lead Engineer and Design Lead, to understand historical decisions and issues before I could explore any insights.

Refinement observations

  • Visually complex = high cognitive load

  • Repetition of vendor and baseline Legends

  • Tabs are Menu items, not tabs

  • Too many individual panels

  • Make data points and Legend points look clickable

  • How will user know how to scroll to content off-screen?

Refinement questions

  • What are our nav / CTA styles?

  • What is our dark mode tool-point style?

  • Why are the graph lines opaque?

  • What colour should the graph lines be?

  • Vertical text set to bold, is this ok?

  • Should X and Y axis values be solid white + sizes standardised?

  • What should font size be?

  • Export CTA has a brighter key-line, same as inactive Filter button., Is this ok?

  • We should probably add a descriptive header above graphs to explain Menu selection. Is this ok?

OLD UI DESIGN. Dark UI - Homepage.

After

Refinement list

  • Combined products into single panels = Simplified page comprehension

  • Re-sized panels to provide ‘additional content’ visual queue = Improved content comprehension

  • Added scroll to new content arrows, top right + Added gradient over third panel to suggest more content is available = Improved content comprehension

  • Removed duplicated legends = Removal of extraneous noise

  • Added product titles to each card = Clear single-use sign-posting

  • Re-worked primary nav = Improved functional logic

  • Added new feature ‘Export data’ button = New required feature

  • Added new global left hand nav + new icons - Standardising UI usage

  • Developed new ‘Export data’ overlay concept = Allowed user to customise data by adjusting variables and being able to download bespoke chart for sharing purposes

During the discovery and planning stages, I spoke to numerous stakeholders before identifying key areas to resolve. All of my suggestions fell into two areas; reducing complexity / standardising UI.

NEW UI DESIGN. Dark UI variant - Homepage.

NEW UI DESIGN. Dark UI - ‘Export data’ overlay, activated via said button located top right of UI.

NEW UI DESIGN. Light UI variant.

Result: The new design was developed within four days and validated through reviews with the sole user (a Lead In-house Trader), the Lead Engineer for implementation, and the Project Manager for delivery timelines before moving into the build phase.

Contact me