TEMPLATE PAGES FONCTIONNAL SPECIFICATIONS · Then the “I NEED” banner automatically opens and...

©Publicis Modem for Arval – Confidential

Page | 1

TEMPLATE PAGES’ FONCTIONNAL

SPECIFICATIONS DIGITAL REDESIGN ARVAL.COUNTRY

PROJET

Description : Digital redesign arval.country

File : PM-ARVAL_SPECS-PAGES

Auteur : Aurélie Favart

Date : 2015.07.15

Version : 3.00

CONTACT

Project Director

Aurélie FAVART

[email protected]

01 44 43 68 45


Page | 2

CONTENTS

I. VERSIONS TRACKING & STRUCTURE ............................................................................................................................ 3

I.1. DOCUMENT’S UPDATES ...................................................................................................................................................... 3

I.2. ABBREVIATIONS / DEFINITIONS............................................................................................................................................ 3

I.3. SPECIFICATIONS’ STRUCTURE (CAPTIONS) .............................................................................................................................. 4

II. GENERALITIES .............................................................................................................................................................. 4

II.1. BROWSER COMPATIBILITY ................................................................................................................................................... 4

II.2. SCREEN RESOLUTION AND GRIDS .......................................................................................................................................... 4

II.3. MULTILINGUAL MANAGEMENT ............................................................................................................................................ 5

III. WEBSITE STRUCTURE ............................................................................................................................................... 6

III.1 SITEMAPS ............................................................................................................................................................................. 6

III.2 TEMPLATES LIST ..................................................................................................................................................................... 6

IV. TEMPLATES DETAILS ................................................................................................................................................ 7

IV.1. TEMPLATE 01 – RECURRING ELEMENTS [TEMP 001] ............................................................................................................. 7

IV.1.1. Element 01 – Header [ELE 001] ............................................................................................................................ 7

IV.1.2. Element 02 – Footer [ELE 002] ........................................................................................................................... 13

IV.1.3. Element 03 – Sticky bar [ELE 003] ...................................................................................................................... 15

IV.1.4. Element 04 – Breadcrumbs [ELE 004] ................................................................................................................ 18

IV.1.5. Element 05 – Hyperlink text [ELE 005] ............................................................................................................... 18

IV.2. TEMPLATE 02 – HOME PAGES [TEMP 002] ....................................................................................................................... 18

IV.2.1. Element 01 – 1st Line [ELE 001] .......................................................................................................................... 20

IV.2.2. Element 02 – 2nd Line [ELE 002] ......................................................................................................................... 23

IV.2.3. Element 03 – 3nd Line [ELE 003] ......................................................................................................................... 26

IV.3. TEMPLATES 03 – NEWS PAGES [TEMP 003] ...................................................................................................................... 31

IV.3.1. Element 01 – Press Contact [ELE 001] ................................................................................................................ 31

IV.3.2. Element 02 – Search engine [ELE 002] ............................................................................................................... 33

IV.3.3. Element 03 – Navigation Menu [ELE 003] ......................................................................................................... 36

IV.3.4. Element 04 – News HP [ELE 004] ....................................................................................................................... 37

IV.3.5. Element 05 – News Page [ELE 005] .................................................................................................................... 40

IV.3.6. Element 06 – Press Releases [ELE 006] .............................................................................................................. 44

IV.3.7. Element 07 – They Talk About Us [ELE 007] ...................................................................................................... 46

IV.4. TEMPLATES 04 – OFFER PAGES [TEMP 004] ...................................................................................................................... 50

IV.4.1. Element 01 – Find a car Home - [ELE 001] ......................................................................................................... 52

IV.4.2. Element 02 – Search results - [ELE 002] ............................................................................................................. 61

IV.4.3. Element 03 – Offer page - [ELE 003] .................................................................................................................. 69


Page | 3

I. Versions tracking & Structure

This document describes the template pages’ functionalities of the new arval.country website.

Note! Graphical guidelines will not be specified in this document. The goal of this document is to

explain how the templates work and how the pages must be displayed.

I.1. Document’s updates

Version Date Description Author

V1 27/05/2015 Templates functional specifications

writing Aurélie Favart

V2 15/06/2015 Offer pages functional specifications

writing

Aurélie Favart

V3 15/07/2015 Offer pages functional specifications

finalization

Aurélie Favart

I.2. Abbreviations / Definitions

Abbreviations Description

Back Office / BO Back Office / Back End => CMS’ interface for content management

Front Office / FO Front Office / Front End => The website as it is seen by users

HP Website Home Page

PM Publicis Modem

CKeditor

Rich Text Editor => corresponds to a field in the BO to administrate a rich text

formatting (bold, underline, images videos addition / hypertext links…).

Opposite of a «Simple text » witch do not permit any ‘text formatting’

possibility

Contributors BO’s users

Users FO’s users


Page | 4

I.3. Specifications’ structure (captions)

The functional specifications are structured in tables as the caption bellow:

Reference Name View Description / Comments

Template’s

reference

Template’s

name

Screenshot of the

part of the template

Specifications (BO contribution needs and

FO management rules)

II. Generalities

II.1. Browser compatibility

List of the desktop compatible browser: ≥ IE8 (Windows) / Firefox (last version, Windows) /

Chrome (last version, Windows and Mac) / Safari (last version, Mac).

List of the compatible OS: ≥ IOS7 (Iphone and Ipad) / ≥ Android 4.4 (Internet stock browser

and last chrome version).

II.2. Screen resolution and grids

The arval.country website is responsive and build on a HTML5/JS (no flash) base.

2 breaking points hab been identified to cover « mobile », « tablet » and « desktop » resolution :

> mobile : screens < 618px

> tablet landscape : 619px to 959px

> desktop : 960px à 1400px

2 white columns will appear on the right and the left part of the website over 1400px.


Page | 5

The website is build thanks to 2 grids:

The blue one = content grid: 12 columns (80px) and 1200px maximum so the texts will always be

readable.

The red one = fluid grid: 4 columns define by the screen size (maximum 1400px, we will have

empty white columns on the right and on the left part of the website while it will be more than

1400px of height)

II.3. Multilingual management

The future website will be multilingual. The user will be able to select its country then its language.

This functionality is describe bellow in the document.

II.4. Open Graph tags

As a social network sharing is available on a page, an Open Graph tag must be integrate in the

page.

This tags will be administrable in the CMS.


Page | 6

III. Website structure

III.1 Sitemaps

2 kind of sitemap is possible thanks to the typology of the country:

- For the segmented countries :

The web site is composed with the countries asked segments (based on each country

sitemap). Countries can modify, remove or add segments, but this action has to be done by

Stepnet.

Each page is attached to a segment and can’t be re-use.

Each segment’s homepage have its own navigation menu.

- For the non-segmented countries :

The website will be composed with a unique home page and several pages.

III.2 Templates list

ID TYPE DESCRIPTION

[TEMP

001] Recurring elements Header, Footer, Sticky bar, Breadcrumbs, Hyperlink

[TEMP

002] Home Pages Level 1 and level 2 HP

[TEMP

003] News Pages

Heading to display news articles, press releases and/or a list of

external website speaking about Arval

[TEMP

004] Offer pages Not specified in this version of the document


Page | 7

IV. Templates details

IV.1. Template 01 – Recurring elements [TEMP 001]

ID TYPE DESCRIPTION

[ELE

001] Header

Permit the access to the core features (I Need dropdown menu and

About Arval heading), access to the navigation and the website

search engine, to the personal account and to the all countries

website page.

[ELE

002] Footer

Permit the access to the social networks pages, the segmented (or

not segmented) pages, arval.com, others pages.

[ELE

003] Sticky Bar Give the information contacts linked to the page visited.

[ELE

004] Breadcrumbs

Starting with a house icon. It follow the level of navigation in the

pages.

[ELE

005] Hyperlink Permit to integrate a link in a text.

IV.1.1. Element 01 – Header [ELE 001]

When a visitor goes on an Arval country website he arrives on the arval.country level 1 home

page (if the website is segmented).

Then the “I NEED” banner automatically opens and the user should select a need.

Then he goes directly to the relevant content:

Either on a HP dedicated to a segment with several other pages

Or on a specific internal page

ADMINISTRATION.

In the BO the contributor can manage the shortcut menu: he can add, modify or delete shortcuts

and their links depending on your users/visitor’s needs.


Page | 8

HEADER OPEN DESKTOP VERSION

HEADER CLOSED DESKTOP VERSION

HEADER CLOSED AND SELECT DESKTOP VERSION

DESKTOP DESIGN

REF NAME VIEW DESCRIPTION / COMMENT

Header_

desktop

_001

Brand bar

Mandatory

Roll Over on “COUNTRY”: the text

become black and the

background grey

Click on “COUNTRY”: display of

the country websites list’s page.

Roll Over on « PERSONAL

ACCOUNT »: the text become

black and the background grey

Click on “PERSONAL ACCOUNT”:

display the login window

(Header_desktop _007).

Header_

desktop

_002

White

bar_off

Mandatory

Click on “I NEED”: opening of the

“I NEED” banner.

Roll Over on « ABOUT ARVAL »:


Page | 9

the text become green with a

green line below

Click on “ABOUT ARVAL”: display

the dedicated HP and the

navigation of this heading.

Header_

desktop

_003

« I

NEED »

banner

Mandatory

Click on the dropdown menu:

opening of the “I NEED”

dropdown menu. Per default the

first choice of the list is displayed.

Header_

desktop

_004

« I

NEED »

drop

down

menu

Mandatory

Roll Over on «I NEED»‘s choices:

the background become grey

Click on “I NEED”’s choice: the

text become green, display the

linked HP/page and the

navigation dedicated to this

HP/page.

The white bar become

“White_bar_on”.

Header_

desktop

_005

White

bar_on

Mandatory

Click on “I NEED”: opening of the

“I NEED” banner with the actual

“NEED” preselected.

Roll Over on « ABOUT ARVAL »:


green line below

Click on “ABOUT ARVAL”: display



Header_

desktop

_006

Navigatio

n Menu

Mandatory

Roll Over on the Navigation titles:


green line below (excepted the

house icon)

Click on the navigation title:

display of the dedicate page.


Page | 10

Header_

desktop

_007

Login

Popin

Mandatory

Roll Over on “Arval driver” or

“Arval fleet manager”: the text

become green (included the

arrow icon)

Click on the link: display the

dedicate page (driver / FM).

Click in a field: the caption

disappear

Click on submit: display the error

message if necessary. If the login

/ password is ok display the Arval

connect page.

Click on Forgot your password? :

TABLET DESIGN


Header_

tablet_0

01

Brand bar

Mandatory

Tap on “COUNTRY”: display of

the country websites list’s page.

Tap on “PERSONAL ACCOUNT”:

display the login window

(Header_tablet_007).

Header_

tablet_0

02

White

bar_off

Mandatory

Tap on “I NEED”: opening of the

“I NEED” banner.

Tap on “ABOUT ARVAL”: display



Header_

tablet_0

03

« I

NEED »

banner

Mandatory

Tap on the dropdown menu:

opening of the “I NEED”

dropdown menu. Per default the

first choice of the list is displayed.

Header_

tablet_0

04

« I

NEED »

drop

down

menu

Mandatory

Tap on “I NEED”’s choice: the

text become green, display the

linked HP/page and the

navigation dedicated to this

HP/page.

Commenté [AF1]: TBC

Commenté [AF2]: To be define


Page | 11

The white bar become

“White_bar_on”.

Header_

tablet_0

05

White

bar_on

Mandatory

Tap on “I NEED”: opening of the

“I NEED” banner with the actual

“NEED” preselected.




Header_

tablet_0

06

Navigatio

n Menu

Mandatory

Tap on the navigation title:

display of the dedicate page.

Header_

tablet_0

07

Login

Popin

Mandatory

Tap on Arval Driver / Arval Fleet

manager’s link: display the


Tap in a field: the caption

disappear

Tap on submit: display the error



connect page.

Tap on Forgot your password? :

MOBILE DESIGN


Header_

mobile_

001

Closed

Mandatory

Tap on “Burger menu”: open the

navigation menu version

“open_no_need” if no need has

been selected

“open_need” if a need has been

selected”




Page | 12

Header_

mobile_

002

Open_no_

need

Mandatory

Tap on “COUNTRY”: closed the

menu and display of the country

websites list’s page.


closed the menu and display the

login window

(Header_mobile_004).

Tap on a need in the list: closed

the menu and display the

dedicated HP/page. The menu

become the “Open_need”

version. The need is display.


the dedicated HP.

Header_

mobile_

003

Open_nee

d

Mandatory

Tap on “COUNTRY”: closed the

menu and display of the country

websites list’s page.


closed the menu and display the

login window.

Tap on a title of the navigation

menu: closed the menu and

display the page.

Tap on “ABOUT ARVAL”: closed

the menu display the dedicated

HP of this heading.

Tap on “I NEED XXX”: display the

need list.

Header_

mobile_

004

Login

popin

Mandatory

Tap in a field: the caption

disappear

Tap on submit: display the error



connect page.

Tap on Forgot your password? :

Tap on Arval Driver / Arval Fleet

manager’s link: display the





Page | 13

IV.1.2. Element 02 – Footer [ELE 002]

It is a mandatory element on the website.

Its background will always be white

It will be compose with:

- The Social network links. It is not mandatory to display all of them (depend on if it exist or

not)

- The Rich footer

- Arval.com link

- Other links: Copyrights, Legal, site map, cookies policy, privacy policy…

ADMINISTRATION.

In the BO the contributor can manage the links/pages displayed in the footer and the social

networks (displayed or not and its link)

DESKTOP DESIGN


Footer_

desktop

_001

Social

networks

Not Mandatory

Roll Over on the icon or on the

text : the cursor become a hand

Click on the icon or on the text:

display the social network page in

another window.

Footer_

desktop

_002

Links

Mandatory

Roll Over on a title : the text

become green and the cursor

become a hand

Click on a text: display the page,

the navigation of this heading

and the “White bar_on” version

of the header if the page

correspond to a need.

Footer

_deskto

p_003

Legal

Mandatory

Roll Over on a text/icon : the text

become green and the cursor


Page | 14

become a hand

Click on a text: display the page.

Click on Arval.com (or the icon):

display the arval.com page in

another tab.

TABLET DESIGN


Footer_t

ablet_00

1

Social

networks

Not Mandatory

Tap on the icon or on the text:

display the social network page in

another window.

Footer_t

ablet_00

2

Links

Mandatory

Tap on a text: display the page,

the navigation of this heading

and the “White bar_on” version

of the header if the page

correspond to a need.

Footer_t

ablet_00

3

Legal

Mandatory

Tap on a text: display the page.

Tap on Arval.com (or the icon):


another tab.

MOBILE DESIGN


Footer_

mobile_

001

Social

networks

Not Mandatory

Tap on the icon: display the

social network page in another

window.


Page | 15

Footer_

mobile_

002

Links

Mandatory


The navigation of this heading

and its linked “need” (if the page

correspond to a need) will be

update in the burger menu.

Footer_

mobile_

003

Legal

Mandatory


Tap on Arval.com (or the icon):


another tab.

IV.1.3. Element 03 – Sticky bar [ELE 003]

The sticky bar is a fixed element at the bottom of the website. It follows the user while he is

scrolling in the page.

This element is mandatory except on the news pages.

ADMINISTRATION.

In the BO the contributor can manage the contact information displayed in the sticky bar.

This contacts may be different from a country to another. Contacts information can also be

different from a page to another (linked to the target of the page).

DESKTOP DESIGN


Stiky_de

sktop_0

01

Contacts

Mandatory

Roll Over on the icon or on the

text : the cursor become a hand

Click on the icon or on the email

contact: display the form page or

open the mailto in another

window.

Click on the icon or on the call

back contact: display the form


Page | 16

page or open the mailto in

another window.

Click on the icon or on the chat



window.

Commenté [AF7]: To be precised



Page | 17

TABLET DESIGN


Sticky_t

ablet_00

1

Contact

Mandatory

Tap on the icon or on the email



window.

Tap on the icon or on the call

back contact: display the form

page or open the mailto in

another window.

Tap on the icon or on the chat



window.

SPECIFIC BEHAVIOUR > The user can directly call the

number when clicking on the

number / phone icon

MOBILE DESIGN


Sticky_

mobile_

001

Contact

Mandatory

Tap on the email icon: display the

form page or open the mailto in

another window.

Tap on the call back icon: display

the form page or open the mailto

in another window.

Tap on the chat icon: display the

form page or open the mailto in

another window.



phone icon





Page | 18

IV.1.4. Element 04 – Breadcrumbs [ELE 004]

It is a mandatory element on the website.

The breadcrumb follow the segment pages structure.

Example: SME home page > why FSL?

All the segments home page are symbolised by a home icon.

The user can access to the page will clicking on a part of the breadcrumb.

IV.1.5. Element 05 – Hyperlink text [ELE 005]

ADMINISTRATION.

In the BO the contributor can add hyperlinks in the CKeditor.

While integrated in the BO, the texts will change graphically in FO. Rollover or not: the text

become green.

IV.2. Template 02 – Home Pages [TEMP 002]

ID TYPE DESCRIPTION

[ELE

001] 1st line

Composed with:

- a 3 columns slider + green bloc & a Search engine column

- a slider

[ELE

002] 2nd line Composed with 4 short cuts or 4 offer push

[ELE

003] 3rd line 2, 3, 4 or 6 internal page / twitter push


Page | 19


Page | 20

IV.2.1. Element 01 – 1st Line [ELE 001]

The first line is composed with the search engine (only if some offers are available in the Drupal

CMS) and a 3 columns slider or only with a slider.

The green box will display the title and the call to action link to the image of the slider.

ADMINISTRATION.

In the BO the contributor can manage:

- The images

- The green Box

OFFERS LIST: e.g. bellow

SLIDER IMAGES:

Automatic insert of the slides numbers + browsing buttons (right / left arrows)


Page | 21

• If only 1 slide no slide number, no arrow

• Slides limited to 8

Image’s size is fixed:

• 2 different sizes : 3 and 4 columns

• If only 1 image for the 4 columns style is uploaded in the CMS, then the image will

be move on the right to take 3 columns if the slider need to be on 3 columns

The size of the image will be fixed: based on a max width: 1420px

GREEN BOX ON THE IMAGE:

Title (optional)

Subtitle (optional)

Button with a link to an internal/external page (_blank))

DESKTOP DESIGN


HPL1_de

sktop_0

01

Search

engine

Not Mandatory – displayed

only if offers are available in

Drupal.

Click on a field: display of the

dropdown menus. The user can

select several types, several

marks but only 1 model.

Click on “Submit”: open the

results page in the same window.

HPL1_de

sktop_0

02

Slider (3

or 4

columns)

Mandatory

Click on the bullet point: display

the image and its green box in

the slider.

SPECIFIC BEHAVIOUR.

On desktop the user can display

the next or the previous image

while clicking on the left and right

arrows.


Page | 22

HPL1_de

sktop_0

03

Green box

Not mandatory on an offer

Click on the white button: display

the page and the navigation of its

heading.

TABLET DESIGN


HPL1_ta

blet_00

1

Search

engine



Drupal.

Tap on a field: display of the




Tap on “Submit”: open the


HPL1_ta

blet_00

2

Slider (3

or 4

columns)

Mandatory

Tap on the bullet point: display


the slider.

SPECIFIC BEHAVIOUR.

On tablet the user can display the

next or the previous image while

“swiping” left or right.

HPL1_ta

blet_00

3

Green box


Tap on the white button: display


heading.


Page | 23

MOBILE DESIGN


HPL1_m

obile_00

1

Search

engine



Drupal.





Tap on “Submit”: open the


HPL1_m

obile_00

2

Slider (3

or 4

columns)

Mandatory



the slider.

SPECIFIC BEHAVIOUR.

On mobile the user can display


while “swiping” left or right.

HPL1_m

obile_00

3

Green box


Tap on the white button: display


heading.

IV.2.2. Element 02 – 2nd Line [ELE 002]

The second line is composed by 4 push. Either 4 Need or 4 offers depending of the HP role.

The 4 short cuts (I need) land to a segment HP or an internal page.


Page | 24

The 4 offer push can be displayed if offers are available and land to an offer page.

ADMINISTRATION.


- The 4 needs he wants to highlight on the home page

- The 4 offers he wants to push on the home page

I NEED SHORT CUT:

Icon

Title

Subtitle

OFFERS PUSH: e.g. bellow

DESKTOP DESIGN


HPL2_de

sktop_0

01

Short cuts

Mandatory on the level 1 HP

Roll Over on the block : the icon,

the subtitle and the + become

green

Click on a block: display the

linked page (segmented HP or an

internal page).

HPL2_de

sktop_0

02

Offer push

Not Mandatory – displayed on

level 2 HP only if offers are

available in Drupal.

Roll Over on the block : the +

become green

Click on the push: display the

offer page.

TABLET DESIGN



Page | 25

HPL2_ta

blet_00

1

Short cuts


Tap on a block: display the linked

page (segmented HP or an

internal page).

HPL2_ta

blet_00

2

Offer push




Tap on the push: display the offer

page.

MOBILE DESIGN


HPL2_ta

blet_00

1

Short cuts



page (segmented HP or an

internal page).

HPL2_ta

blet_00

2

Offer push




Tap on the push: display the offer


Page | 26

page.

IV.2.3. Element 03 – 3nd Line [ELE 003]

The third line is composed with 2, 3, 4 or 6 push landing to an internal page.

The Twitter push in not clickable.

ADMINISTRATION.


- The number of push he want to display on the HP

o He can combine 2, 3, 4 or 6 push among the different push version including 1

twitter push and 1 news push maximum (e.g. following examples)


Page | 27

- The type of push and its content :

o Standard push

IMAGE (The size of the image will be fixed: XXX max width

TITLE

TEXT

o Push video


TITLE

PLAY ICON


Page | 28

o News push (fixed title : our latest news)


TITLE

o Twitter push (automatic content: display the latest Twit from Arval). Image per

default available in the BO.

- The size of the push :

o Little one

o Big one

DESKTOP/TABLET DESIGN


HPL3_de

sktop_0

01

Standard

push


linked page


Page | 29

HPL3_de

sktop_0

02

Push_vide

o


linked page

HPL3_de

sktop_0

03

News

push


linked page

HPL3_de

sktop_0

04

Twitter_p

ush

No action available


Page | 30

MOBILE DESIGN


HPL3_de

sktop_0

01

Standard

push


page

HPL3_de

sktop_0

02

Push_vide

o


page

HPL3_de

sktop_0

03

News

push


page

HPL3_de

sktop_0

04

Twitter_p

ush

No action available


Page | 31

IV.3. Templates 03 – News Pages [TEMP 003]

ID TYPE DESCRIPTION

[ELE

001] Contact

A fixed column showing the press contact, some relevant

publications (2) and a link to arval.com

[ELE

002] Search engine

The search engine is mandatory on this pages if more than 20

news are published.

This search engine is also available on the Press releases page (if

more than 20 press releases are published).

The user can search by key words or make an advanced search :

sort by themes and sort by dates (Drupal calendar or native

calendar of the device)

[ELE

003] Navigation menu

2nd navigation level. Display when 2 subheadings (news, press

releases, they talk about us) are available on the web site

[ELE

004] News_HP The default page displayed when the use click on the news heading

[ELE

005] News Page The default page display if only 1 news display

[ELE

006] Press Release Not mandatory subheading of the news heading

[ELE

007] They talk about us Not mandatory subheading of the news heading

The sticky footer will not be displayed on this pages.

IV.3.1. Element 01 – Press Contact [ELE 001]

ADMINISTRATION.


- Press contact information:

o Title

o Text

o Picture and press contact name

o Address

o Telephone number

o Email address

- 2 publications push

o Title

o Date


Page | 32

o Title

o Link to the internal page

- Arval.com link

o Title

o Text

DESKTOP DESIGN


PressCo

ntact_de

sktop_0

01

Contact

Mandatory

Click on the email : open a mailto

Click on a publication: display the

linked page

Click on the earth icon or on

Arval.com: display arval.com in

another window

TABLET DESIGN


PressCo

ntact_ta

blet_00

1

Contact

Tap on the email : open a mailto

Tap on a publication: display the

linked page

Tap on the earth icon or on


another window

MOBILE DESIGN



Page | 33

PressCo

ntact_m

obile_00

1

Contact

Tap on the email : open a mailto

Tap on a publication: display the

linked page

Tap on the earth icon or on


another window

SPECIFIC BEHAVIOUR.

On mobile the user can directly

call while taping on the phone

number.

IV.3.2. Element 02 – Search engine [ELE 002]

The search engine is available for the news subheading and for the Press release subheading.

ADMINISTRATION.

In the BO the contributor can manage the themes: create a new one, delete. A news can only be

linked to one theme.

When he will enter a news in the BO, he will be able to add as many key word as he want to tag

the news.

DESKTOP DESIGN

Search_

Desktop

_001

Search

engine

Mandatory when more than

20 articles are displayed

Click in the search field: the user

can start entering a word.

Click on the magnifying glass:

The word become active (green

background + cross). Display the

articles containing the key

word(s).

If no result available: display 0

Article. No news / press release is

displayed. The “past activities” is

still available.

Click on advanced search:

open/closed the advanced search

Click on the cross of the key word

: the key word disappear


Page | 34

SPECIFIC BEHAVIOUR.

On desktop the user can directly

launch the search while clicking

on enter.

Search_

Desktop

_002

Search

engine



Click on the theme word: the

button become green with white

type (on) / become grey again

(off)


Display the articles containing the

key word(s) and the themes.




still available.

Click on a date field: open/closed

calendar. Per default today’s date

is display in the fields. (Drupal

native calendar is used)

TABLET DESIGN

Search_

Tablet_0

01

Search

engine



Tap in the search field: the user


Tap on the magnifying glass: The

word become active (green



word(s).




still available.

Tap on advanced search:


Tap on the cross of the key word


SPECIFIC BEHAVIOUR.

On tablet the user can directly

launch the search while taping on


Page | 35

enter.

Search_

Tablet_0

02

Search

engine



Tap on the theme word: the



(off)

Tap on the magnifying glass:






still available.

Tap on a date field: open/closed


is display in the fields. (Drupal

native calendar is used)

MOBILE DESIGN

Search_

Mobile_

001

Search

engine



Tap in the search field: the user


Tap on the magnifying glass: The

word become active (green



word(s).




still available.

Tap on advanced search:


Tap on the cross of the key word


SPECIFIC BEHAVIOUR.

On mobile the user can directly

launch the search while taping on

enter.


Page | 36

Search_

desktop

_002

Search

engine



Tap on the theme word: the



(off)

Tap on the magnifying glass:






still available.

Tap on a date field: open/closed


is display in the fields.

SPECIFIC BEHAVIOUR.

On mobile the calendar will be

replace by the native dropdown

menu calendar of this device.

IV.3.3. Element 03 – Navigation Menu [ELE 003]

ADMINISTRATION.

In the BO the contributor can manage the title for this 3 sections. If only 1 section is available: this

sub navigation menu will not be displayed.

DESKTOP DESIGN


Menu_D

esktop_

001

Navigatio

n

Mandatory as soon as more

than 2 subheading are

available

Click on one of the title : display

the linked subheading page

(news HP / press release or they

talk about us)

TABLET DESIGN



Page | 37

Menu_T

ablet_00

1

Navigatio

n



available

Tap on one of the title : display

the linked subheading page

(news HP / press release or they

talk about us)

MOBILE DESIGN


PressCo

ntact_m

obile_00

1

Contact



available

Tap on the dropdown menu field

: display the subheading list

SPECIFIC BEHAVIOUR.

On mobile the user can select a

page via the native dropdown

menu of his devise.

IV.3.4. Element 04 – News HP [ELE 004]

This page display 3 latest news published (in the white background) and 3 other past news.

The results are displayed in the white part of the page. The user can display others news thanks to

a pagination system at the bottom of the page page number.

ADMINISTRATION.


- Press contact column (e.g. IV.3.1 Press contact)

- Theme list for an advanced search (e.g. IV.3.2 Search engine)

- News articles (e.g. IV.3.5 News page)


Page | 38

DESKTOP DESIGN


NewsHP

_deskto

p_001

News HP

Not Mandatory

Click on a news (image, title or

text): display the news page

Click on “Recent News” (when the

user in on the 2 or next page):

display of the previous page, the

number of the displayed page

become white with a green

background.

Click on “Older News” (when the

user is maximum on the second

to last page): display of the next

page, the number of the

displayed page become white

with a green background.

Click on a page number: display

the page, the number become

white with a green background.


Page | 39

TABLET DESIGN


NewsHP

_Tablet_

001

News HP

Not Mandatory

Tap on a news (image, title or

text): display the news page

Tap on “Recent News” (when the





background.

Tap on “Older News” (when the






Tap on a page number: display




Page | 40

MOBILE DESIGN


NewsHP

_mobile

_001

Contact

Not Mandatory

Tap on a news (image or title):

display the news page






background.










SPECIFIC DISPLAY.

On mobile the subtitle of the new

will not be displayed.

IV.3.5. Element 05 – News Page [ELE 005]

ADMINISTRATION.


- TITLE

- THEME (only one – mandatory)

- STATUT : rough, published, archive

- IMAGE (size : XXXpx). 2 per default image can also be used.

- SUBTITLE

- TEXT : ckeditor

- KEY WORDS (list, free entry)


Page | 41

DESKTOP DESIGN


News_d

esktop_

001

News

page

Not Mandatory

Roll Over on a button: its

background become darker.

Click on back: the user come

back to the HP news. If only one

news is displayed, this button

does not exist.

Click on a social network button:

the news is shared on the user

social network.

Click on print: display of the

news in a “friendly printing

format”.

Click on a key word (Customer

service): display the news HP

with all the “Customer service”

key word tagged news.

Click on view more button: the

button disappear and display 3

other linked news.


Page | 42

TABLET DESIGN


News_ta

blet_00

1

News

page

Not Mandatory

Tap on back: the user come back

to the HP news. If only one news

is displayed, this button does not

exist.

Tap on a social network button:


social network.

Tap on a key word (Customer




Tap on view more button: the


other linked news.

SPECIFIC DISPLAY.

On tablet the print buttons of the

new will not be displayed.


Page | 43

MOBILE DESIGN


News_m

obile_00

1

News

page

Not Mandatory

Tap on back: the user come back

to the HP news. If only one news

is displayed, this button does not

exist.

Tap on a social network button:


social network.

Tap on a key word (Customer




Tap on view more button: the


other linked news.

SPECIFIC DISPLAY.

On mobile the print buttons of

the new will not be displayed.

On mobile the text of the latest

news is not displayed.


Page | 44

IV.3.6. Element 06 – Press Releases [ELE 006]

This page display 4 latest press releases published. The results are displayed in the white part of

the page. The user can display others news thanks to a pagination system at the bottom of the

page.

ADMINISTRATION.



- Theme list for an advanced search (e.g. IV.3.2 Search engine)

- Press release links (e.g. bellow)

ADMINISTRATION.


- TITLE

- THEME (only one – mandatory)


- SUBTITLE

- KEY WORDS (list, free entry)

- ADD A PDF

DESKTOP DESIGN


PressRel

eases_d

esktop_

001

Press

Releases

Not Mandatory

Roll Over on the PDF link (icon /

text): the icon / text become

green.

Click on the Download icon /

text: open the press release PDF

in another tab.

Click on “Recent News” (when the





background.

Click on “Older News” (when the





Page | 45



Click on a page number: display



TABLET DESIGN


PressRel

eases_t

ablet_00

1

Press

Releases

Not Mandatory

Tap on the Download icon / text:

open the press release PDF in

another tab.






background.











Page | 46

MOBILE DESIGN


PressRel

eases_

mobile_

001

Press

Releases

Not Mandatory

Tap on the Download icon / text:

open the press release PDF in

another tab.






background.










IV.3.7. Element 07 – They Talk About Us [ELE 007]

This page display a list of external website links where Arval is quoted. The links are displayed in

the grey part of the page.

ADMINISTRATION.



- Key words list for a search (e.g. IV.3.2 Search engine)


Page | 47

- External website links (e.g. bellow)

ADMINISTRATION.


- IMAGE (size XXXpx)

- TITLE

- SUBTITLE


- LINK :

o KEY WORDS (list, free entry)

o TITLE

o ADD AN EXTERNAL LINK

DESKTOP DESIGN


Talk_de

sktop_0

01

External

links

Not Mandatory

Roll Over on the link: the link

become green.

Click on the text / the link: open

the link in another tab.


Page | 48

TABLET DESIGN


Talk_tab

let_001

External

links

Not Mandatory

Tap on the text / the link: open



Page | 49

MOBILE DESIGN


Talk_mo

bile_001

External

links

Not Mandatory

Tap on the text / the link: open



Page | 50

IV.4. Templates 04 – Offer pages [TEMP 004]

Each offer will be define by the contributor:

- Via an excel file

- Directly in the CMS

ADMINISTRATION.

The contributor can manage:

Element Mandatory Administrable Source Description

Category Y N pre-defined list

Choice 1 Citycar

Choice 2 Hatchback

Choice 3 Saloon

Choice 4 Station wagon

Choice 5 Coupe/cabriole

Choice 6 Monospace

Choice 7 SUV- crossover

Choice 8 LCV

Choice 9 Truck solutions only for IT

Picture Y

Y excel file (or offer) upload zip file with X images (number 1 = search result

image)

Mark + Model Y Y excel file (or offer)

text

Version Y Y excel file (or offer)

text

Promotion N Y excel file (or offer)

yes or no

Label New model or

available now N Y select one cf.arval list of choices / country

Choice 1

Choice 2

Caption Essential

information 1 Y N pre-defined cf.arval list of choices / country

Caption Essential


Caption Essential


Caption Essential


Caption Essential

information 5 Y

N

pre-defined cf.arval list of choices / country

Essential information 1 Y Y excel file (or offer)

text


text


text


text


Page | 51


text

from Y N pre-defined

[Price] Y Y excel file (or offer)

text

TTC / month* Y N pre-defined

[Price] N Y excel file (or offer)

text

[number] Y Y excel file (or offer)

text

miles/year or miles Y N pre-defined

[number] Y Y excel file (or offer)

text

months Y N pre-defined

[X] % Kind tax N Y excel file (or offer)

text

Generic mention N Y excel file (or offer)

to be checked with local legals - text

End of the offer date N

Y excel file (or offer) Useful for mention : End of the offer date + text (pre-

defined)

Package N Y excel file (or offer) Text and / or an Icon

Services N Y excel file (or offer) Multiple choice in a list

Mileage/year Y Y excel file (or offer) text

Duration Y Y excel file (or offer) text

Transmission N Y excel file (or offer) text

Doors N Y excel file (or offer) text

Engine size N Y excel file (or offer) text

CO2 N Y excel file (or offer) Choice in a list (A to G)

Caption Characteristic

1 N

N pre-defined


2 N

N pre-defined


3 N

N pre-defined


4 N

N pre-defined


5 N

N pre-defined


6 N

N pre-defined


7 N

N pre-defined


8 N

N pre-defined


9 N

N pre-defined


10 N

N pre-defined

Characteristic 1 N Y excel file (or offer) text










Page | 52


Exclusive optionals N Y excel file (or offer) List of optional separated by ;

ID TYPE DESCRIPTION

[ELE

001] Home Displays when clicking on ‘Find a car’ in the navigation menu

[ELE

002] Search results List of offer results with filters

[ELE

003] Offer page Details about the offer / the vehicle

[ELE

004] Compare Overlay Permit to compare between 2 or 3 vehicles / offers

[ELE

005]

Manufacturer

mosaic Displays all the manufacturer brands available with Arval.

[ELE

006]

Manufacturer

calendar Displays the car releases per month

[ELE

007] Manufacturer Page Displays all the offers available per manufacturer brands

[ELE

008] Promotion Page Displays all the offers available per promotion

IV.4.1. Element 01 – Find a car Home - [ELE 001]

This page will be display when the user will click on “Find a car” heading and when more than 12

offers are available in the BO. When 1 to 12 offers are available in the BO, 1-12-results.jpg will be

displayed.

ADMINISTRATION.


- The offer list (e.g. IV.4 Offer pages)

- The offers he wants to display in the slider (between 1 and 8) - The Slider works in a

classical way: the images automatically slide (every XX sec) or slide while the user make an

action (e.g. bellow). The slider can contains between 1 and 8 images. We need an

automatic insert of the bullet point number and browsing buttons (right / left arrows). If

only 1 slide: no slide number, no arrow.

- IMAGE OF THE VEHICLE (for the slider),

- OFFER INTRO

- PROMOTION TITLE (not mandatory)

- PROMOTION TEXT (not mandatory)

- PROMOTION LINK (internal page / not mandatory)


Page | 53

ADJUSTMENTS

The “Sort by” dropdown menu need to be delete on this page


Page | 54

DESKTOP DESIGN


HPFAC_

desktop

_001

Search

engine

Mandatory – displayed only if

more than 13 offers are

available and valid in Drupal.

Roll Over on the button: the

button become darker

Roll Over on the “see XX offers”:

the text and the icon become

green

Click on a field: display of the

dropdown menu. The user can



Source : available offers in the

BO

Click on “Search”: open the

Search results page in the same

window.

Click on “See XX car offer”: open

the Search results page with all

the offers available in the same

window.

HPFAC

_deskto

p_002

Slider (3

columns)

Mandatory

It will be composed by :

- Picture

- Kind tax (NM)

- Label (NM)

- Mark / model

- Derivative

- Service package (NM)

- 5 Essentials (caption +

data)

- Month / mileage

- Price

- Old price (NM) – display

Promotion label + promo

format



Click on the bullet point: display

the image and the information of


Page | 55

the offer in the slider.

Click on “see offer” button:

display the offer page in the

current window.

Source of the information /

image displayed: available

offers in the BO

SPECIFIC BEHAVIOUR.

On desktop the user can display

the next or the previous offer

while clicking on the left and right

arrows.

HPFAC

_deskto

p_003

Title

Mandatory

The title is predefined per country

and the number of offer available

will be automatically displayed in

the (XX) part

HPFAC

_deskto

p_004

Promo

Not Mandatory

It’s composed by a title (in the

green part), max XX characters

and a text (in the grey part), XX

characters max. Can be in bold.

Click on the promotion part:

display the promotion page in the

current window.

HPFAC

_deskto

p_005

Offers HP

Mandatory

6 offers will be display on the HP.

(rules to be defined with Arval:

automatic / defined in the BO?)


- Picture

- Kind tax (NM)

- Label (NM)

- Mark / model

- Derivative

- Month / mileage

- Price



format

- Arrow Icon

Roll Over on all the offer square:

The contour become thicker and

grey or green for a promo (X px).

Click on all the offer square:

Commenté [AF12]: Or an image ??

Commenté [AF13]: A preciser avec Arval


Page | 56


current window.

HPFAC

_deskto

p_006

Offers

mentions

Mandatory

A button will automatically shows

the number of offers available on

the website (in a darker green

square).

The mentions linked to the offers

displays on the page will be

display here.


button become darker.

Click on all the button: display

the search result page with all

offers available in the BO in the

current window.

TABLET DESIGN


HPFAC_t

ablet_00

1

Search

engine



Drupal.





Tap on “Search”: open the results

page in the same window.

Tap on “See XX car offer”: open

the Search results page with all

the offers available in the same

window.

HPFAC

_tablet_

002

Slider (3

columns)

Mandatory


- Picture

- Kind tax (NM)

- Label (NM)


Page | 57

- Mark / model

- Derivative



data)

- Month / mileage

- Price



format


the image and the information of


Tap on “see offer” button: display

the offer page in the current

window.

Source of the information /

image displayed: available

offers in the BO

SPECIFIC BEHAVIOUR.




HPFAC

_tablet_

003

Title

Mandatory




the (XX) part

It will also be possible to add an

introduction text.

HPFAC

_tablet_

004

Promo

Not Mandatory




characters max. Can be in bold.

Tap on the promotion part:


current window.

HPFAC

_tablet_

005

Offers HP

Mandatory

6 offers will be display on the HP.

(rules to be defined with Arval:

automatic / defined in the BO?)


- Picture

- Kind tax (NM)




Page | 58

- Label (NM)

- Mark / model

- Derivative

- Month / mileage

- Price



format

- Arrow Icon

Tap on all the offer square:


current window.

HPFAC

_tablet_

006

Offers

mentions

Mandatory


the number of offers available on

the website (in a darker green

square).



display here.


the search result page with all

offers available in the BO in the

current window.

MOBILE DESIGN


HPFAC

_mobile

_001

Search

engine



Drupal.





Tap on “Search”: open the results

page in the same window.

Tap on “Advanced search”: open

the filters page

HPFAC

_mobile

_002

Slider

SPECIFIC BEHAVIOUR.

On mobile this part is not

displayed.

HPFAC

_mobileTitle

Mandatory



Page | 59

_003 and the number of offer available


the (XX) part

HPFAC

_mobile

_004

Promo

Not Mandatory




characters max (grey

background). Can be in bold.

Tap on the promotion part:


current window.

HPFAC

_mobile

_005

Offers HP

Mandatory

4 offers will be display on the

HP. (rules to be defined with

Arval: automatic / defined in the

BO?)


- Picture

- Kind tax (NM)

- Label (NM)

- Mark / model

- Derivative

- Month / mileage

- Price



format

- Arrow Icon



current window.

HPFAC

_mobile

_006

Offers

mentions

Mandatory



display here.

1-12-results.jpg :




Page | 60


Page | 61

IV.4.2. Element 02 – Search results - [ELE 002]

This page is displayed when a search has been done (from the HP or form the offer HP) and more

than 1 offer match the search.

If no result is available then display the +12-HP-NoResult.jpg page.

FILTER DETAILS:

- Car category : tick boxes

- Car manufacturer : tick boxes

- Price range : select scale with 2 cursors (range : 50€/£ per 50) – min = lowest offer price /

max = highest offer price

- Offer type : tick boxes

- Mileage / year : tick boxes

- Duration : tick boxes

- Transmission : tick boxes

- Doors : tick boxes

- Engine size : select scale with 2 cursors (range : 100cc per 100cc) – min = lowest engine

size / max = highest engine size

- CO2 : tick boxes (icon + text)

ADJUSTMENTS

Delete the number of car manufacturer selected (in the green square).

DESKTOP DESIGN



Page | 62

SR_desk

top_001 Filters

Mandatory- display only the

criteria available in the offer

displayed. If only 1 criteria

available then the criteria is

fixed (for example if only

saloon car category is

displayed in the search result

: the box will be tick and non-

untick able and saloon will be

the only criteria visible)

Per default they are closed

excepted the Car category

Click on the criteria title : display

the choices, the title and the

arrow become green and the

arrow change

Click on one criteria / change the

cursors: the box will be tick /

untick – the new value is

displayed and the offer results is

update linked to this new criteria.


BO

SR

_deskto

p_002

Title&Sorti

ngs

Mandatory




the XX part

Dropdown menu Show :

10 / 20 / 30 / 50 / All offers

Dropdown menu Sort by :

Recency / Price

Click on one of the dropdown

menu: display choices.

Click on one of the criteria:

reorganized the results.


Page | 63

SR

_deskto

p_003

Results

Mandatory

6 offers will be display on this

page. (rules to be defined with


BO?)


- Picture

- Kind tax (NM)

- Label (NM)

- Mark / model

- Derivative



data)

- Month / mileage

- Price



format

- More detail + Arrow Icon




Click on all the offer square:


current window.

SR

_deskto

p_004

Offers

mentions

Mandatory


the number of offers available

linked to the user search (in a

darker green square). It will

disappear when all the offers will

be displayed on the page.



display here.




the 6 next offers after the

previous one.

Commenté [AF18]: Manque le lien compare



Page | 64

SR_desk

top_005

Compare

bar

Mandatory

When the user want to compare

2 or 3 vehicles he can add them

in the compare bar.

It displays :

- Picture

- Mark/model

- Derivative

- Price

- Promo (NM)

- Button Compare them as

soon as 2 vehicle are

added




the compare page (linked to the

2 or 3 vehicles)

Click on the cross : delete the

vehicle of the compare bar and

do not display the button if

relevant

TABLET DESIGN



Page | 65

SR_tabl

et_001 Filters







displayed in the search result

: the box will be tick and non-

untick able and saloon will be

the only criteria visible)



Tap on one criteria / change the



displayed and the offer results is

update linked to this new criteria.


BO

SR

_tablet_

002

Title&Sorti

ngs

Mandatory




the XX part

Dropdown menu Show :

10 / 20 / 30 / 50 / All offers


Recency / Price

Tap on one of the dropdown


Tap on one of the criteria:



Page | 66

SR

_tablet_

003

Results

Mandatory




BO?)


- Picture

- Kind tax (NM)

- Label (NM)

- Mark / model

- Derivative



data)

- Month / mileage

- Price



format

- More detail + Arrow Icon



current window.

SR

_tablet_

004

Offers

mentions

Mandatory


the number of offers available

linked to the user search (in a

darker green square). It will

disappear when all the offers will

be displayed on the page.



display here.

Tap on all the button: display the

6 next offers after the previous

one.

SR_tabl

et_005

Compare

bar

Mandatory

When the user want to compare

2 or 3 vehicles he can add them

in the compare bar.

It displays :

- Picture

- Mark/model

- Derivative

- Price

Commenté [AF20]: Manque le lien add to compartor



Page | 67

- Promo (NM)

- Button Compare them as

soon as 2 vehicle are

added

Tap on all the button: display the

compare page (linked to the 2 or

3 vehicles)

Tap on the cross : delete the

vehicle of the compare bar and

do not display the button if

relevant

MOBILE DESIGN



Page | 68

SR_mob

ile_001 Filters







displayed in the search

results: the box will be tick

and non-untick able and

saloon will be the only criteria

visible). Display this page

when the user click on

advanced search.



Tap on one criteria / change the



displayed.

Tap on the search button: the

offer results is update linked to

this new criteria


BO

SR

_mobile

_002

Title&Sorti

ngs

Mandatory




the XX part


Recency / Price

Tap on one of the dropdown


Tap on one of the criteria:


Tap on advanced search: display

the filters page.


Page | 69

SR

_mobile

_003

Results

Mandatory




BO?)


- Picture

- Kind tax (NM)

- Label (NM)

- Mark / model

- Derivative

- Price



format

- Arrow Icon



current window.

SR

_mobile

_004

Offers

mentions

Mandatory



display here.

Tap on “Filter my search” button:

display the filters page.

SR_mob

ile_005

Compare

bar

SPECIFIC BEHAVIOUR

The compare function will not be

available on mobile

IV.4.3. Element 03 – Offer page - [ELE 003]

This page is displayed when a user has clicked on an offer (from the HP or form the result page,

from a slider…).

ADMINISTRATION.


- The offer details (e.g. IV.4 Offer pages)

- IMAGES OF THE VEHICLE (for the slider),



Page | 70

- Services icons / title / texts

- Content layer

- Package name / logo / linked page presenting all the packages

- Anchors of the sticky bar (Max 5 titles)


Page | 71


Page | 72

DESKTOP DESIGN


OP_desk

top_001 Slider

Mandatory

The slider can display from 1 to

10 pictures of the vehicle. (no

bullet points).

It will display :

- Picture

- Kind tax (NM)

- Label (NM)

- Mark / model

- Derivative


- Services icons and title

- Month / mileage

- Price



format

- Arrows Icon

- Get a quote button



Click on an arrow: display the

previous / next picture.

Click on get a quote button: scroll

in the page directly to the form.


BO

OP_desk

top_002 Promo

Not Mandatory

Same as below.


Page | 73

OP_desk

top_003

Content

layer

Not Mandatory

The administrator can add a

content layer in the offer page.

The specifications are describe in

the dedicated functional

specifications for the layers.

OP_desk

top_004

Specificati

ons

Mandatory

Here are displayed the

information linked to an offer and

available in the BO (or excel file)

:

- Titles : predefined

- 5 essentials : captions +

text

- 10 characteristics :

captions + text

- Exclusive optional : list by

alphabetic order

OP_desk

top_005

Services

includes

Mandatory

Here are displayed the services

included in the offer - available in

the BO (or excel file) :

- Service pack name with or

without logo (NM)

- Services icon + title + text

- Discover the other packs

button (NM)

- Offer mentions



Click on the button: display the

“package page” in another

window.

OP_desk

top_006

Request a

quote

Mandatory





Page | 74

OP_desk

top_007

Similar

vehicle

Not Mandatory

Here are displayed the similar

offers.

- Same category

- Same price

- If less of 3 results or no

result display 3 offers by

random

- If less than 3 similar offer

available : do not display

the button






Click on one offer square: display


window.

Click on the button see all similar

vehicle: display the search result

page with same price and

categories filtered.

OP_desk

top_008

Content

layer 2

Not Mandatory






OP_desk

top_009 FAQ

Not Mandatory

The administrator can add FAQ

on the page. It will be an extract

of the FAQ page (based on key

word / tags).

OP_desk

top_010 Sicky bar

Mandatory

When the user will scroll down in

the page a sticky bar will appear.

It will contains :

- Mark / model

- Derivative

- 5 anchors (max) titles

- Price

Commenté [AF24]: A verifier avec Arval


Page | 75

- Promo (NM)




Click on one anchor: directly go

to the linked content in the page

Click on the get a quote button:

directly go to the form in the

page

TABLET DESIGN


OP_tabl

et_001 Slider

Mandatory



bullet points).

It will display :

- Picture

- Kind tax (NM)

- Label (NM)

- Mark / model

- Derivative



- Month / mileage

- Price



format

- Arrows Icon


Tap on an arrow: display the

previous / next picture.

Tap on get a quote button: scroll



BO

SPECIFIC BEHAVIOUR.





Page | 76

OP_tabl

et_002 Promo

Not Mandatory

Same as below.

OP_tabl

et_003

Content

layer

Not Mandatory






OP_tabl

et_004

Specificati

ons

Mandatory




:



text


captions + text


alphabetic order

OP_tabl

et_005

Services

includes

Mandatory





without logo (NM)



button (NM)

- Offer mentions

Tap on the button: display the

“package page link” in another

window.

OP_tabl

et_006

Request a

quote

Mandatory



Page | 77

OP_tabl

et_007

Similar

vehicle

Not Mandatory


offers.

- Same category

- Same price



random



the button

Tap on one offer square: display


window.

Tap on the button see all similar




OP_tabl

et_008

Content

layer 2

Not Mandatory






OP_tabl

et_009 FAQ

Not Mandatory

The administrator can add FAQ

on the page. It will be an extract

of the FAQ page (based on key

word / tags).

OP_tabl

et_010 Sicky bar

Mandatory



It will contains :

- Mark / model

- Derivative

- 5 anchors (max) titles

- Price

- Promo (NM)


Tap on one anchor: directly go to

the linked content in the page

Tap on the get a quote button:



Page | 78

directly go to the form in the

page

MOBILE DESIGN


OP_mob

ile_001 Slider

Mandatory



with bullet points).

It will display :

- Picture

- Kind tax (NM)

- Label (NM)

- Mark / model

- Derivative



- Month / mileage

- Price



format

- Arrows Icon


Tap on get a quote button: scroll



BO

SPECIFIC BEHAVIOUR.




OP_mob

ile_002 Promo

Not Mandatory

Same as below.


Page | 79

OP_mob

ile_003

Content

layer

SPECIFIC BEHAVIOUR.

On mobile this part will not be

displayed.

OP_mob

ile_004

Specificati

ons

Mandatory




:



text


captions + text


alphabetic order

Tap on one title : the title and the

arrow become green/grey, the

arrow change and display the

content / the content disappear

SPECIFIC BEHAVIOUR.


the next or the previous 5

characteristics while “swiping”

left or right.

OP_mob

ile_005

Services

included

Mandatory





without logo (NM)



button (NM)

- Offer mentions

Tap on one title : the title and the

arrow become green/grey, the

arrow change and display the

content / the content disappear

Tap on the button: display the

“package page link” in another

window.


Page | 80

OP_mob

ile_006

Request a

quote

Mandatory



phone icon

OP_mob

ile_007

Similar

vehicle

Not Mandatory


offers.

- Same category

- Same price



random



the button



window.

Tap on the button see all similar




SPECIFIC BEHAVIOUR.


the next or the previous similar

offer while “swiping” left or right.

OP_mob

ile_008

Content

layer 2

SPECIFIC BEHAVIOUR.


displayed.





Page | 81

OP_mob

ile_009 FAQ

SPECIFIC BEHAVIOUR.


displayed.

OP_mob

ile_010 Sicky bar

SPECIFIC BEHAVIOUR.


displayed.

IV.4.4. Element 04 – Compare overlay - [ELE 004]

This page/overlay is displayed when a user has clicked on the compare button in the compare bar.

He can close it while clicking on the cross at the top fight of the popin.

This overlay can display between 2 and 3 vehicles.

ADMINISTRATION.

Same as below, no specific request for this part.


Page | 82

DESKTOP DESIGN


CO_des

ktop_00

1

Vehicle

info

Mandatory – when only 2

vehicle are displayed the last

column will not be displayed.

This part display the first

information of the vehicle :

- Picture

- Kind tax (NM)

- Label (NM)

- Mark / model

- Derivative

- Month / mileage

- Price



Page | 83


format

- Arrows Icon




Click on the cross: close the

overlay and back on the results

page (based on the search)

Click on get a quote button: back

on the offer page and directly go

to the form in the page.


BO

CO_des

ktop_00

2

Specs

Mandatory




:



text


captions + text


alphabetic order

Per default they are all open

Click on the grey line (title): open

/ close the white part of the

table. The arrow change.

CO_des

ktop_00

3

Services

Mandatory




- Services icon + title by

alphabetic order

- Offer mentions

Per default open

Click on the grey line (title): open




Page | 84

CO_des

ktop_00

4

Sticky

Mandatory



It will contains for each vehice :

- Mark / model

- Derivative

- Price

- Promo (NM)

-

TABLET DESIGN


CO_tabl

et_001

Vehicle

info

Mandatory – when only 2

vehicle are displayed the last

column will not be displayed.

This part display the first

information of the vehicle :

- Picture

- Kind tax (NM)

- Label (NM)

- Mark / model

- Derivative

- Month / mileage

- Price



format

- Arrows Icon


Tap on the cross: close the

overlay and back on the results

page (based on the search)

Tap on get a quote button: back

on the offer page and directly go

to the form in the page.


BO

CO_tabl

et_002 Specs

Mandatory




:



text


Page | 85


captions + text

Exclusive optional : list by

alphabetic order

Tap on the grey line (title): open



CO_tabl

et_003 Services

Mandatory




- Services icon + title by

alphabetic order

- Offer mentions

Tap on the grey line (title): open



CO_tabl

et_004 Sticky

Mandatory

When the user will scroll

down in the page a sticky bar

will appear.

It will contains for each

vehice :

- Mark / model

- Derivative

- Price

- Promo (NM)

-

IV.4.5. Element 05 – Manufacturer mosaic - [ELE 005]

This mosaic is a part of the offer pages. It will be displayed on many page (manufacturer page,

search result, search page…). It shows all brands available with Arval.

ADMINISTRATION.

This part of the website is pre-defined.


Page | 86

DESKTOP DESIGN


MM_des

ktop_00

1

Manufactu

rer info

Mandatory

This part display all the brands.

Roll Over on a square: the logo

become white and the square

background become green



Click on a square: display the

manufacturer page (see below).

Click on manufacturer calendar:

display the manufacturer

calendar page (see below).

TABLET DESIGN


MM_des

ktop_00

1

Manufactu

rer info

Mandatory


Tap on a square: display the


Tap on manufacturer calendar:



This part of the website will never be displayed on the mobile.

IV.4.6. Element 06 – Manufacturer calendar - [ELE 006]

This page present all the new model that are / will be available per mark.

Per default the user will arrived on the current month.


Page | 87

ADMINISTRATION.

In the BO the administrator can add a mark a model and a label “new” or “restyle”.


Page | 88

DESKTOP DESIGN


Page | 89


MC_des

ktop_00

1

Manufactu

rer search

Mandatory

This part of the page is used to

enter and display only some

brands/model. The user can

search mark/ model


- If no result : display a

message : sorry there is

no result matching your

request

- If results: display only the

results. The month where

there is no result are

displayed

Click on the dropdown menu

show: display the dropdown

menu with “All” / “Restyle” and

“New” choices.

Click on a choice: display the

results linked to the “All” /

“Restyle” or “New” choices.

MC_des

ktop_00

2

Manufactu

rer

releases

Mandatory


display per month the new or

restyle brands/model. If is from

the BO.

Click on the arrow: Display the

previous / next month (NB : the

arrow is in a light grey when

there is nothing to display

before/after)

Click on the a mark/model:

display the manufacturer page

Click on the All manufacturer line

/ title: display the manufacturer

mosaic

TABLET DESIGN


Commenté [AF30]: A confirmer


Page | 90

MM_tabl

et_001

Manufactu

rer info

Mandatory


Tap on a square: display the


Tap on manufacturer calendar:



MC_tabl

et_002

Manufactu

rer

releases

Mandatory


display per month the new or

restyle brands/model. If is from

the BO.

Tap on the arrow: Display the

previous / next month (NB : the

arrow is in a light grey when

there is nothing to display

before/after)

Tap on the a mark/model: display

the manufacturer page

Tap on the All manufacturer line /

title: display the manufacturer

mosaic

SPECIFIC BEHAVIOUR.


next or the previous month while


IV.4.7. Element 07 – Manufacturer page - [ELE 007]

This page/overlay is displayed when a user has clicked on a manufacturer logo (manufacturer

mosaic).

ADJUSTMENTS

Delete the Need help block.

ADMINISTRATION.

The administrator can administrate in the BO:

Commenté [AF31]: A confirmer


Page | 91

- Title

- Intro

- Text

- Manufacturer logo : the size of the image will be fixed XXX px

- Offers’ title

- Form’s title

- Form’s subtitle

Commenté [AF32]: To be defined


Page | 92

DESKTOP DESIGN


MP_desk

top_001

Manufactu

rer info

Mandatory

This part display the information

and the offer of a manufacturer :

- Manufacturer grey logo

(image, png)

- Title

- Introduction

- Text

MP_desk

top_002 Offers

Mandatory


manufacturer offers.






window.

MP_desk

top_003 Form

Mandatory



TABLET DESIGN


MP_tabl

et_001

Manufactu

rer info

Mandatory




(image, png)

- Title

- Introduction

- Text



Page | 93

MP_tabl

et_002 Offers

Mandatory





window.



SPECIFIC BEHAVIOUR.




MP_tabl

et_003 Form

Mandatory

MOBILE DESIGN


MP_mob

ile_001

Manufactu

rer info

Mandatory




(image, png)

- Title

- Introduction

- Text

MP_mob

ile_002 Offers

Mandatory





window.



SPECIFIC BEHAVIOUR.



Page | 94




MP_mob

ime_003 Form

Mandatory

IV.4.8. Element 08 – Promotion page - [ELE 008]

This page/overlay is displayed when a user has clicked on a manufacturer logo (manufacturer

mosaic).

ADJUSTMENTS

Delete the Need help block.

Promotion text: must be centered on the page, the text aligned on the left and display on 3

columns max.

ADMINISTRATION.

The administrator can administrate in the BO:

- Title

- Promotion image : the size of the image will be fixed XXX px for desktop/tablet & XXXpx for

mobile

- Promo’s description text

- Promotion mention

- Form’s title

- Form’s subtitle


Commenté [AF36]: To be defined


Page | 95

DESKTOP DESIGN


PP_desk

top_001

Promo

info

Mandatory



- Promotion image

- Title

- Text


Page | 96

PP_desk

top_002 Offers

Mandatory








window.

MP_desk

top_003 Form

Mandatory



TABLET DESIGN


PP_table

t_001

Promo

info

Mandatory



- Promotion image

- Title

- Text

PP_table

t_002 Offers

Mandatory





window.



SPECIFIC BEHAVIOUR.






Page | 97

PP_table

t_003 Form

Mandatory

MOBILE DESIGN


PP_mobi

le_001

Promo

info

Mandatory



- Promotion image

- Title

- Text

PP_mobi

le_002 Offers

Mandatory





window.



SPECIFIC BEHAVIOUR.






Page | 98

PP_mobi

me_003 Form

Mandatory


TEMPLATE PAGES FONCTIONNAL SPECIFICATIONS · Then the “I NEED” banner automatically opens and...

Documents

Transcript of TEMPLATE PAGES FONCTIONNAL SPECIFICATIONS · Then the “I NEED” banner automatically opens and...