[{"document_url": "https://www.simondrexler.com/hydrogenfuel", "unformatted_src": "https://static1.squarespace.com/static/5315e2f9e4b0e9099c5a6284/t/5bcda76ceef1a115dd9d000c/1540204404651/hero+alternative.png", "src": "https://static1.squarespace.com/static/5315e2f9e4b0e9099c5a6284/t/5bcda76ceef1a115dd9d000c/1540204404651/hero+alternative.png", "formatted_filename": "hero alternative", "alt_text": "hero alternative.png"}, null, {"document_url": "https://www.simondrexler.com/hydrogenfuel", "unformatted_src": "https://static1.squarespace.com/static/5315e2f9e4b0e9099c5a6284/t/5bcda7b00d9297e211e6a44c/1540204465674/*overview.png", "src": "https://static1.squarespace.com/static/5315e2f9e4b0e9099c5a6284/t/5bcda7b00d9297e211e6a44c/1540204465674/*overview.png", "formatted_filename": "*overview", "alt_text": "*overview.png"}, null, {"document_url": "https://www.simondrexler.com/hydrogenfuel", "unformatted_src": "https://static1.squarespace.com/static/5315e2f9e4b0e9099c5a6284/t/5bcda7efa4222f55bddc46b7/1540204578676/Prototyping.png", "src": "https://static1.squarespace.com/static/5315e2f9e4b0e9099c5a6284/t/5bcda7efa4222f55bddc46b7/1540204578676/Prototyping.png", "formatted_filename": "Prototyping", "alt_text": "Prototyping.png"}, null]
Hydrogen fuelling. For a better, cleaner future.

Shell (2017)



Designworks was commissioned by Shell to develop the design of a new hydrogen dispenser to enhance the future refueling experience.

We developed an iconic design, both analog and digitally, that is primed to become a flagship on Shell forecourts across Europe. Additionally, the design is adaptive enough to include possible future expansions and service additions. 2017, Mobility

Client: Shell

Ideation, Visual Design development, Concept development, wireframing, Ix Design, UX Design, Prototyping, User Testing

A textbook IxD Process

How to fuel?

While the industrial design was in very capable hands, I was tasked with design the user flow and interactions. Using the redesign as an opportunity for a new fueling experience, I created a simpler, yet more engaging experience.

Wireframing, Testing, Designing

Throughout the process I put a very strong focus on the user: how do they feel, what do they need, what's useful. Very early on I started prototyping to conduct little in-studio user tests to find out people's perceptions and interaction behaviors.

Prototyping for the big screen

This project was a challenge in its sheer (screen) size. In order to create a showable demo, I needed to simulate a full-scale 4k portrait touchscreen that would fit into the final prototype and demonstrate the main features.

After testing several prototyping tools, I settled with a combination of Axure and proto.io, which allowed me to create one demo prototype and one mobile prototype that the client and audience could "take home". Rapid prototyping

Albeit there was no extensive ethnographic research done on this project, I made sure to test my designs incessantly. Very early on, I used printouts on a styrofoam (live sized!) model of the pump station. Lateron, I used digital solutions, especially proto.io and Axure to create demos and working prototypes for mobile phones and a demo screen.

The testing gave me important insights that I would've missed otherwise, for example place buttons in the lower half (to increase accessibility) and to change layouts to show private information - if only - on the bottom (where it would most likely be covered by the user).

Designing for trust, emotion and persuasion

Often, Hydrogen is still seen as unsafe or dangerous, even though those stories belong to the past. Today, it is something safe, something sustainable, something good.

In order to communicate that, the design is based on three goals:

Trust. Through feedback and assurance, it establishes credibility.

Emotion. Through a friendly visual language, it invokes familiarity, helping over the fear of the unknown.

Persuasion. Through a clear Information Architecture and clear Call-to-Actions, the design is both, easily usable but also inviting to engage.