Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona...

25
User Interaction Specification Document Volkswagen- Brand Desktop Version 1.0 (First draft) Desktop is an intranet used for internal communication between the various Volkswagen Group UK brands and the retailers. Currently, there are six Desktops, Audi, VW Passenger Cars, VW Commercial Vehicles, SEAT, Skoda and TPS, which provide a source of brand specific information. This is available 24/7 to retailer sites. VWG UK has identified the following drawbacks with the current version of the Desktop: Ineffective IT support structure with too many parties involved, causing delays to change Desktop is based on old technology Poor structure of information Inability to provide specific targeting publishing Ineffective search functionality Inadequate usage reporting Lack of editorial functionality; too much reliance on IT provider Limited facility for video streaming It has also been identified that an additional Desktop is required for the VWG Customer Service Centre (CSC) with a link to the CSC Knowledgebase application. The purpose of this project is to replace the existing Desktops in order to address the current drawbacks, provide the foundation to support the Brands future requirements for the intranet. Prepared by : Samita Bhandary RevisionDate Author Description of change

Transcript of Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona...

Page 1: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

User Interaction Specification Document

Volkswagen- Brand Desktop

Version 1.0 (First draft)

Desktop is an intranet used for internal communication between the various Volkswagen Group UK brands and the retailers.

Currently, there are six Desktops, Audi, VW Passenger Cars, VW Commercial Vehicles, SEAT, Skoda and TPS, which provide a

source of brand specific information. This is available 24/7 to retailer sites.

VWG UK has identified the following drawbacks with the current version of the Desktop:

Ineffective IT support structure with too many parties involved, causing delays to change

Desktop is based on old technology

Poor structure of information

Inability to provide specific targeting publishing

Ineffective search functionality

Inadequate usage reporting

Lack of editorial functionality; too much reliance on IT provider

Limited facility for video streaming

It has also been identified that an additional Desktop is required for the VWG Customer Service Centre (CSC) with a link to the CSC

Knowledgebase application.

The purpose of this project is to replace the existing Desktops in order to address the current drawbacks, provide the foundation to

support the Brands future requirements for the intranet.

Prepared by : Samita Bhandary

RevisionDate Author Description of change

Page 2: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Scope of the project

Interaction details

Visual design

Persona overview

Site map

Associated document

1 Home page - wireframe

1 Home page with annotation

1 Home page specification

2.0 Product page - wireframe

2.0 Product page with annotation

3.0 Product page specification

Content

Table of content

Volkswagen- Brand Desktop - Table of content

Page 3: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Associated document

Volkswagen- Brand Desktop - Associated documents

Notes

- Visual designs & content are for placements only (FPO) for all wireframes

- Content are for placements only (FPO) for all visual designs

UI Flow Diagrams:

URL of UI flow diagram(s)

A link to a UI flow diagram file (e.g., PDF or Visio) that is used in the spec. If there are multiple flow diagrams, a link

provided to a directory that includes all UI flow diagrams

UI Mockups:

URL of mockups used in UI Spec

A link to a directory that includes all mockup files (e.g., GIF or JPEG) used in the spec.

Functional Spec:

URL of functional spec

A link to the latest Functional Spec on use.

Usability Documents:

URL of user research or usability documents

Links to user research or usability documents.

Page 4: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Scope of Phase I development

Volkswagen- Brand Desktop - Scope of the project

C. Summary of scope for Phase I development

Search functionality based on goggle technology

Targeted publishing by job function – home page content and email broadcasts (seven splits)

Video streaming

Email broadcast platform for newsletters, mail outs

In-page rating, feedback from users

Individual brand front-end for Desktop

One group generic front-end for knowledge base

Usage reporting by user

Traffic reporting by page

Templated dashboards for Editors and usage visibility by Brands

Feed of question and answers from knowledge base to Desktop

- Three major application in the current system : CSC, Knowledge base and Desktop

- CSC is already an established SAP application and no major scope of work. However we may expect some reporting output based on our need.

- Knowledge base is currently using by CSC. And Desktop is mainly used by other Brand specific need.

Our scope of the design should enhance both as an unified information system that should provide a seamless user experience to various user groups. ( Both front and

back end )

- There is lot of unstructured information floated across group such as email attachment, phone, manual notes, scanned document as an attachment etc. This affecting content search

and unification.

B. Our observation

A. User experience goal

Desktop is an intra net used for internal communication between the various Volkswagen Group UK brands and the retailers. Currently, there are six Desktops, Audi, VW Passenger Cars,

VW Commercial Vehicles, SEAT, Skoda and TPS, which provide a source of brand specific information. This is available 24/7 to retailer sites.

Problem area :

VWG UK has identified the following drawbacks with the current version of the Desktop:

Ineffective IT support structure with too many parties involved, causing delays to change

Desktop is based on old technology

Poor structure of information

Inability to provide specific targeting publishing

Ineffective search functionality

Inadequate usage reporting

Lack of editorial functionality; too much reliance on IT provider

Limited facility for video streaming

It has also been identified that an additional Desktop is required for the VWG Customer Service Centre (CSC) with a link to the CSC knowledge base application.

The purpose of this project is to replace the existing Desktops in order to address the current drawbacks, provide the foundation to support the Brands future requirements for the Intranet.

Page 5: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Why user persona ?

Volkswagen- Brand Desktop - Key user persona

Putting the focus back on the User

In the art that user experience has become, we talk a lot about not letting our client’s personal preferences get in the way of what would be best for the user. Yet no matter how often we remind our clients and teams of this

throughout the design process, we still find that users are unpredictable, and some changes need to be made post-launch to reflect how they actually use the product.

This is easier than it sounds, and a simple way to accomplish this is to incorporate personas into our work. In design circles, a persona is an archetypal representation of a user. The idea is as old as marketing, but Alan

Cooper solidified the idea into a design philosophy in 1995, and designers have been using it to improve their user experience ever since.

There is following 6 key user personas exists in the system

Volkswagen Desktop : Key User personas

DealerEditor Retailer Fleet Sales Area ManagerAdvertising

and Marketing

The system should

able to provide an

essential knowledge

repository for

customer queries and

issues. (Users

includes: Issue

tracking manager,

Advisor, Case

manager, Front ender

D)

Need quick and

effective management

of all important

information received

from so that they are

inserted

systematically and

structurally. Also need

to improve sign off and

request handling

mechanism.

Latest bulletins and all

brand specific

information as needed

or requested + Top

customer’s queries and

solution. Also

interested to see social

interactions ( blog,

latest speak, Twitter,

FB posts, Videos

images etc.

All technical

problem and

solution, discussion

etc.

Latest brand

specific

bulletins,

analytics,

retailer and

customer data

etc.

Ability to interact

with external

agencies, provide

enough

information for

campaign and

Ads, Market

data, creative

content etc.

Search

functionality

based on

Google

technology

Very helpful Very helpful

Targeted

publishing by

job function

Very helpful Very helpful Very helpful Very helpful

Somewhat

useful: As they

are mainly

interested on

customer's issue

Editor owns and drives

this.

Very helpful.

Will be

benefited the

most

Very helpful Very helpful.

Will utilize the

max

Very helpful

Video

streaming

Minimum

useful

Editor owns

and drives this.

the more faster

streaming will

increase user

experience

Very helpful Very helpful Very helpful Very helpful

Email

broadcast

platform for

newsletters,

mail outs

N/A The most

useful tool for

Editor.

N/A N/A N/A N/A

In-page

rating,

feedback

from users

Somewhat

helpful

Very useful too

for generate

analytics and

reports

Very useful too

for generate

analytics and

reports

Helpful Somewhat

helpful

Very useful too

for generate

analytics and

reports

Individual

brand front-

end for

Desktop

Very helpful Very helpful Very helpful Very helpful Very helpful Very helpful

One group generic

front-end for

knowledge base

Usage reporting

and Traffic

reporting by

page

Templated

dashboards for

Editors and usage

visibility by Brands

Feed of question

and answers from

knowledge base to

Desktop

Somewhat

helpful

Very helpful Very helpful Very helpful Very helpful Very helpful

Very useful too

for generate

analytics and

reports

Very useful too

for generate

analytics and

reports

Very useful too

for generate

analytics and

reports

N/A N/A N/A

N/AVery helpful N/A N/A N/A N/A

Very helpful Very helpful Very helpful Very helpful Very helpful Very helpful

Page 6: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Site MapA site map is a visual or textually organized model of a Web site's content that allows the users to navigate through the site to find the information they are looking for,

just as a traditional geographical map helps people find places they are looking for in the real world.

Page 7: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Volkswagen- Brand Desktop - Site map

Page 8: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Interaction Design This section describes interaction details only.

Refer to Visual Design section for final Visual Design and Content section for final Content.

NOTE:

The non-java script experience may differ slightly, but will remain functional. For specifics, please consult with the Technical lead.

Page Details sections are included mock-ups followed by the page overview, page type, and interaction details.

When there is only one flow, this section include a list of pages.

When there are multiple flows, pages are organized by different flows

Page 9: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Volkswagen- Brand Desktop - Home page1.1

http://www.vwgDesktop.co.uk/ Search...

Volkswagen Desktop _ x

Desktop - [Brand]

Page fold

(at 900px)

Advance search

Welcome Jeff Hu | Sign out

Powered by you

06 October, 2011

Search ...

HIGHLIGHTSHIGHLIGHTSHIGHLIGHTSHIGHLIGHTS

EDITOR'S CHOICEEDITOR'S CHOICEEDITOR'S CHOICEEDITOR'S CHOICE

VW ads aim to fill specialty

jobs at Tennessee plant

The German

automaker said

Monday that it is

using a national

print and online

advertising

campaign to fill

specialty positionsRead more >

The Hot Selling Passat is Creating jobs

in the U.S.

POLL OF THE WEEKPOLL OF THE WEEKPOLL OF THE WEEKPOLL OF THE WEEK

What makes the 21st Century Beetle

unlike any other?

Its sleek new design.

Its 2.0L turbocharged engine.

It comes with Bluetooth®.

It has the option of touchscreen nav

Vote Now

WEB LINKSWEB LINKSWEB LINKSWEB LINKS

Links are appear here...

Request a poll

VW EOS 2012 first hard to convertible shines on road

Footer (TBD)

1200 px

Prime viewing area : 880 px Menu and navigation area : 320 px

ALSO VIEW INALSO VIEW INALSO VIEW INALSO VIEW IN

Headline goes here

HOT ISSUESHOT ISSUESHOT ISSUESHOT ISSUES

CUSTOMERS SATISFACTION ISSUES

COMES HERE.....

Headline goes hereHeadline goes hereHeadline goes here

The new Volkswagen XL1 Super Efficient Vehicle (SEV) has been

unveiled at the Qatar Motor Show. Pioneering construction

techniques, an advanced plug-in hybrid drivetrain and innovative

packaging all play a part in allowing the XL1 to return 313 mpg on

the combined cycle while emitting 24 g/km of CO2 to set a new

benchmark for vehicle efficiency.

Volkswagen unveils the XL1 Super Efficient

Vehicle in Qatar

ALERTSALERTSALERTSALERTS

Home Products Fleet & Motability NewsAftersalesSales Technicals

SERVICE

VW servicing –

Easy, convenient & cost-effective!

Is your VW still within manufacturers warranty? No

problem, we will carry out your service ensuring we fully

protect your warranty. Find out more....

OUR PROGRAME

The Volkswagen Winter Tyre Programme

Volkswagen has launched a winter tyre programme

offering customers a cost-effective way of having the

correct tyres on their vehicles.

More News

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Dealer Operations

FAVOURITESFAVOURITESFAVOURITESFAVOURITES

Favorites items comes here...

UPLOADED TODAY UPLOADED TODAY UPLOADED TODAY UPLOADED TODAY MY RECENT VIEWMY RECENT VIEWMY RECENT VIEWMY RECENT VIEW

Bold headlne text for

news item

Bold headlne text for

news item

Bold headlne text for

news item

WHATS NEWWHATS NEWWHATS NEWWHATS NEW

AFTERSALESAFTERSALESAFTERSALESAFTERSALES

WARRANTY

TARGETED NEWSTARGETED NEWSTARGETED NEWSTARGETED NEWS

PASSAT is CarBuyer’s Best

Luxury Small Car

Introducing the new PASS

Sportback

Volkswagen Beetle

convertible to be previewed

at the Beijing motor show

Volkswagen Beetle

convertible to be previewed

at the Beijing motor show

VW EOS 2012 first hard to convertible shines on road

That it is using a national print and

online advertising

The German automaker said Monday

That it is using a national print and

online advertising, The German

automaker said Monday online

advertis ing campaign to fill specialty

positions

The German automaker said Monday

That it is using a national print and

online advertising. The new Volkswagen

XL1 Super Efficient Vehicle (SEV) has

been unveiled at the Qatar Motor Show.

...action items for technical

...action items for aftersales

Page 10: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Volkswagen- Brand Desktop - Home page 1.1

http://www.vwgDesktop.co.uk/ Search...

Volkswagen Desktop _ x

Desktop - [Brand]

Page fold

(at 900px)

Advance search

Welcome Jeff Hu | Sign out

Powered by you

06 October, 2011

Search ...

HIGHLIGHTSHIGHLIGHTSHIGHLIGHTSHIGHLIGHTS

EDITOR'S CHOICEEDITOR'S CHOICEEDITOR'S CHOICEEDITOR'S CHOICE

VW ads aim to fill specialty

jobs at Tennessee plant

The German

automaker said

Monday that it is

using a national

print and online

advertising

campaign to fill

specialty positionsRead more >

The Hot Selling Passat is Creating jobs

in the U.S.

POLL OF THE WEEKPOLL OF THE WEEKPOLL OF THE WEEKPOLL OF THE WEEK

What makes the 21st Century Beetle

unlike any other?

Its sleek new design.

Its 2.0L turbocharged engine.

It comes with Bluetooth®.

It has the option of touchscreen nav

Vote Now

WEB LINKSWEB LINKSWEB LINKSWEB LINKS

Links are appear here...

Request a poll

VW EOS 2012 first hard to convertible shines on road

Footer (TBD)

ALSO VIEW INALSO VIEW INALSO VIEW INALSO VIEW IN

Headline goes here

HOT ISSUESHOT ISSUESHOT ISSUESHOT ISSUES

CUSTOMERS SATISFACTION ISSUES

COMES HERE.....

Headline goes hereHeadline goes hereHeadline goes here

The new Volkswagen XL1 Super Efficient Vehicle (SEV) has been

unveiled at the Qatar Motor Show. Pioneering construction

techniques, an advanced plug-in hybrid drivetrain and innovative

packaging all play a part in allowing the XL1 to return 313 mpg on

the combined cycle while emitting 24 g/km of CO2 to set a new

benchmark for vehicle efficiency.

Volkswagen unveils the XL1 Super Efficient

Vehicle in Qatar

ALERTSALERTSALERTSALERTS

Home Products Fleet & Motability NewsAftersalesSales Technicals

IN SERVICE

VW servicing –

Easy, convenient & cost-effective!

Is your VW still within manufacturers warranty? No

problem, we will carry out your service ensuring we fully

protect your warranty. Find out more....

OUR PROGRAME

The Volkswagen Winter Tyre Programme

Volkswagen has launched a winter tyre programme

offering customers a cost-effective way of having the

correct tyres on their vehicles.

More News

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Volkswagen March Passenger Cars Brand

Deliveries Up 14.6% - Quick Facts

Dealer Operations

FAVOURITESFAVOURITESFAVOURITESFAVOURITES

Favorites items comes here...

UPLOADED TODAYUPLOADED TODAYUPLOADED TODAYUPLOADED TODAY MY RECENT VIEWMY RECENT VIEWMY RECENT VIEWMY RECENT VIEW

Bold headlne text for

news item

Bold headlne text for

news item

Bold headlne text for

news item

WHATS NEWWHATS NEWWHATS NEWWHATS NEW

AFTERSALESAFTERSALESAFTERSALESAFTERSALES

WARRANTY

TARGETED NEWSTARGETED NEWSTARGETED NEWSTARGETED NEWS

PASSAT is CarBuyer’s Best

Luxury Small Car

Introducing the new PASS

Sportback

Volkswagen Beetle

convertible to be previewed

at the Beijing motor show

Volkswagen Beetle

convertible to be previewed

at the Beijing motor show

VW EOS 2012 first hard to convertible shines on road

That it is using a national print and

online advertising

The German automaker said Monday

That it is using a national print and

online advertis ing, The German

automaker said Monday online

advertising campaign to fill specialty

positions

The German automaker said Monday

That it is using a national print and

online advertis ing. The new Volkswagen

XL1 Super Efficient Vehicle (SEV) has

been unveiled at the Qatar Motor Show.

...action items for technical

...action items for aftersales

A

A.1

A.2

A.4

A.3

B.1 B.2 B.3 B.4 B.5 B.6 B.7 B.8 B

H

C G

D

E

F

M

L

K

J

I

C.1

C.2 C.3

D.1

D.2

D.3

D.4

D.5

D.6

E.2

F.2

G.2

G.3

H.2

I.2

I.3

J.2

K.1

K.2

K.3

L.2F.1

L.1

K.4

J.1

I.1

G.1

H.1

E.1

Page 11: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Volkswagen- Brand Desktop - Home page1.1

This is Volkswagen desktops Home page. This page serves the latest and greatest information to VW extra net users. This page serves a different view based on the persona and their interest. However the customization of published news in each section is controlled by VW CMS administrated by brand editor.

Pre-condition: The user can view this page after successful login.

Overview

Typical task flow

Brand EditorSelects a template

from CMS

Apply content to

various section on

EDIT MODEView final preview

Select visibility to

different user persona

(See pesona section)

Is ready to

publish ? Publish to Front End

N

Y

Sl No.

A.1

Condition

The logo will be

different based on

brand

Label

Logo and Brand image

( Ex: Audi, VW etc)

Type

3 Controls :

i. Dynamic logo image

ii. Dynamic label for showing current

date (Boolean)

iii. Contextual floating drop down to

switch between desktop ( Authorization

dependent )

A.2 Search box Auto suggestive search box and search

icon

A.3 User name and Sign out

A.4

behaviour

ON CLICK (of image) : Load home page. persistent navigation

On HOVER: Show in ALT text : 'Home'

ON CLICK OF DOWN ARROW: Show different Brand desktop as a Floating drop down list

ON HOVER OF DOWN ARROW : Rise the height of the arrow to visually indicate as clickable area.

A Google styled auto suggest search box. Refer TBD section for more detail search interaction.

Search icon is clickable ( Should also works on key press = Enter )

User name will be displayed here as 'Welcome <Fiirst name SPACE Last name>' in bold followed by a Sign out

link. Click on sign out will pop a Confirm dialogue box showing 'Are you sure you want to log off ? (For exact

copy refer to Content section)

Dynamic text and hyper link

Advanced Search Expand / Collapse contextual accordion User can search information by using the specific filters. Refer Advance search section for more detail.

Detail modules and Interaction

A. The Header

Sl No.

B.1

Condition Label

Home

Type

Top navigation element

B.2 Products

B.4 Fleet & Motability

B.5

behaviour

ON CLICK : Load home page.

On HOVER: Show in ALT text : 'Home' and use separate colour for mouse over state. Please refer visual

design section and VW brand guideline for detail on colour.

After sales

Top navigation element

Top navigation element

Top navigation element

ON CLICK : Load Product landing page.

On HOVER: Show in ALT text : 'Product' and use separate colour for mouse over state.

ON CLICK : Load Fleet & Motability page.

On HOVER: Show in ALT text : 'Fleet & Motability' and use separate colour for mouse over state.

ON CLICK : Load After sales page.

On HOVER: Show in ALT text : 'After sales ' and use separate colour for mouse over state.

Technicals

Dealer operations

News

B.6

B.7

B.8

B.3 Sales Top navigation element

Top navigation element

Top navigation element

Top navigation element

ON CLICK : Load Technicals page.

On HOVER: Show in ALT text : 'Technicals' and use separate colour for mouse over state.

ON CLICK : Load Dealer operations page.

On HOVER: Show in ALT text : 'Dealer operations' and use separate colour for mouse over state.

ON CLICK : Load Sales page.

On HOVER: Show in ALT text : 'Sales' and use separate colour for mouse over state.

ON CLICK : Load News page.

On HOVER: Show in ALT text : 'News' and use separate colour for mouse over state.

B. The top nav ( globally available to all pages and all type of users )

C. The Highlights section ( Different view based on user's log in )

Page 12: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Volkswagen- Brand Desktop - Home page1.1

Sl No.

C.1

Condition Label

HIGHLIGHTS

Type

Dynamic Label

C.2 Highlighted material

( image and/or text)

with suitable subtitle

Dynamic image and/or text title

C.3 List of highlight items

behaviour

This section describes the most important highlights, Editor wants to communicate. Editor can change the label

and the content of this section from CMS.

This image can be single or a group of image. In case of group a carousal interactive pattern can be used.

However ON CLICK of the text in section C.3 this image and highlighted title will change. This is CMS

manageable but the dimension of the image and size of the subtitle has to have a fixed threshold to preserve

layout.

These subtitles are a relevant to 'highlight'. ON CLICK ( OR HOVER ) change the image and title. This is CMS

driven but the number of word count should be limited to preserve page layout

Dynamic sectional clickable area

Sl No.

D.1

Condition Label

AFTER SALES (Section

subtitle )

Type

Dynamic subtitle (label)

D.2 what's New, Uploaded today

and My recent view (Content

TBD). What's new is default

selected on load

D.4 News section Second row

D.5

behaviour

This section is for latest and greatest updates of AFTER SALES. However editor can change the label and the

content of this section from CMS as necessary.

Tab panel This provides 3 different classification and view of news. The tab content change on click. Use appropriated

SELECTED and HOVER colour for tab. The maximum number of tab can be vary ? (TBD) If varies, should not

exceed the width of the container.

More news list viewD.6

D.3 Main news section

(WARRANTY as an instance)

heading, 2 column view for image and details with

headline

Dynamic Image and text

hyper linked text ON CLICK : each item go to detailed page. Editor can add or remove number of subsection as widgets based

on the content he/she wants to place (or arrange).

D.3, D.4 and D.5 are flexible depends on content. From CMS, Editor can add or remove number of subsection

as widgets based on the content he/she wants to place (or arrange).

Dynamic Image and text D.3, D.4 and D.5 are flexible depends on content. From CMS, Editor can add or remove number of subsection

as widgets based on the content he/she wants to place (or arrange).

D.3, D.4 and D.5 are flexible depends on content. From CMS, Editor can add or remove number of subsection

as widgets based on the content he/she wants to place (or arrange).

News section third row Dynamic Image and text

B. The top nav ( globally available to all pages and all type of users )

C. The Brand Highlights section

D. The News section ( news for targeted user - Different view based on user's log in )

UPLOADED TODAY UPLOADED TODAY UPLOADED TODAY UPLOADED TODAY MY RECENT VIEWMY RECENT VIEWMY RECENT VIEWMY RECENT VIEW

E. The Targeted News section ( Different view based on user's log in )

Page 13: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Volkswagen- Brand Desktop - Home page1.1

Sl No.

E.1

Condition Label

Section Heading

Type

dynamic subtitle (label)

E.2 4 targeted news /

bulletins

Dynamic image and text thumbnails (4)

behaviour

CLICKABLE thumbnails. ON CLICK go to relevant page. (link depends on the context) The exact fit can be

decided by the editor. However the width and heights of the thumbnails should be pre-defined.

Editor can change the label and the content of this section from CMS as necessary.

Sl No.

G.1

Condition Label Type

G.2 a] Editor has to 'Mark

as Alert' in the CMS to

populate as Alert.

b] alters are role based

Alert block

behaviour

Dynamic container and Label Its totally decided from CMS : How many alerts should be published. However Editor will write the alerts

subtitle and body for the latest alert essentially wanted to bring user's attention to a certain task. It is also a

job for editor to define what should be defined as alerts. alters are role based.

Number of alerts : This is also dynamic. However typically not more than 5-6 are not recommended. If user

visited an alert it has to removed ( or grayed out TBD) from the list

G.3 If exceeded beyond specific area this UI control will automatically appear. ON CLICK: slide up and down

Section Heading dynamic subtitle (label)

Sliding carousal (Vertical)Alert expander

G. The Alert section

F. The Special Brand Story section

E. The Targeted News section ( Different view based on user's log in )

Sl No.

F.1

Condition Label Type

F.2

behaviour

Section Heading dynamic subtitle (label) Editor can change the label and the content of this section from CMS as necessary.

4 targeted news /

headlines

Dynamic image thumbnails with

subtitle (4)

CLICKABLE thumbnails. ON CLICK go to relevant page. (link depends on the context) The exact fit can be

decided by the editor. However the width and heights of the thumbnails should be pre-defined.

G. The Alert section

F. The Special Brand Story section

H. The Hot Issues section

Page 14: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Volkswagen- Brand Desktop - Home page1.1

Sl No.

H.1

Condition Label

Section Heading

Type

Normal text

H.2 Highlight item with headline

Image and text

behaviour

TBD

Change image and headline on different highlight item selection from right panel. Exact content TBD

Sl No.

J.1

Condition Label

section heading

Type

Static text

J.2 If user marked as

favourite to any article

Favourite links

behaviour

Static dedicated section

List of hyper links item User driven : Appears in this section only if user clicks the 'Mark as favourite'link on News/Article detail page.

If user does not opt for any favourite the section remain empty with a message - 'No Favourite added' (Exact

copy TBD).

H. The Hot Issues section

I. The Editor's Choice section

J. The Favourites section

Sl No.

I.1

Condition Label Type

I.2 Highlighted Editor's

choice news

Dynamic image, title and short

description

behaviour

This is a customizable section. And the recommendation is role base. Image thumbnail and READ MORE link

are clicable but leads to same section in another page

I.3 Dynamic link and arrow

Section Heading dynamic subtitle (label) Editor can change the label and the content of this section from CMS as necessary.

Highlighted Editor's

choice news - 2

This is a customizable section. And the recommendation is role base. The hyper link is clicable. ON CLICK:

opens a new page.

I. The Editor's Choice section

J. The Favourites section

K. The Poll section

Page 15: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Volkswagen- Brand Desktop - Home page1.1

Sl No.

K.1

Condition Label Type

K.2 Poll question with 4 choice of answers

Dynamic text and radio button for answers

behaviour

This is again defined from CMS what has to published. This is a role based interface. Only one radio button is selectable

K.3 Vote now Button on click: Show the result page

K.4 Request a poll hyper link on click to get the request form, submit the request to the editor

section heading Static text Static dedicated section

K. The Poll section

L. The web links section

L. The web links section

Sl No.

L.1

Condition Label Type

L.2 External Application or

related website Links

hyper links

behaviour

on click : redirect to the specific system and/or website(s) in a new browser window

section heading Static text Static dedicated section

M. The Footer section

M. The Footer section

Sl No.

M

Condition Label

Footer Section

Type

hyper link text

behaviour

on click : redirect to specific page view ( Exact footer elements are still TBD)

Page 16: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Volkswagen- Brand Desktop - Home page (Next view)1.1

http://www.vwgDesktop.co.uk/ Search...

Volkswagen Desktop _ x

Desktop - [Brand]

Column 1 Column 2 Column 3

Footer (TBD)

1200 px

Prime viewing area : 880 px Menu and navigation area : 320 px

UPLOADED TODAYUPLOADED TODAYUPLOADED TODAYUPLOADED TODAY MY RECENT VIEWMY RECENT VIEWMY RECENT VIEWMY RECENT VIEWWHATS NEWWHATS NEWWHATS NEWWHATS NEW

AFTERSALESAFTERSALESAFTERSALESAFTERSALES

Volkswagen eyes Mexico for Audi

factory, state official says

Volkswagen Closer To MAN SE

Integration,Acquires Majority Stake

2012 Volkswagen Passat,

Routan Recalled

3D Systems Delivers Innovative,

New Volkswagen Test

Volkswagen running US ad

campaign

Rapid and Vento spell success for

Volkswagen's re-badging strategy

TODAY WEEK MONTH

AD.1

D.1.1

D.1.2

Page 17: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Volkswagen- Brand Desktop - Home page (Next view)1.1

D.1. The News section - Next View ( news for targeted user - Different view based on user's log in )

D.1. The News section - Next View ( news for targeted user - Different view based on user's log in )

Sl No.

D.1.1

Condition Label

Uploaded today's news

section view

Type

2nd tab into the Tab panel

Behavior

Onclick: display this view

D.1.2 More news link Hyperlink Onclick: redirect to the news landing page

Page 18: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Volkswagen- Brand Desktop - Product landing page2.0

http://www.vwgDesktop.co.uk/ Search...

Volkswagen Desktop _ x

Desktop - [Brand]

Advance search

Welcome Jeff Hu | Sign out

Powered by you

06 October, 2011

Search ...

Column 1 Column 2 Column 3

Footer (TBD)

1200 px

Prime viewing area : 880 px Menu and navigation area : 320 px

PRODUCTSPRODUCTSPRODUCTSPRODUCTS

The Passat Contrast Edition eye catchers that were ordered last year will be arriving in showrooms

in time for the launch of the A1 Sportback

PASSAT Contrast Edition eye catchers arriving soon21 Mar 12

TARGETED NEWSTARGETED NEWSTARGETED NEWSTARGETED NEWS

PASSAT is CarBuyer’s Best

Luxury Small Car

Introducing the new PASS

Sportback

Volkswagen Beetle

convertible to be previewed

at the Beijing motor show

Volkswagen Beetle convertible

to be previewed at the Beijing

motor show

Image Image Image Video VideoImage

All MODELSAll MODELSAll MODELSAll MODELS

OLD MODELSOLD MODELSOLD MODELSOLD MODELS

Home Products Fleet & Motability NewsAftersalesSales Technicals Dealer Operations

FAVORITESFAVORITESFAVORITESFAVORITES

Favorites items comes here...

WEB LINKSWEB LINKSWEB LINKSWEB LINKS

Links are appear here...

Model DerivativesModel YearModel NameVIEW BY:

UP! Polo Golf Golf Estate Golf Cabriolet Beetle Passat Passat Estate Passat Alltrack

Scirocco Tiguan Eos Jetta Volkswagen CC Touran Sharan Tourag Phaeton

VW EOS 2012 first hard to convertible shines on road

Page 19: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

2.0

Spec In Progress

Volkswagen- Brand Desktop - Product landing page

Page 20: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

8.0 Volkswagen- Brand Desktop - News Landing page

http://www.vwgDesktop.co.uk/ Search...

Volkswagen Desktop _ x

Desktop - [Brand]

Page fold

(at 900px)

Advance search

Welcome Jeff Hu | Sign out

Powered by you

06 October, 2011

Search ...

Column 1 Column 2 Column 3

Footer (TBD)

1200 px

Prime viewing area : 880 px Menu and navigation area : 320 px

NEWS NEWS NEWS NEWS

Find an article or news Filter by date Product Newsin

2012 Volkswagen Beetle Turbo

Learning To Love The Bug Volkswagen began building buzz for the 2012 Beetle long before we

caught a glimpse of the first spy shots

More

New Volkswagen Beetle earning more man love

Learning To Love The Bug Volkswagen began building buzz for the 2012 Beetle long before we caught

a glimpse of the first spy shots... >> more

15th April, 2012

9th April, 2012

12 more of 50 news to load >>

YOUR ACTIVITYYOUR ACTIVITYYOUR ACTIVITYYOUR ACTIVITY

RECENT VIEWEDRECENT VIEWEDRECENT VIEWEDRECENT VIEWED

Volkswagen eyes Mexico for Audi factory,

state official says

Volkswagen Closer To MAN SE

Integration,Acquires Majority Stake

2012 Volkswagen Passat, Routan Recalled

3D Systems Delivers Innovative, New

Volkswagen Test Drives in Full Color

Volkswagen running US ad campaign to fill

specialized positions

Rapid and Vento spell success for

Volkswagen's re-badging strategy

Chicago: Editors' Choice

New Volkswagen Beetle earning more man love

Learning To Love The Bug Volkswagen began building buzz for the 2012 Beetle long before we caught

a glimpse of the first spy shots... >> more

9th April, 2012

Internal Bulletin

Home Products Fleet & Motability NewsAftersalesSales Technicals Dealer Operations

Chicago: Editors' Choice

Internal Bulletin

Chicago: Editors' Choice

Internal Bulletin

9th April, 2012

15th April, 2012

22nd April, 2012

FAVOURITESFAVOURITESFAVOURITESFAVOURITES

Favorites items comes here...

WEB LINKSWEB LINKSWEB LINKSWEB LINKS

Links are appear here...

VW ads aim to fill specialty

jobs at Tennessee plant

The German

automaker said

Monday that it is

using a national

print and online

advertising

campaign to fill

specialty positions22 views 4 Comments

Read more >

The Hot Selling Passat is Creating jobs

in the U.S.

The 2012 Tiguan; Not to Be

Overlooked

RECOMENDED RECOMENDED RECOMENDED RECOMENDED

Page 21: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Spec In Progress

0.0 Volkswagen- Brand Desktop - Visual design

Page 22: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Visual designThis unit is about preparing the elements of visual design for the production process: and how the design concepts are translated into practical reality.

This section contains :

- Typographic specification that is complete, accurate and comprehensible, and includes instructions for all design elements

- Detail visual style specification based on VW visual standard and pixel level detail guideline

Page 23: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

ContentThis unit is about appropriate copy or content for the application should be specific to Volkswagen style and tone guideline. This section contains -

a] Interaction label, title, heading field name etc

b] Alert, warning, success, failure and exception messages

Note : This section is NOT about informational text or website copy material.

Page 24: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

Content spec TBD

0.0 Volkswagen- Brand Desktop - Content spec

Page 25: Volkswagen- Brand Desktop · Scope of the project Interaction details Visual design Persona overview Site map Associated document 1 Home page - wireframe 1 Home page with annotation

End of document