UI/UX Designer
UI/UX Designer
Volkswagen Canada (2019-2021)
Responsibilities
Sitemap
Content mapping
Content migration (AEM)
Image resourcing
Accessibility compliance audit
In 2019, Volkswagen Global launched its new branding system. It required all VW branches worldwide to redesign and build the new VW websites to meet its new brand guideline.
VW Canada required our team to redesign and build the new website in 5 months. As the lead UX designer for this project, I was responsible for:
​
1. Analysing the old VW website and studying the new VW brand guideline, CMS system, and component library.
2. Collaborating with the data scientists and strategists to deliver the most effective UX solutions by leveraging the existing content and the new guideline to create new IA, sitemap, content map, wireframes and prototypes.
3. Content migration to the new CMS.
4. Accessibility compliance audit.
​
Impact:
​
New website launched on time. It met VW Global and VW Canada's requirements. The VW global team commented it as “one of the best website renovation cases” in their global markets.
Online inventory tool design
VW.CA IA & Sitemap Recreation
1. I analysed the old VW website to get familiar with the existing content and the related stats.
​
2. I also deeply learned the new brand system and CMS to understand all the components that we could use.
​
3. I collaborated with the strategy team to determine the new VW digital strategy and ensure the new IA would align with it.
​
4. Based on the study, I recreated the new information architecture, which migrated the old website's key content to the new ecosystem.
​
5. The new IA didn't only present the existing content from the old site but also brought the new features, such as the Pre-owned Vehicle Search Tool and the New Car Inventory tool, to meet the business growth needs.
​
6. While working on visualizing the IA and sitemap, I used various visual elements to differentiate the old, new, and local content to better help our devs and client understand the new site structure.
​
7. This work helped our team scoop the development work, make business decisions, and plan the budget efficiently.
VW.CA Content Mapping Example
Old VW Homepage
New VW Homepage
(with component annotation)
Local App Design Example:
VW Inventory Tool
During COVID, Canadian car shoppers were looking to complete as much of the sales process online as possible.
I designed an Inventory tool that users could shop vehicles online, which increases user online engagement and the volume of leads going to the dealers.
I conducted stakeholder interviews and analyzed 6 competitors' inventory tools to learn the best-in-class solutions. Based on the study, I created the user journeys, wireframes, and Invision prototype to help the client and devs to understand the design better.
Competitor Analysis
VW Inventory Tool Wireframes
Accessibility Compliance Audit
Due to the Accessibility for Ontarians with Disabilities Act (AODA) requirements, the VW website needed to meet level AA conformance by January 2021.
With UX skill, a deep understanding of the VW.ca website and AA criterion, I led an accessibility compliance audit for all the 155 VW site pages.
We used machine accessibility audit tools such as WAVE, also manually used multiple disability digital assistance tools such as screen reader to audit the site, resulting in 155 reports with issues and improvement suggestions to the VW global and Canadian team.
