.png)
Overall Outcome
Due to the project's complexity and scale, tracking exact numerical outcomes has been challenging, with many moving parts across various pages. However, in the first 3 months post-migration, we saw the following immediate gains compared to pre-migration data YoY.
Research
Before deep diving into the problem solving, my team and I firstly conducted the following testing and research methods:
Insights Top-Finding
After completing the prep work, we categorised users landing on our site into two cohorts: prospective (acquisition) and existing(retention) users. Since each cohort has different needs and motivations, we must define them to create a better experience for each page,
Problems Findings: What Can We Change?
While researching the website's current state and user needs, I also identified UI/UX improvement opportunities. Using above research results and observations, I conducted a two-week workshop with other departments to uncover urgent issues and their problems and needs. Here is a summary from different perspectives:
User Flow
Here is the previous user flowchart version (from the homepage to a specific vacuum cleaner model’s PDP page. Users face a cumbersome navigation process, with some pages, like the product overview page, being inaccessible. It takes a prolonged journey to reach the desired product detail pages.
Slide right to view the revamped user flow >>>
We then decided to completely refresh the navigation interface and flow to ensure users can see all products at a glance, well categorised. We also restructured the homepage, adding a category panel below the banner to give users a better understanding of Dyson’s products.
.png)
In addition to optimising the user flow, we added comparison functions on each category page, related products and ratings/reviews on PDP pages, a tools and accessories page, a newsroom, support with user manuals, live streaming, sustainability, and case studies for business products. These enhancements help to speed up the purchase journey and enrich product education, while also significantly improving SEO ranking and click rate.
Notable Design Outcome: Category & PDP
Through our research, we discovered that 93.1% of users who visited our category page were interested in purchasing a product from us. However, there was significant discrepancy between this high intent and actual conversion rate. Additionally, with a daily average bounce rate of 31.31%, it was the worst-performing category page despite its high acquisition potential.
Notable Design Outcome: Navigation
Navigation is very important for websites; good navigation speeds up searches. The previous UI design made it hard for users to quickly reach desired pages, causing them to explore the entire site. We proposed adding icon navigation at the top of each category page, similar to Apple's website. However, tests in the UK showed poor results because replacing the mega menu with direct category navigation forced users to switch between pages to browse different product branches. To solve this, headquarters decided to add a hamburger navigation menu to the web pages. There are too many top navigation styles (3 types) due to this.
Although these changes optimised the design and interaction of the category pages, they had a negative effect on the overall website and SEO. Therefore, we propose optimising the original mega menu, which inspired the headquarters' digital team to both emulate and improve upon our approach.
Notable Design Outcome: Other highlights
In addition to the previously mentioned pages, we also optimised the UI/UX of other key pages, including the home, overview, accessory, and support pages. We developed a comprehensive design system for the Chinese digital market from the ground up, localising global components, even creating new visual-appealing animated assets tailored to the local market.
Cinemagraphs are used to display core technology, creating an engaging look and enhancing the content.
The above Interactive element allow users to engage with the content in a more active and dynamic way.
Users can preview technology videos while also seeing text & product information with clear product technology images. If interested, they can click to watch the video.
This layout on the mobile version prevents issues with dark videos and overlapping text.
UI Guideline
Since this project involves multiple departments, with development and operations outsourced to third-party companies, and requires internal coordination with the CRM, marketing, and IT accounts teams for all UI details, we have created a UI Guideline PDF, built upon the Figma components library, to standardize processes for departments without access to Figma or Sketch.
* Since the scope of work for this project is too huge to showcase everything, I will only be highlighting the notable ones below.
Design Outcome
This was a huge project with over 170 pages needing UI redesign and UX refresh. Prioritization was necessary, so I categorised them from P0 (most urgent/backend integrations) to P3 (cosmetic front pages). This systematic approach allowed design, content, development, and growth strategies to progress concurrently.
* Since the scope of work for this project is too huge to showcase everything, I will only be highlighting the notable ones below.
Slide right to view the refreshed UI >>>
Overall Outcome and Impact
Due to the complexity and scale of this project, tracking the exact numerical outcomes has been challenging, with many moving parts across different pages even to this day. However, within the first 4 months post-migration, we observed the following immediate wins in our analytics compared to pre-migration numbers.
.png)
Reflection
It was a large project that lasted several months. It requires ongoing maintenance and updates to adjust to changing business goals and organisational shifts. As the lead UI/UX designer, I was wearing many hats, having to communicate and negotiate directly with stakeholders, other departments and out-sourced agencies, while also handling several other projects. Additionally, the digital team was reorganised specifically for this project and consisted of only two people, which presented many issues and challenges in terms of workload management.
