Dyson

Accelerate global reach of the James Dyson Foundation and Launch Dyson's e-commerce website in Canada

Client

Dyson

Duration

2 years (Contract)

My scope of work

UX discovery > Content strategy > Schematics > Wireframes > Full mobile-first web design > Leading and nurturing my own team of Junior Designers

My role

I joined Dyson as a freelance UX/UI Designer back in 2016 to reimagine both the James Dyson Foundation and the James Dyson Award. Working with a team of developers, we launched the sites alongside Dyson's biggest digital transformation in over a decade.

After successfully launching both websites, I was then given a freelance Senior UI Designer role and my own team of Junior Designers to take the entire e-commerce platform and launch it in the Canadian market while reporting directly to the Head of Digital Design.

The James Dyson Foundation

A place for educators and parents to request engineering resources direct from Dyson get their children hands-on with STEM.

Audience

Educators and parents

Insight

Children learn hands-on

Output

Responsive website

CMS

Umbraco

The problem

The JDF already had a website where teachers, students and parents could request engineering boxes for learning, but Dyson's entire e-commerce platform was going through a huge transformation and the Foundation was included in the scope of work.

The Foundation's website was off brand, it felt completely separate and didn't incorporate Dyson's UX Design Principles, communication style or brand values.

Key insights from testing found that users didn't understand what the JDF was offering and if they did, they found it difficult to understand which resources were right for them.

View on archive.org

Previous JDF website (archive.org)

The solution

A clear user journey

Dyson's digital e-commerce transformation followed a set of strict and strategic principles which I discovered could be 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 found in user testing, feedback and discovery.

Download JDF UX Principles .pdf

Site map for primary educator audience

Page flows

Working closely with the JDF product owner and the strategist working on the e-commerce site, we took the core JDF UX principles I previously outlined and used those as a guide to create a content strategy for each page on the proposed site map.

This exercise had to be completed for each of the markets we were launching in which included the EU, North America and Japan.

Page flow schematics for the US market

Wireframes

The next phase of the project was to take all of the discovery guidelines within the page flow schematics and begin exploring content and layout suggestions in the form of high-fidelity wireframes.

As you can see, the strategy outlined in the UX principles was carried on throughout and each page included careful consideration as to what the user would need to think, feel and do in order for each page to successfully do its job in the user journey.

Designs

Incredible resources, amazing projects

The overall design of the JDF site needed to incorporate its own brand which already existed to separate itself from product and e-commerce. The Foundation provides resources to those new and familiar to STEM subjects in schools while also being a Dyson initiative.

With this in mind, the design needed to be approachable, informative, responsive, highly accessible, and scalable for new projects and content, while also having references back to the new UI devices found in the e-commerce platform such as menus, icons, fonts, buttons and links.

View it live

Full scale UI kit

After designing a few signed off pages, I then created a fully scaled UI kit to hand to developers to begin building all global elements, styles and scale effects based on my chosen grid and spacing guidelines. This significantly sped up the development process and enabled the developers to get coding sooner.

JDF UI kit

An engaging place to learn engineering

One of my favourite parts of the James Dyson Foundation was their Engineering Challenge Cards. Aimed at children aged 7+, parents and educators could download and take on the Challenge Cards and watch the videos to complete fun and engaging briefs that solve fascinating engineering problems.

Challenge Cards - Spaghetti Bridges

An easy way to request resources

One of the problems the new website needed to solve was that it was difficult and time consuming for users for request the right resources. Before, users needed to fill out a PDF form and send it in an email and hope that the requested dates were available.

Now users can select the resource they want, select from a list of available dates, add their details and resources will be delivered to them free of charge.

Resource request form

The James Dyson Award

A place for Graduate Engineers to get exposure on their inventions and enter competitions with prizes up to £30,000.

Audience

Engineering students

Insight

Inventors deserve recognition

Output

Responsive website

CMS

Umbraco

The problem

The old James Dyson Award website sat within the Foundation's website and user journey which created several limitations on what was achievable using the technology shared by both. Also, just as with the Foundation's website, the James Dyson Award needed to be updated alongside the company-wide digital transformation and be on-brand.

View on archive.org

Previous JDA website (archive.org)

The solution

A new place to showcase

The James Dyson Award website now pulls information from its own database and runs on its own CMS and global UI, giving us freedom to design new components for projects, forms, and conditional alerts. We also created an entirely new back end where graduates could login and upload their projects to enter the competition and keep track of the judging process.

To achieve this I produced a new sitemap and set of page flow schematics based on the same UX principles created for the Foundation. This enabled the user journey to relate to the Foundation and give reference to the devices found in the product and e-commerce platform.

View it live

New JDA site map

JDA page flows

Wireframes

Due to time constraints, another UX Designer created wireframes for the James Dyson Award while I was finishing off the Foundation's site. So, I've only got a handful of wireframes which I created for the home page and the project filtration.

With hundreds of entries into the Award every year and with a backlog of past year's entries, filtration was important for students and enterprises to be able to search through the entries to find inspiration and employable engineers.

Landing, project, and project filter wireframes

The design

Process and output

As per the Foundation, the James Dyson Award website needed to follow in terms of the UI, with minor changes such as accent colour and image style to differentiate between the two.

The most design intensive components which were new were the project galleries which required thumbnails, titles, and descriptions of the project, as well as the project pages, forms and back end.

Download design .psd

Project filters

As mentioned, with hundreds of new entries every year and with even more in previous years, projects needed to be filtered by date, category, topic, region and competition prize tier.

I created a responsive accordion solution where users could switch options on or off and apply or clear to default filter settings.

Responsive project filter designs

A completely new back end

Competition participants can now upload multiple projects to multiple categories by providing metadata, descriptions, images and videos directly to the database and manage their entries in the back end. This also enabled JDA moderators to notify entries whether or not they required more information, or even if they had won or were unsuccessful.

Scalable UI kit

As with the Foundation, a full scalable UI kit was produced after the first key pages were signed off to enable developers to get coding sooner. This significantly reduced dev time and helped us rollout the new site in time for the 2016 James Dyson Awards.

JDA mobile UI kit

Dyson Canada

Full rollout of the new dyson.co.uk e-commerce website in Canada

Output

Responsive website

CMS

Adobe Experience Manager

Design team

4 Junior Digital Designers

Time

6 months

The problem

The new Digital Leap e-commerce platform had launched in the UK and was in the process of being built for the USA market in-house at Dyson's HQ. The next market on the list was Canada which still ran the old website and technology.

The old website wasn't responsive and mobile users were redirected to a separate mobile site. The ultimate goal was to generate more conversion direct from Dyson worldwide so the complete overhaul of Dyson's digital strategy was in great need of a huge transformation.

After the JDF and JDA sites went live, I was brought onto Digital Leap to rollout the same customer experience for the Canadian Market.

View on archive.org

Previous Dyson Canada website (archive.org)

The solution

A perfectly consistent rollout

In order to achieve a consistent customer experience we needed to utilise the new e-commerce UX design principles for the UK and had to keep to a very strict set of web, imagery, and accessibility guidelines while also catering for the Canadian market's requirements.

We began by triaging product categories and market requirements, then began marking up a snapshot of the previous rollout to include all the new Canadian-specific elements in the schematics. My designers had the huge task of designing all the relevant page changes, adding them into the layout and making sure their assets could be correctly handed over to the content administrators to be built into AEM.

My role involved getting hands-on, nurturing the new talent, ensuring guidelines were being met, and signing off the completed designs before sending to build.

View it live

Triage schematics

Consistent changes across markets

Every product variant had different specs, images, colourways, SKUs and technical specifications which needed to be altered. Not to mention translations for both Canadian English and French Canadian.

There were also huge amounts of overview, technology and engineering pages which had market-specific content and design requirements, but I've limited this case study to one example showing the differences between a v7 cord-free stick vacuum for both the UK and Canadian markets.

Dyson UK

Dyson Canada

The future for Dyson

What's next?

Since leaving Dyson in 2016 to travel, it doesn't look like much has changed, which is a testament to the work I completed on the James Dyson Foundation and Award websites, and to the work my team did on the Canadian rollout of Digital Leap. The websites have longevity and scalability, so I'm sure they will make good use of them for many years to come.

Next project:

Work with me, baby!

Get in touch

(+44) 07934014543