Shell - Saas ‘Demand’, website refinement
Position
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
Problems
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
Possibilities
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
Old Homepage.
Heuristic 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?
Heuristic 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?
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.
After
Heuristic improvements
Improved visceral comprehension and scannability by reducing duplicated content
Re-sized panels to provide ‘additional content’ visual queue = Improved content comprehension
New page scroll buttons, top right + gradient over third panel to suggest more content is available off-screen = Less overall content, page is easier to comprehend
Removed duplicated legends = Removal of extraneous noise
New product titles added to each card = Clear single-use sign-posting
Re-worked primary nav = Improved functional logic
New feature ‘Export data’ button = Newly identified ‘required’ feature
New global left hand nav + New icons = Helps to standardise UI usage
New ‘Export data’ overlay concept = Allowed user to customise data by adjusting variables and being able to download bespoke chart for sharing purposes (screen below this one)
New Homepage
New ‘Export data’ overlay button
activated via ‘Export data’ button located top right of screen
I worked closely with the Lead Engineer of this product to understand his needs and uses, its purpose - today and tomorrow and, to create something that anyone could use, especially as there were plans to introduce others to this app.
The new design improved overall page comprehension and lightened page weight considerably due to the reduction of duplicate pieces of info and adherence to standardised UI library components.
The new design was completed in four days, validated through regular reviews with the sole user (a Lead In-house Trade, who was also the Lead Engineer for implementation), and the Project Manager for delivery timelines before moving into the build phase.