Get in touch

Dyson

Their biggest-ever digital transformation

The Dyson websites inside a smartphone and a tablet computer

The JDF (left) and Dyson (right) websites

My role

Senior UX/UI Designer

I joined Dyson as a freelance UX/UI Designer initially to reimagine the James Dyson Foundation website. I was then asked to build and lead a design team to roll out and launch their e-commerce site in Canada as part of Dyson's biggest digital transformation in over a decade.

1/2 The James Dyson Foundation

My scope of work

What is the James Dyson Foundation?

Their core mission is to empower the next generation of engineers by providing free resources to teachers and parents. Resources come in the form of boxes containing Dyson products for young people to learn engineering skills through hands-on disassembly workshops.

Site performance

2017 - 2019

Mobile users

88%

Page visits

146%

Average session duration

33%

Resource downloads

974%

Box bookings

526%

My role

Lead UX/UI Designer

As the only designer, I was tasked with a complete redesign of the James Dyson Foundation website which had to adhere to a strict set of UX and design principles in order to be in line with the e-commerce experience. This proved to be an exciting challenge because for the JDF, we weren't trying to sell vacuum cleaners, we were trying to teach people how to break them.

Digital transformation

A screen shot of the old James Dyson Foundation wesbite

Original JDF website (archive.org)

The problem

Forgotten users

The JDF's website had poor usability and accessibility standards. It was off-brand, it wasn't mobile-optimised and it lacked a clear journey for teachers and parents to download and request resources. Users didn't know who or what the JDF was for.

View on arcive.org

Interviews / Recurring stakeholder themes

Sticky notes with user pains written on them

Pains

Sticky notes with user needs written on them

Needs

Sticky notes with user gains written on them

Gains

Usability study / Key teacher insights

David

Task: Request an Engineering Box

It's really unclear how to book a resource.

Donnah

Task: Describe the JDF and who it's for

Is it a catalogue for students?

Dianne

Task: Explain the resources the JDF offers

I can't tell the difference between the boxes.

Dylan

Task: Describe the resource request form

How do I know if resources are available?

Recurring themes

UX Design Principles

Dyson's e-commerce transformation followed a strict set of strategic principles which I repurposed for the JDF.

I got to work designing a UX and content strategy along with audiences, user types, entry points and site maps based on insights and requirements from user testing and feedback.

Page schematics

A screen shot of JDF website page schematics

Content strategy: Laid out

Wireframes

A mockup of the JDF wireframes

Content pages and forms

The solution

A separate brand, connected to Dyson

While the JDF brand was separate from the e-commerce site, the UX now felt connected to Dyson. Components were shared in their usage, but many of the styles were completely unique.

The page schematics and content flow worked in the same way, and the messaging was just as clear, but instead of selling vacuum cleaners, we were teaching you how to build them instead.

Designs

A mockup of the Engineering Box page on the JDF website.

Engineering Box PDP

A mockup of the Engineering Box hero on the JDF website.

Engineering Box hero

A mockup of the Teacher's pack section on the JDF website.

Teacher's Pack

A mockup of the guided assembly section on the JDF website.

Guided assembly

A mockup of the posters section on the JDF website.

Posters

A mockup of the downloads module section on the JDF website.

Download modules

A mockup of the resource request form section on the JDF website.

Resource request form

Components

A screen shot of the JDF component library

JDF component library

2/2 Dyson Canada

Dyson Canada wesbite design presented inside a mobile phone and a tablet device.

Duration: 9 months

My scope of work

What is Dyson Canada?

A key part of Digital Leap was to roll out the new UK e-commerce website across multiple markets, starting with the US and then moving over to Canada.

My role

Senior UX/UI Designer

After completing work on the James Dyson Foundation, I was asked to form and lead a team of junior designers to roll out the new e-commerce website for the Canadian market.

This involved evaluating every product category in the legacy site, comparing it to the UK roll out, and working within strict market-specific content guidelines, as well as sourcing and briefing new product imagery for every product SKU.

Key leadership duties

Building the team

  • Nurturing and mentoring the team
  • Planning and organising each designer's scope of work
  • Ensuring the team's output met strict deadlines ahead of sprint
  • Ensuring the design system, brand and UX guidelines were adhered to
  • Critique and sign-off of design work

Meet the design team

Who I worked with

A profile picture of Oliver
Oliver Harrison

UX/UI Designer

A profile picture of Lily
Lily Wootten

UX/UI Designer

A profile picture of Lucy
Lucy Watson

UX/UI Designer

Digital transformation

A screen shot of the old Dyson Canada website from Archive.org

Original Dyson Canada website (archive.org)

View on archive.org

The problem

Not optimised, not direct.

To start, the previous Dyson website lacked mobile optimisation, but more importantly, it wasn't in line with their new core business goal; To make over 90% of sales direct from Dyson.

They wanted to achieve this by creating a seamless shopping experience through optimised content and UX on any device, and funnel users through a content strategy that would boost direct sales.

They had achieved this for the UK market, now, it was Canada's turn.

Reviewing and planning Canadian content

A screen shot of some schematics from the Dyson Canada project

Dyson Canada page schematics

The solution

What we achieved

As well as being the fastest Digital Leap roll out of any market, my team designed an experience for Canada which was consistent across all product categories and SKUs while ensuring the value proposition and design principles were met throughout.

Final page designs

A side-by-side comparison between the UK and Canadian versions of the new Dyson website.

Dyson V7 PDP: UK market (left), Canadian market (right)

Want to see more?