My scope of work
UX discovery > Content strategy > Schematics > Wireframes > Full mobile-first web design > Leading and nurturing my own team of Junior Designers
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.
A place for educators and parents to request engineering resources direct from Dyson get their children hands-on with STEM.
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.
Previous JDF website (archive.org)
Site map for primary educator audience
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
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.
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
A place for Graduate Engineers to get exposure on their inventions and enter competitions with prizes up to £30,000.
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.
Previous JDA website (archive.org)
New JDA site map
JDA page flows
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
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
Full rollout of the new dyson.co.uk e-commerce website in Canada
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.
Previous Dyson Canada website (archive.org)
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.
The future for Dyson