top of page

Work    >    Audi China

Audi China

Lead UI Designer for Design support for Audi China's joint venture sites.
Designs were to be build on Audi's Design system. 

 

Problem Statement

Visual Design Support

  • Create site design based on Audi's Global Design system

  • Make designs AEM compatible

  • Design new journeys like product configurator and online store 

  • Focus on style and interactive elements

Audi 1.png
Audi 2.png

Design System

Used Audi's Existing design system

  • Audi has a comprehensive design system accessible to anyone

  • It details branding, UI and interactions with examples as well as Sketch Component file

Requirements

Design for Sitemap

  • We got wireframes for the designs and we transformed them into Visuals

  • During the project we have to cover the entire sitemap

  • Focus was on improving user journey and giving apt feedback

  • We also had persona specific recommendations as well

Design Highlights

Modern design trends

  • Together with onshore team we finalised a base design and interaction type

  • Design was based on concepts like one page scroll, parallex, personalization etc

  • Templates included​
    • Home Page

    • Car line

    • Car details

    • Car configurator

    • Contact us

    • Online store

    • About Audi China

    • Favourites

    • Dealer Search

    • Test Drive

    • Stock Locator

Design Highlights #1

One Task at a time

  • Design to focus on one task at a time so in a Viewport we present limited information

Design Highlights #2

Page scroll

  • Page scroll was based on viewport, hence partial sections can not be seen

Design Highlights #3

Mobile First

  • Designs were mobile first and then scaled to tablet/desktop version

Design Highlights #4

Chinese & English

  • Site is dual language with Chinese as default and English available on toggle

Screenshot 2021-12-02 at 12.05.13 PM.png
Screenshot 2021-12-02 at 12.27.07 PM.png
Audi_China_Mob 1.png
01_Homepage_2-12_2x.png
Audi_China_Web 1.png

( Home Page )

01_Desktop_Homepage_2-12.png

( Persona Questions )

01_Homepage_2-13_2x.png
01_Desktop_01_Homepage_2-15-1.png

( Car Recommendation )

04_Details_1-5_2x.png
Audi_China_Mob 4.png
Audi_China_Mob 3.png
01_Desktop_Details_1-5.png

( Car configurator )

Audi_China_Web 5.png
Audi_China_Web 2.png
Audi_China_Web 4.png

SIMILIAR PROJECTS

Premium Office furniture

Okamura Home.png

Digital Asset Library

RL 1.png
RL2.png

SCROLL

bottom of page