Shell Distributed Energy
A unified web experience for Shell's Distributed Services, built within One Web and Shell brand guidelines
Shell·Client project
Shell needed a website for Distributed Services that followed brand guidelines and worked within the One Web system. I led UX and UI from discovery through to a scalable design system, delivering a new logo treatment, map illustrations, and 28 webpages.
- Task
- Build a website for Shell's Distributed Services within One Web, including logo, map illustrations, and 28 webpages
- Strategy
- Brand strategy, UX strategy
- Design
- UX design, UI design
- Client
- Shell
Challenge
One Web, one coherent experience
Shell's Distributed Services needed a digital presence that felt unmistakably on-brand while fitting the constraints and components of the One Web platform.
The work started with UX workshops to define scope, create wireframes, and align stakeholders. We met with the client regularly to understand issues and find solutions.
- Follow Shell brand guidelines across logo, imagery, colour, and typography
- Work within One Web's system and component constraints
- Deliver 28 webpages plus new logo and map illustration assets
Discovery
Workshops on user experience established wireframes and the scope of work. The brief was to build Shell a website for Distributed Services, following brand guidelines and what was possible within One Web's system.
That included creating a new logo, map illustrations, and 28 webpages. We met occasionally with the client to understand issues and find solutions as the project moved forward.
Brand foundations & information architecture
Before visual design, we gathered information from Shell on branding: how to use the Shell logo, where and when to use imagery, colours, and fonts. We also clarified business goals and user needs before structure took shape.
After going through brand guidelines and One Web capabilities, we built out the information architecture and wireframes for how the site would work. Navigation, page types, and user flows were agreed before visual design started.
Design and visual system
With wireframes in place, we used Figma to build a design system and component library from the start: correct sizes, fonts, padding, spacing, and colours aligned to Shell guidelines.
We knew which patterns would repeat across 28 pages, so building components upfront future-proofed the UI and kept the experience consistent.
Solutions page layout
Wireframes and UI system
With the information architecture agreed, we translated structure into production-ready UI samples inside Figma.
The result was an easy-to-manage website system: reusable components, clear documentation, and pages ready to extend within the One Web ecosystem.
Webpages
28
Full site scope
Brand assets
Logo + maps
Custom illustrations
Platform
One Web
Shell design system
Output
Figma DS
Reusable components
In the site
Selected screens from the finished Shell Distributed Energy experience, from homepage through to solutions content.
Outcomes
Impact
28 pages shipped
End-to-end site for Distributed Services
A unified visual system and website for Shell's Distributed Services, from UX workshops and wireframes through to production-ready UI, all within Shell brand and One Web constraints.
Scalable design system foundation
A Figma component library built from day one with the right typography, spacing, and colour tokens, making the site easier to maintain and extend as content evolved.
