opdrachtgever website fo versienr - royal haskoningdhv€¦ · a.1. as an expert, i want to check...

71
Functional Design RHDHV Corporate website 30th of May 2013 Version 1.0 Jaron Barends (Interaction Designer) Jeroen Kasteleijn (Information Analist)

Upload: others

Post on 06-Jul-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design

RHDHV

Corporate website

30th of May 2013 Version 1.0

Jaron Barends (Interaction Designer)

Jeroen Kasteleijn (Information Analist)

Page 2: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 2 / 71

Table of contents

1 Introduction 5

1.1 Versions 5

1.2 Reference documents 5

2 Requirements 6

3 Goals 10

3.1 Users 10

3.2 User stories 10

4 Processes 12

4.1 Minimum viable solution 12

4.2 Improved Solution 14

5 Sitemap 17

5.1 Sitemap minimal viable solution 17

5.2 Sitemap improved solution 18

6 Templates 19

6.1 Corporate website (minimal viable solution) 20

T1 (Country) Homepage 21

T2 General overview page 22

T3 General detail page 23

T4 Search result page 24

T5 Contact page 25

T6 iFrame page 26

T7 Sitemap 27

T8 Offices page 28

6.2 Corporate website (improved solution) 29

T9 Office detail page 30

T10 Markets landing page 31

T11 Market overview page 32

T12 Sub-market page 33

T13 Contact lightbox 34

Page 3: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 3 / 71

T14 Services landing page 35

T15 Service detail page 36

T16 Project detail page 37

7 Functionalities 38

7.1 Template functions 38

F1 Header 38

F2 Pushbox component 39

F3 Main text/Image block component 40

F4 Content components 41

F5 General teaser component 42

F6 Forward links component 44

F7 Search services component 45

F8 Text block component 46

F9 Footer 47

F10 List component 48

F11 Contact block component 49

F12 Minimal teaser component 50

F13 Article component 51

F14 Search results 52

F15 Pagination 53

F16 No search results 54

F17 Office component 55

F18 Contact form 56

F19 Submenu component 58

F20 Office lister component 59

F21 iFrame 60

F22 Sitemap 61

F23 Big teaser component 62

F24 Lightbox 63

F25 Images component 65

F26 Related items carousel 66

F27 Location component 67

8 Glossary 68

Page 4: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 4 / 71

9 Approval 71

Page 5: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 5 / 71

1 Introduction

This document is the Functional Design (FD) for RHDHV Corporate website. This FD contains the following chapters:

User stories, most important journey’s that users make on the website;

User flows, most important user flows supported by the website;

Sitemap, de page structure of the website;

Templates, the layout of the individual templates with references to the functionalities in the next

chapter. Pages with matching layouts use the same template;

Functionalities, descriptions of the separate functionalities that are used to build the templates;

Technical requirements, technical requirements for website visitors and website management.

eFocus will develop the RHDHV based on the templates and functionalities described in this FD.

To reach an agreement for the development of the website we ask RHDHV to inspect every page of this FD

thoroughly and confirm the content. eFocus will schedule the development of the website after the complete

approval for this FD.

1.1 Versions

Version Date Author Remarks

0.5 18-4-2013 Jeroen Kasteleijn

0.8 1-5-2013 Jeroen Kasteleijn

0.8.1 7-5-2013 Jeroen Kasteleijn Processing feedback of customer

0.9 16-5-2013 Jeroen Kasteleijn Processing feedback of review panel

0.9.1 27-5-2013 Jeroen Kasteleijn Processing feedback of customer

1.0 30-5-2013 Jeroen Kasteleijn

1.2 Reference documents

File name Description/remarks Version Date

Page 6: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 6 / 71

2 Requirements

Site

core

CM

S

Par

t o

f m

inim

al v

iab

le s

olu

tio

n

Co

nsi

de

r fo

r im

pro

ved

so

luti

on

(see

rec

om

men

dat

ion

)

1,01 Content must be shown

A Projects X

B Services X

C Markets X

D Locations / Country X

E Corporate content: corporate story, management, corporate

governance etc.

X

F Corporate literature (Annual reports, brochures) X

G Our vision on (Corporate responsibility / Innovation) X

H News X

I RHDHV in the media X

J Publications X

K Events calendar X

L Contact information contact persons X

M Offices and descriptions (related to Locations/Country) X

N Route descriptions X

O Vacancies X

P Employer / HR information X

T Binary data and files X

U Word, PowerPoint, PDF files X

V Video X

W Pictures X

1,02 Projects must be shown

A Project information can be found by anyone, despite their geographical X

Page 7: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 7 / 71

location

B Project information must include geographical information so they can

be shown on a map

X

C Projects can be filtered (Location, Markets, Services) X

D Projects can be tagged (to create cross-connection with other content) X

E Additional info must be displayed (video, links, pictures, PDF) X

1,03 News must be shown

A News must be displayed on all landing pages X

B News must be allowed to be shown as related content X

C News can be filtered so only relevant news is shown X

D Individual news items can be tagged X

E Users have the ability to see all news items X

1,04 Content must be related

A Via tags: X

B On Projects X

C On Location / Country X

D On Market X

E On Services X

F Projects must be tagged to the above items X

G News must be tagged to the above items X

H Contacts must be tagged to the above items X

I Articles and Publications must be tagged to the above items X

J Smart use of tags/filters and must be easy to maintain & future proof X

1,05 Keep users up to date

A Users must be able to register for newsletters X

B RSS feeds need to be available X

C Social media Share buttons X

D Users can fill out additional information requests X

1,06 Provide users with relevant contact information of the right Royal

HaskoningDHV employees

A Access to and usage of contact information forms by employees must be X

Page 8: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 8 / 71

very easy

B Contact information is easily added X

C The contact information will guide users directly to the relevant contact X

D Every page can show relevant contact information and relevant pictures X

1,07 Provide users with the ability to upload their contact information and

register

A Registration is easy and short X

B Uploaded contact information is directed to relevant contacts within

RHDHV

X

C When uploading contact information the opportunity is provided to

subscribe to news letters and additional information

X

1,08 The site must have a very good search function

A Keywords can be searched X

B Tags can be searched X

C Regions and countries can be searched X

D Offices can be searched X

A Text can be searched X

B Publications can be searched (incl. PDF’s) X

1,09 The site must have an excellent Search Engine Optimization

A Proposer needs to conform to publicly available SEO standards and

make the SEO metatags user modifiable

X

B Keyword and Title tags should be modifiable per page, others are

assumed to be site bound

X

C URL’s need to have meaningful keywords, related to content and

context

X

1,10 Analytics requirements

A Proposer needs to allow for urchin tags (Google Analytics) with site

modifiable account information for all pages, with meaningful url’s.

X

B Parameters within the url are allowed, unless they hide information

significant for the navigation path. (For instance a parameter for

language is allowed and meaningful.)

X

Page 9: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 9 / 71

C URL’s need to have meaningful keywords, related to content and

context

X

D A parameter which makes a switch possible in navigation is not allowed X

Note This applies to the url passed on to Google Analytics, not to the real url

E The number of hits on vacancies, HR information and HR links can be

measured

X

1,11 The site must support the application process

A An application procedure can be started on the site X

B Resumes can be uploaded X

C Resumes can be tracked by HRM X

D E-CV uploading is possible X

E The site can interchange data with recruitmen database (Connexys or

PeopleXS)

X

1,12 Sub sites:

Within the platform / CMS it must be possible to create sub sites: X

- inheriting templates / design / functionalities of corporate website X

- own navigation X

- possibility to re-use content from corporate website (projects, news,

contacts)

X

1,13 Stand Alones

Within platform / CMS it must be possible to create Stand Alone

websites:

X

- inheriting templates / functionalities X

- own look & feel / logo / design X

NOTE: definition of Sub sites & Stand Alone website should be considered in

more detail, looking at functionalities and speed of development / costs

Page 10: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 10 / 71

3 Goals

3.1 Users

Defined users for the corporate website are as follows (sorted from most important to less important):

A. Expert

B. Decision maker

C. Influencer

D. Employee

E. Future employee

F. Press member

3.2 User stories

Defined users stories for the corporate website are as follows (sorted from most important to less important):

Minimable

viable

solution

Improved

solution

A.1. As an expert, I want to check if RHDHV is a suitable company for the project we

are planning, so that I can advise my superior.

P1 t/m P4 P5, P6,

P7, P8,

P10

A.1.a. As an expert, I want to see projects of RHDHV, so that I can see if they have done

similar projects to mine.

P2 P6

A.1.b. As an expert, I want to see local project of RHDV, so that I can see if they have

done in my country/region.

P2 P6

A.1.c. As an expert, I want to see markets of RHDV, so that I can read more on their

vision on my market.

P2 P10

A.1.d. As an expert, I want to see company information, so I will know e.g. the size and

age of RHDHV.

P2 -

A.1.e. As an expert, I want to send/share information, so that I can share this with my

superior

P4 -

A.2. As an expert, I want to check if RHDHV offers the specific service I need, so I can

contact them and discuss carrying it out.

P1 t/m P3 P5, P7,

P8

A.2.a. As an expert, I want to see service examples of RHDHV, so that I see how they

implemented this service.

P2 P7

B.1. As a decision maker, I want to get more information about RHDHV, so I can see if P1 t/m P3 P5, P6,

Page 11: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 11 / 71

it is a suitable company for the project we’re planning. P7, P8,

P10

B.1.a. As an expert, I want to see projects of RHDHV, so that I can see if they have done

similar projects to mine.

P2 P6

B.1.b. As an expert, I want to see company information, so I will know e.g. the size and

age of RHDHV.

P2 -

C.1. As an influencer, I want to know what RHDHV does, so I can tell others P2, P4 P5, P6,

P7, P8,

P10

C.2. As an influencer, I want to know who works at RHDHV, so I can contact them P2, P3 P5

C.3. As an influencer, I want to know the vision of RHDHV P2 -

D.1. As an employee, I want to find a project to show to a (potential) client P2 P5

D.2. As an employee, I want to know what RHDHV does, so I can tell others P2, P4 P5, P6,

P7, P8,

P10

A.3. As an expert, I want to find a local office, so that I can visit them. P2, P3 -

A.4. As an expert, I want see upcoming events, so that I can subscribe to an event. P2 -

A.5. As an expert, I want to see news, so that I can stay up-to-date on (general)

developments in my field of expertise.

P2 -

A.6. As an expert, I want to see a specific campaign, so that I can get information. - -

E.1. As a future employee, I want to get information about (working for) RHDHV, so

that I can find out if I want to apply for a job

P2 P9

E.1.a. As a furture employee, I want to read general information about (working for)

RHDHV

P2 P9

E.1.b. As a future employee, I want to apply for a job - P9

E.1.c. As a furture employee, I want to see what kind of projects they have done in my

area of expertise

P2 P6

E.1.d. As a furture employee, I want to see if they offer jobs in my country and in my

area of expertise

P2 P9

E.1.e. As a future employee, I want to contact RHDHV to get more information P3 P5

F.1. As a press member, I want to find information about RHDHV, so that I can use it

for a press item.

P2 P5, P6,

P7, P8,

P10

F.1.a. As a press member, I want to find a press release P2 -

F.1.b. As a press member, I want to find general company information to use in my item P2 -

F.1.c. As a press member, I want to find project images, employee images and corporate

identity assets to use in my item

P2 P6

Page 12: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 12 / 71

4 Processes

The processes described in this chapter will cover the goals which are described in the previous chapter.

4.1 Minimum viable solution

P1 Search for information

P2 Browse to information

P3 Find contact information

Page 13: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 13 / 71

P4 Share information

Page 14: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 14 / 71

4.2 Improved Solution

P5 Find contact information (lightbox)

P6 Browse to projects

P7 Browse to services

Page 15: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 15 / 71

P8 Find cross-content

Markets

Countries

Services

Page 16: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 16 / 71

Projects

P9 Browse to jobs

P10 Brows to markets

Page 17: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 17 / 71

5 Sitemap

The sitemap is a schematic view of the page structure. For each page the applied template is mentioned. The

sitemap describes the default page structure, which also defines the position of the page used for navigation with

the web trail. Crosslinks between pages are not specified in the sitemap but in the description of the individual

functionalities.

5.1 Sitemap minimal viable solution

Page 18: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 18 / 71

5.2 Sitemap improved solution

Page 19: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 19 / 71

6 Templates

This chapter specifies all templates used in the sitemap from the previous chapter. Several pages in the sitemap can

have the same template because their layout is (virtually) the same. For each template a short description is given

and the functionalities are specified. These are references to the functionalities described in the next chapter.

Each template is represented as a wireframe. A wireframe is a schematic view of the functionalities and their

allocation on the page. The dotted orange line indicates that the inside components are optional and the sorting

can be freely determined. Wireframes do not indicate design. Design can deviate visually from the wireframe but

will have the same functionalities.

Every functionality is described extensively in the next chapter because of the fact that one functionality may

appear on several templates.

Page 20: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 20 / 71

6.1 Corporate website (minimal viable solution)

Page 21: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 21 / 71

T1 (Country) Homepage

F1

F2

F3

F4

F5

F6

F7

F8

F9

F5

F5

Page 22: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 22 / 71

T2 General overview page

F1

F9

F7

F8

F2

F3

F4

F5

F6

F10

F11

F12

F19

Page 23: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 23 / 71

T3 General detail page

F1

F2

F9

F12

F10

F11

F6

F7

F8

F3

F5

F13

F19

Page 24: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 24 / 71

T4 Search result page

F8

F8

F14

F15

F16

F9

F1

Page 25: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 25 / 71

T5 Contact page

F1

F9

F3 F12

F12 F17

F18

The global head office

is always displayed,

independent of the

selected country

Page 26: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 26 / 71

T6 iFrame page

F21

F1

F9

Page 27: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 27 / 71

T7 Sitemap

F1

F9

F12

F12

F22

Page 28: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 28 / 71

T8 Offices page

The global head office

is not displayed if

different country than

default country is

selected (for minimal

viable version)

F17

F1

F9

F20

Page 29: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 29 / 71

6.2 Corporate website (improved solution)

Page 30: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 30 / 71

T9 Office detail page

To be defined

Page 31: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 31 / 71

T10 Markets landing page

F1

F9

F23

Page 32: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 32 / 71

T11 Market overview page

F1

F3

F23

F6

F6

F12

F2

F9

Page 33: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 33 / 71

T12 Sub-market page

F1

F2

F9

F23

F3 F11

F6

F6

Page 34: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 34 / 71

T13 Contact lightbox

F18

F24

Page 35: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 35 / 71

T14 Services landing page

F11

F9

F1

F7

F5

F8

F3

Page 36: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 36 / 71

T15 Service detail page

F11

F7

F12

F8

F1

F9

F10

F13

Page 37: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 37 / 71

T16 Project detail page

F2

F1

F11

F13 F6

F6

F25

F26

F27

Page 38: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 38 / 71

7 Functionalities

The functionalities used in the different templates from the previous chapter are specified below. Some of these

functionalities are applied in more than one template.

7.1 Template functions

F1 Header

Function

1 Logo of RHDHV.

This is clickable and links to the homepage (T1)

2 Meta and main navigation

As defined in the sitemap of chapter 4

3 Search field

Search query applied on all content

o If user clicks the magnifying glass or uses the enter key

Search result page (T4) is displayed after query

4 Language selector

Default language selection is based on the language of the visitor’s browser

Available languages are Dutch and English for release 1.0

For every country, all available languages are displayed in a dropdownlist

o Visitor can change the language by selecting a different language

If a language is selected, all content will change into the selected language

5 Country selector

Default country selection is based on IP-address of visitor

Visitor can change country selection from a dropdownlist

1 2 3

4 5

Page 39: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 39 / 71

F2 Pushbox component

Function

1 Image

Image is clickable, manageable in CMS

No maximum of images (content manager responsibility to make number of item fit on 1 line of

thumbs)

No fixed height

2 Thumbs

Thumb in relation with displayd image is marked as active

No maximum of thumbs

If different thumb is clicked than active thumb, the image of the inactive thumb is displayed

3 Title, sub-title

Title

o Optional in CMS

o Maximum of 1 line

Sub-title

o Optional in CMS

o Maximum of 1 line

1

2

3

Page 40: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 40 / 71

F3 Main text/Image block component

Function

1 Title

Maximum of 1 line

Manageable in CMS

2 Text

WYSIWYG Editor

3 Image (for minimal viable version)

Optional

Manageable in CMS

Images for events, news and projects need a capture and copyright statement. We will use the Alt

text functionality for this. If this text becomes to long, the content manager can use the text of the

relevant item instead.

4 CTA

Optional

Link location is manageable in CMS

Label on button is manageable

Internal link (same window)

1

2

4

3

Page 41: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 41 / 71

F4 Content components

Function

1 Title

Title is optional

Manageable in CMS

Maximum of 2 lines

Link can be added so that title becomes clickable

2 Date

Fields available in CMS to add a start- and end-date

o Selection is made using a calendar functionality (no string)

o Both are optional fields

3 Image

Image is optional

Manageable in CMS

Link can be added so that image becomes clickable

Images for events, news and projects need a capture and copyright statement. We will use the Alt

text functionality for this. If this text becomes to long, the content manager can use the text of the

relevant item instead.

4 Text

Text is optional

Manageable in CMS

Link can be added (does not make the whole text clickable)

1

2

3 4

Page 42: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 42 / 71

F5 General teaser component

Function

1 General teaser component

This component can be used to display markets

This component can be used to display general or country specific projects/news

o If a country is selected (selected by default on IP-address or selected by user with the

country selector in the header (F1)) which has no local content, only the general

component(s) are displayed

o If a country is selected (selected by default on IP-address or selected by user with the

country selector in the header (F1)) which has local content, the general and country

specific components are displayed (local first, general second)

2 Title

Manageable in CMS

Maximum of 1 line

If the active country has local content for projects or news:

o Label + [Selected country]

3 Date

Fields available in CMS to add a start- and end-date

o Selection is made using a calendar functionality (no string)

Both are optional fields

4 Image

Image is optional

Manageable in CMS

Link can be added to the related item (image becomes clickable)

Images for events, news and projects need a capture and copyright statement. We will use the Alt

text functionality for this. If this text becomes to long, the content manager can use the text of the

relevant item instead.

2

3

4 5

6 7

1

Page 43: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 43 / 71

Function

5 Title and introtext

Title of the item (maximum of 1 line)

Introtext of the item

o Maximum of 2 lines

o Link ‘Read more’ (label) to the related item

6 Link

Links to General overview page (T2)

If the active country has local content for projects or news:

o Label + [Selected country]

o Links to General overview page (T2) (with filtered projects/news for selected country)

7 Link

Links to General overview page (T2

If the active country has no local content for projects or news:

o Label

o Links to General overview page (T2) (with unfiltered projects/news)

Page 44: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 44 / 71

F6 Forward links component

Function

1 Title

Label, manageable in CMS

Maximum of 2 lines

2 Links

Option 1: Generated by content manager

o Link locations manageable in CMS by content manager

Option 2: Automatically generated by CMS

o Link locations are generated based on related content (news, markets, services, or

projects)

1 column

No maximum of lines per column

Sorted from A-Z

Icons in front of every line (for enhanced version)

1

2

Page 45: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 45 / 71

F7 Search services component

Function

1 Title

Label

2 Text

Optional

Manageable in CMS

Possibility to add links within the text

3 Link

Optional

Label

Links to Service group overview page (T2)

4 Search field

Search query applied on all services

o If user clicks the magnifying glass or uses the enter key

Search result page (T4) is displayed after query

1

2

3

4

Page 46: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 46 / 71

F8 Text block component

Function

1 Title

Label

2 Text

Manageable in CMS

3 Link

Label

Links to Contact page (T5)

1

2

3

Page 47: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 47 / 71

F9 Footer

Function

1 Text and links

Not manageable in CMS

Link re-directs to Contact page (T5)

2 Footer links

3 columns (not manageable in CMS)

o First column

Home, re-directs to Homepage (T1)

Markets, re-directs to General overview page (T2)

Services, re-directs to General overview page (T2)

Projects, re-directs to General overview page (T2)

News, re-directs to General overview page (T2)

About us, re-directs to General overview page (T2)

o Second column

Contact, re-directs to Contact page (T5)

Offices, re-directs to General overview page (T2)

Careers, re-directs to General overview page (T2)

o Third column

Twitter, re-directs to social media page

Link-location depending on country selection (URL manageable per

country bij content manager in CMS)

Facebook, re-directs to social media page

Link-location depending on country selection (URL manageable per

country bij content manager in CMS)

Linked-in, re-directs to social media page

Link-location depending on country selection (URL manageable per

country bij content manager in CMS)

Youtube, re-directs to Youtube page

Link-location depending on country selection (URL manageable per

country bij content manager in CMS)

1 2

Page 48: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 48 / 71

F10 List component

Function

1 Title

Label, manageable in CMS

Maximum of 1 line

2 Links

Link locations manageable in CMS

Maximum of 2 column

No maximum of lines per column

Sorted from A-Z

3 For services only

Possibility to use this component to create an A-Z overview of all services

Functionality should be available to generate the links automatically from the CMS

o If services are available in CMS with starting letter A, all relevant services for this letter

are displayed in the list of links (2)

o This applies for all letters B, C, … , Z

o Letter (e.g. ‘A’) will be displayed in the title (1)

1

2

3

Page 49: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 49 / 71

F11 Contact block component

Function

1 Title

Label, manageable in CMS

Maximum of 1 line

2 Image

Manageable in CMS

3 Contact person details

Name (maximum of 2 lines)

Function & location (maximum of 2 lines)

Phone number (maximum of 1 line)

Email address (maximum of 1 line)

Linked-in URL

Link for personal Twitter account

4 CTA-button

Label on button is manageable

Links to Contact page (T5)

5 More contacts

Label

Always displayed under the first contact person (default visible)

When + is clicked, more contact persons are dislayed ( + is changed in - )

o Maximum of 2 extra contact persons

o (2), (3) and (4) is displayed for every contact person

When - is clicked, first contact person is dislayed and the other are hidden ( - is changed in + )

1

2 3

5

4

Page 50: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 50 / 71

F12 Minimal teaser component

Function

1 Title

Label, manageable in CMS

Maximum of 1 line

2 Date

Fields available in CMS to add a start- and end-date

o Selection is made using a calendar functionality (no string)

o Both are optional fields

3 Image

Manageable in CMS

Images for events, news and projects need a capture and copyright statement. We will use the Alt

text functionality for this. If this text becomes to long, the content manager can use the text of the

relevant item instead.

4 Sub-title

Label, manageable in CMS

Maximum of 1 line

5 Link

Manageable in CMS

1

2

4 3

5

Page 51: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 51 / 71

F13 Article component

Function

1 Text, sub-titles, image

WYSIWYG Editor

2 Social sharing (as basic as possible for minimal viable version)

Twitter

Facebook

Linked-in

3 Download

Download item manageable in CMS

Download title manageable in CMS

1

2 3

Page 52: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 52 / 71

F14 Search results

Function

1 Search results

Label: [number of search results] Search result for [search term]

2 Search term

Search term used for search query is displayed in field

If clicked, current search term is removed and user can type in a new search term

If user clicks CTA, new search query is applied

3 Search result items

Title on top

Text, maximum of 2 lines

Link: URL of search result

o Clickable and re-directs to location of search result

4 Number search results

Total number of search results per page is 20

If user changes the displayed page, this is updated

1

2

3

4

Page 53: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 53 / 71

F15 Pagination

Function

1 Previous and next buttons

If user clicks previous button, page before the active page is displayed

o This button is inactive if first page is the active page

If user clicks next button, page after the active page is displayed

o This button is inactive if last page is the active page

2 Page numbers

Active page number is highlighted

If there are more than 5 pages, 5 page numbers (the active page in the middle) will be followed by

…. , followed by the last page number

If the are 5 or less pages, the page numbers are displayed from first to last page

Every page number is clickable, if clicked the page number will be the active page

1 2

Page 54: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 54 / 71

F16 No search results

Function

1 Search results

Label: No search results for [search term]

2 Test

Maximum of 1 line

Link to Contact page (T5)

3 Search term

Search term used for search query is displayed in field

If clicked, current search term is removed and user can type in a new search term

If user clicks CTA, new search query is applied

1

2

3

Page 55: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 55 / 71

F17 Office component

Function

1 Title

Label, manageable in CMS

Maximum of 1 line

2 Image

Manageable in CMS

3 Office details

Title (maximum of 1 line)

Sub-title (maximum of 1 line)

Address line 1 (maximum of 1 lines)

Address line 2 (maximum of 1 lines)

Address line 3 (maximum of 1 lines)

Phone number 1 (maximum of 1 lines)

Phone number 1 (maximum of 1 lines)

Email address (maximum of 1 lines)

String A, universally applicable (maximum of 1 line)

String B, universally applicable (maximum of 1 line)

4 Link

Label is manageable

Links to Offices landing page (T8)

1

2

3

4

Page 56: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 56 / 71

F18 Contact form

Function

1 Title

Label, manageable in CMS

Maximum of 1 line

2 Contact details

Name (mandatory, no verification)

Company (mandatory, no verification)

Email address (mandatory, no verification)

3 Location selectors

First dropdown lists regions

o Default selection is active country

Second dropdown lists offices in selected region

o Default selection is active office

4 Message details

Subject field

o Field for text (mandatory, no verification)

Message field

o Field for text (mandatory, no verification)

o No maximum of lines

o Scroll-bar wil become active if number of lines is higher than 10

1

2

3

4

5

Page 57: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 57 / 71

Function

5 CTA-button

Checkbox

o Data from field Email address is added to CC of email (plain text) which is send to

selected office

Button

o Label on button is manageable

o Sends all data from form to selected office

Page 58: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 58 / 71

F19 Submenu component

Function

1 Fly-out

Displays all sub-level pages

Automatically generated by CMS based on page-tree

Every sub-level page is clickable and re-directs to the selected page

1

Page 59: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 59 / 71

F20 Office lister component

Function

1 Title

Country

Automatically generated from CMS

Maximum of 1 line

2 Links

Offices

Automatically generated from CMS

Maximum of 3 columns

No maximum of lines per column

Sorted from A-Z

1

2

Page 60: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 60 / 71

F21 iFrame

Function

1 iFrame

Height and width of frame can be controlled in CMS

1

Page 61: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 61 / 71

F22 Sitemap

Function

1 Title

Title, maximum of 1 line

2 Text

Manageable in CMS

No maximum of lines

3 Sitemap overview

Indexing every avalaible page

Levels applied

1

2

3

Page 62: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 62 / 71

F23 Big teaser component

Function

1 Image

Manageable in CMS

Link can be added so that title becomes clickable

Images for events, news and projects need a capture and copyright statement. We will use the Alt

text functionality for this. If this text becomes to long, the content manager can use the text of the

relevant item instead.

2 Title

Title is optional

Manageable in CMS

Maximum of 1 line

Link can be added so that title becomes clickable

3 Date

Fields available in CMS to add a start- and end-date

o Selection is made using a calendar functionality (no string)

o Both are optional fields

4 Text

Text is optional

Text of the item

o Maximum of 5 lines

5 Link

Link is optional

Link can be managed in CMS

1

2

3

4

5

6

Page 63: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 63 / 71

Function

6 Link

Link is optional

Link can be added in CMS

F24 Lightbox

Function

1 Lightbox

If ‘X’ is clicked, lightbox is closed

2 Contact form

Same functionality as F18

1

2

Page 64: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 64 / 71

Page 65: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 65 / 71

F25 Images component

Function

1 Title

Label, manageable in CMS

Maximum of 1 line

2 Images

Manageable in CMS

2 images per line

No maximum of images

If image is clicked, enlarged image is displayed in lightbox (F24)

Images for events, news and projects need a capture and copyright statement. We will use the Alt

text functionality for this. If this text becomes to long, the content manager can use the text of the

relevant item instead.

1

2

Page 66: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 66 / 71

F26 Related items carousel

Function

1 Title

Label, manageable in CMS

Maximum of 1 line

2 Images

Manageable in CMS

Display of 3 images

Link can be added so that image becomes clickable

If user clicks left arrow, previous image is displayed

o This button is inactive if first image is already displayed

If user clicks right arrow, next image is displayed

o This button is inactive if last image is already displayed

No maximum of images

Images for events, news and projects need a capture and copyright statement. We will use the Alt

text functionality for this. If this text becomes to long, the content manager can use the text of the

relevant item instead.

3 Sub-title

Manageable in CMS for every image

Maximum of 2 lines

Link can be added so that sub-title becomes clickable

1

2

3

Page 67: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 67 / 71

F27 Location component

Function

1 Title

Label, manageable in CMS

Maximum of 1 line

2 Map

Manageable in CMS

Geo-location has to be added by content manager in CMS to display location

1

2

Page 68: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 68 / 71

8 Glossary

Term Description

Ajax AJAX (Asynchronous JavaScript And XML) is a term for interactive web pages on which

asynchronous requested data is collected from the web server. In this way, web pages do not have

to be refreshed in full.

Teaser A functionality that gives the visitor a short and teasing impression of the item that is linked to.

This can be an attracting text with an image or a short enumeration of items (for example the

three most recent news messages with a link to the full overview of news messages).

Back end The back end is the part of the software system in which processing takes place and that is not

visible to visitors. The CMS and the back office application are considered to be back end.

Back office

application

A back office application is an application that operates in the background and is not visible to the

visitor. Examples are administration software or a production application.

Breadcrumb A breadcrumb trail shows the visitor where he finds himself relative to the homepage. It shows the

path from the homepage to the current page. This trail represents the path in the site structure, it

is not necessarily the path a visitor followed to reach the current page.

Client side Client side scripting is the technology used for executing scripts in the visitor’s browser.

CMS CMS means Content Management System. A CMS is a web application that enables people to

publish documents and data on the website in a simple way without needing much technical

knowledge. The CMS is secured and is used by editors of an organization to edit the contents of

their website.

Cookie Cookies are small amounts of information that are sent to the browser by a server with the

intention of being saved locally and sent back to the server at the next visit. This is a simple way of

remembering information for a specific internet user so that this information does not have to be

entered over and over again (for example login data). Cookies may also be used to monitor surfing

behavior.

Cookies can be used in a session (information recedes when the browser is closed) or permanently

(information is saved and will be available the next time the browser is used).

CRM Customer Relationship Management is a procedure as well as a technique in which optimizing all

customer contacts is the mail goal. It is tried to offer each customer an individual value proposition

based on his/her wishes. Moreover the thought behind CRM is that the more value a customer

represents, the better a treatment he gets.

Dropdown

list

A dropdown list is a screen element in which the visitor can select one item. When a dropdown list

is inactive, only one value is shown. When the dropdown list gets activated, all items in the list are

shown (expanded). When the user selects a new item from the list, the list will be hidden and the

selected item is shown.

Front-end The front end is the part of the software system the user Works with.

Page 69: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 69 / 71

Term Description

Google Maps Google Maps is a service from Google Inc. that offers the opportunity to limit a search by only

searching in a specific geographical location. The purpose of Google Maps is to help people find

companies or businesses nearby. Google Maps may also give additional information about the

company or business.

Iframe IFrame (from inline frame) is a HTML element that enables another HTML element to appear in the

main document. Iframes are mostly used to show content from another website or external

application in a website.

Light box A light box is a layer that is shown on top of the website and may contain an image or other

elements. The website itself remains on the background but gets dark and will not be readable

anymore. The light box needs to be closed to view the website in a normal way again.

The advantage of the light box is that additional information can be shown without the user

needing to navigate away from the current web page or to extract the user from the current

process.

Mouse over Mouse over is an action of the user with the mouse on a specific screen element in the

website/application. By a mouse over, a text may appear or a button may change color for

example.

RIA A Rich Internet Application (RIA)is a term used for interactive internet applications that convey the

feeling of a desktop program (for example a text editor or an agenda). Rich Internet Applications

respond to data entered by the user without another page needing to be opened.

Rich Internet Applications differ from the basic functionalities of websites. They give the user a

richer user experience that is characterized by a better feedback and dynamic elements. In this

way the user experience of the web application nears the user experience of a desktop program.

Server side Server side scripting is the term commonly used for the technology that is used on the internet to

dynamically generate HTML pages that get another content and/or design on the base of

parameters. Server side scripts are processed on the server and not in the browser.

Session A session is a temporary connection between a browser and a server. During a session information

is exchanged between the browser and the server. The session is closed by closing the browser or

after a certain amount of time as set on the server.

Template A template is a graphical form that is meant for repeated use. A template describes the elements

on a page. The template can be used on several locations in the website.

Tooltip A tooltip is an often used screen element that works together with the mouse pointer. The user

hovers the mouse pointer over a screen element, without clicking, and a small text block appears

that contains information about the screen element that is clicked.

URL A Uniform Resource Locator (URL) is a label that refers to a source of information, for example a

web page or another file.

WYSIWYG WYSIWYG is an acronym for What You See Is What You Get. The term is used for computer

programs and means that the result will be exactly the same as is shown on the screen, inclusive of

layout and formatting: bold, character size, colors etc.

Page 70: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 70 / 71

Term Description

XML eXtensible Markup Language (XML) is a standard for defining formal markup languages for the

representation of structured data in the form of unformatted text. This representation can be read

by both computers and people.

In other words: XML is a way of saving data in a structured way. This way is defined and can be

used by everyone. It is designed to be readable by both computers and people. XML is not only

suitable for saving data but also for sending data through the internet. The AJAX method uses XML.

Web widget A web widget is a standalone program that can be installed and executed within a HTML based

page. An example that is often used is the showing of news messages of an external site on the

own website.

Page 71: Opdrachtgever website FO versienr - Royal HaskoningDHV€¦ · A.1. As an expert, I want to check if RHDHV is a suitable company for the project we are planning, so that I can advise

Functional Design RHDHV Corporate website Page 71 / 71

9 Approval

By signing below RHDHV confirms that this Functional Design is approved. Both RHDHV and eFocus are aware that

developments during the implementation of the website can result in necessary adjustments.

The indicated hours needed for implementation are based on this Functional Design. The website will initially be

developed as described in this document. Before the release the website will be available to RHDHV for testing

during a set amount of time (to be determined during the project). If the test results imply changes are needed,

these are assessed by project managers from RHDHV and eFocus. In this assessment a clear distinction is made

between functional changes and changes as a result of failures in the website.

Failures in the website will be corrected according to the description in this Functional Design.

If functional changes are needed, an indication will be given for the costs of changing the Functional Design and the

implementation of these changes. After approval by RHDHV the changes will be implemented in a new release of

the website.

If you agree with this proposal we kindly request an initialed and signed copy of this document.

Name:

Function:

Date:

Place:

Signature: