Screen Shot 2021-01-23 at 10.00.37 PM.pn

Volkswagen Canada (2019-2021)

Responsibilities
Sitemap
Content mapping
Content migration (AEM)
Image resourcing
Accessibility compliance audit

In 2019, Volkswagen Global launched its new branding and required all regions globally to renovate their websites and designs to meet the new brand ecosystem.

 

VW Canada only had 5 months to rebuild a 155-page website with the new AEM system.

What I did:

UX design for the official website and local apps, including the study of the old VW website, new VW CMS, component library, and brand style guideline.

 

Collaboration with data scientists, strategists and the tech team to deliver the most effective US solutions efficiently by leveraging existing content and creating new research reports, IA, sitemap, content mapping, wireframe and prototypes.

 

Content migration within the new complex CMS structure and image sourcing under a significant shortage of brand images from the client.

 

Accessibility compliance audit with in-depth knowledge of WCAG 2.1 Level AA guideline.

Impact:

New website launch on time, meeting VW Global and VW Canada's requirements and being commented by the VW
global team as “one of the best website renovation cases” in their Global markets.

Online Inventory tool design
VW.CA IA & Sitemap

Study of the old VW website and the new website system and collaboration with the strategy team to align on the future business direction. Creation of information architecture, which migrates the old website's key content to the new ecosystem.

 

The new IA also provides new features to meet future business needs, such as a pre-owned search and inventory tool. While working on visualizing the IA and sitemap, unique visual elements were created to differentiate the old, new and feature pages to help the development team and client to understand and determine the scope and budget of future work.

sitemap.jpg
VW.CA Content Mapping

To save time due to a tight launch timeline, content migration was done via mapping instead of making wireframes from scratch, which allows the website robe completed and launched on time.

Old site
New site content map with
component annotation
Local App Design: Inventory Tool

During COVID, Canadian car shoppers were looking to complete as much of the sales process online as possible. As the UX designer, I was responsible for designing a tool which increases user engagement and the volume of leads going to the dealers.

 

I analyzed 5 competitors' inventory tools, researched the best-in-class experience, and designed the user flow, wireframes, and an Invision prototype to help the client and development team visualize the design.

Competitor analysis
Screen Shot 2021-01-23 at 8.39.34 PM.png
Screen Shot 2021-01-23 at 8.36.53 PM.png
Screen Shot 2021-01-23 at 8.39.26 PM.png
Wireframes
Screen Shot 2021-01-23 at 8.26.09 PM.png
Screen Shot 2021-01-23 at 8.26.26 PM.png
Accessibility Compliance Audit

Due to the Accessibility for Ontarians with Disabilities Act (AODA), the VW website needed to meet level AA conformance by January 2021. With UX skill, a deep understanding of VW.ca website and knowledge of coding, I led the accessibility audit for all the 155 pages of vw.ca with a QA co-worker. Machine accessibility audit tools such as WAVE and Lighthouse and different disability digital assistance tools such as Voice-over screen reader were used to audit the website, resulting in 155 reports with issues and improvement suggestions to the VW global and Canadian team.