STORYBOARD ACQIRIS

STORYBOARD

ACQIRIS V1.2

STORYBOARD ACQIRIS

Table of contents

Table of contents ................................................................................................................... 2

About this document .............................................................................................................. 3

Terms and abbreviations ....................................................................................................... 3

Terms ................................................................................................................................ 3

Abbreviations ..................................................................................................................... 3

Introduction ........................................................................................................................... 3

Operations and processes ..................................................................................................... 3

System architecture ............................................................................................................... 3

Technology ........................................................................................................................ 3

Hosting .............................................................................................................................. 4

Roles of the website users .................................................................................................... 4

Visitor ................................................................................................................................ 4

Admin ................................................................................................................................ 5

Languages ............................................................................................................................ 5

Responsive design ................................................................................................................ 5

HEADER ............................................................................................................................... 6

ON HOMEPAGE ................................................................................................................ 6

FOOTER ............................................................................................................................... 6

WORKFLOW PROCAB ........................................................................................................11

WORKFLOW ........................................................................................................................11

INFORMATIONS IMPORTANTES ET RECOMMANDATIONS ............................................12

STORYBOARD ACQIRIS

About this document

This document specifies the content of the website to be created, including the site map, the layout and functionalities.

It is used to clarify the client’s requirements so that those are properly implemented by the designers and developers.

Terms and abbreviations

Terms

Content Management System

Solution allowing the client to change part of the content of the site without the need to contact Procab Studio.

Abbreviations

CMS Content Management System DNS Domain Name Server

Introduction

This website is about Acqiris (http://acqiris.com/), it is a technologic company. The website will be a responsive one-pager. PSD FILE : https://www.dropbox.com/s/gs444ivjsa2near/Acqiris%20-%20One-page%202017%20%28desktop%29.psd?dl=0

Operations and processes

The complexity to develop code for new technologies requires a clear process, where the exact functionality of the site has to be frozen before coding it. Therefore, it is nearly impossible to do changes to the requirements while the development is ongoing.

To ensure the quality of our deliverables, we are following a standard procedure described below.

System architecture

Technology

Platform Apache MySQL PHP Javascript iPad compatibility / iPhone

CMS OpenSource CMS (Wordpress) Multi-site

STORYBOARD ACQIRIS

Browsers’ compatibility: We test our sites on all browsers that have at least 2% market share at the beginning of the project.

All browsers with >5% market share will have a perfect finish

All browsers with 2 to 5% market share will be fully working, but may have some

small alignment issues due to browser exceptions.

Chrome Firefox Safari 9.1 and 10 on Mac, iPad, iPhone Samsung Internet 4.0 IE11 Edge 14 Browsers market in Switzerland, August 2017.

Source: http://gs.statcounter.com/

Hosting

The website will be hosted by Procab Studio.

Roles of the website users

Visitor

A visitor is someone browsing the web pages of the site without any privileges on those.

STORYBOARD ACQIRIS

Admin

The admin of the website is able to manage the content of the website pages.

There are only two admin accounts for managing the website.

Languages

The website will be available in English.

Responsive design About the responsive design, our developers will make the best choice in order to have maximum ergonomics.

STORYBOARD ACQIRIS

HEADER

ON HOMEPAGE

1 LOGO The logo always links to the homepage

2 MENU Menu elements are anchors, on click it scrolls automatically to the corresponding section About “Newsroom” entry :

- It will be a link to http://newsroom.acqiris.com (opened in a new tab) - the newsroom will only show last news, where Acqiris will have the

possibility to add different categories of articles - People will have acces to the News section directly with all articles

listed below

MENU IS STICKY

FOOTER

1 HEADQUARTERS Main info about Acqiris, in a single column – can be managed Add a Switzerland flag next to the country

2 GOOGLE MAPS Open Google Maps in a new tab on click

3 GLOBAL CONTACTS

Can be managed, “mailto” links on email addresses

STORYBOARD ACQIRIS

0 SLIDER The slider will have a progressive download (asynchronous). Each element will appear separately. The background image can be managed.

1 SLIDER CONTROLS

Display previous/next slides in a fade in/fade out effect. BUTTONS APPEAR ONLY ON ROLLOVER

2 TITLE + LINK Can be managed on the backoffice – Button below appears only when there’s a content and a link

3 IMAGE The image can be managed on the backoffice

4 WELCOME Title can be managed

5 INTRO Can be managed

6 PRESENTATION Can be managed

7 BUTTON We can manage the content and the link

STORYBOARD ACQIRIS

SYNERGY Add some nice effects on this section to make it look dynamic

8 TITLE Can be managed

9 CONTACT We can manage the content and the link

10 CONTENT BOX

We can manage contents inside colored boxes

STORYBOARD ACQIRIS

10 SUBTITLE Can be managed – change “Product” to “Products”

11 PRODUCTS Product names are listed as filters, only a single one is displayed at the time. If we click on a product name, it will hide the previous and show the new one, on the same place. We can add new products and manage the order

12 PRODUCT INFO

12. All products have the same structure 12a. Product description associated to its image (managed) 12b. Content is trimmed if it’s too long, if we click on “Read more” it shows the rest of the content below 12c. Datasheet Opens a PDF file 12d. Accordions we can add/delete accordions and manage their content For “Document Library”, please follow Keysight’s layout : http://prntscr.com/gw25fv

- We can upload different types of content (.pdf, .chm, .zip and .exe)

- We can apply a title and a description - We’ll have an icon per type of file - Upload dates will be shown - We can upload manually the link of the document

12e. Product detail not displayed on all products, we can enable it and manage its content

STORYBOARD ACQIRIS

13 QUOTE We can manage the quote + add a signature

14 WELCOME On page load we display only the “Welcome” image in several languages, right after with a fade in/fade out effect, we can see the map appearing and the welcomes disappearing. This has to be done on every page load. We can manage both images.

STORYBOARD ACQIRIS

WORKFLOW PROCAB

Les nouvelles technologies développent du code complexe et nécessitent une très grande méthodologie de travail. Il faut connaitre très précisément le fonctionnement de chaque fonctionnalité avant de la développer rendant quasiment impossible les changements de direction pendant la phase de développement. Afin de garder un code propre et éviter le plus possible les bugs, une certaine méthodologie de travail est absolument nécessaire. Voici les étapes de notre collaboration :

WORKFLOW 1. Design : Présentation du Design -> Remarques du client, demandes de modifications -> Présentation d’une nouvelle version du Design -> Processus de corrections si nécessaire ->VALIDATION DU DESIGN 2. Storyboard : Présentation du Storyboard -> Lecture du client, demandes de modifications et demande d’éclaircissement des zones d’ombres -> Présentation d’une nouvelle version du Storyboard -> Processus de corrections si nécessaire -> SIGNATURE DU STORYBOARD. Tout le contenu du site doit être présent dans le storyboard. Ce qui n’y est pas, devra être entré par le client ou bien par procab (facturé en plus). 3. Développement : Démarrage du développement -> Le client peut suivre le développement sur l’adresse communiquée -> Une fois le développement terminé, le site est mis en phase de tests. 4. Phase de tests : Procab effectue un série de tests au préalable - > Le client peut ensuite effectuer des tests sur le site à son tour ->le client fait un état des lieux appelé « recettage » où il liste tous les défauts dans un logiciel de reporting de bugs appelé « ZohoProjects » (http://projects.zoho.com, identifiants à venir) en vue d’une correction -> Procab corrige les anomalies et le site est considéré comme terminé. Les demandes de corrections ne pourront être prise en compte que si elles sont correctement saisies dans ZohoProjects. Dans un souci d’organisation et de traçabilité, les demandes individuelles par email ou téléphone ne pourront être traitées. Cette phase de test doit être faite d’une traite (par exemple en une semaine) et chaque bug doit être décrit clairement, en précisant le navigateur et sa version dans lequel le bug se produit et en y joignant une capture d’écran (JPG). Chaque demande qui n’est pas un bug (=anomalie non conforme au storyboard) sera considéré comme une tâche et fera l’objet d’une facture complémentaire. 5. Validation : Une fois les anomalies corrigées, le site est considéré comme terminé et la mise en ligne peut avoir lieu.

STORYBOARD ACQIRIS

INFORMATIONS IMPORTANTES ET RECOMMANDATIONS

Changements en cours de développement Après validation du storyboard, toute demande de modification sera considérée comme une évolution et par conséquent facturée. Si le nombre de changements est important ou bien si la complexité du changement demandé par le client est élevée, le projet sera finalisé tel que validé dans le storyboard et livré. Ensuite, le lot de changement pourra être réalisé après acceptation du devis complémentaire. Demande d’éclaircissement des zones d’ombres : Parce qu’une fonctionnalité peut parfois être interprétée de plusieurs manières et parce que l’équipe de développement doit modéliser le travail avant de produire les pages et parce qu’il est parfois impossible de revenir en arrière, il est très important de veiller à :

- ce qu’aucun élément du Storyboard (détail, module, fonctionnement, workflow, fonctionnalité) ne manque d’explication et de détails pouvant entrainer une interprétation qui ne vous satisfasse pas.

- ce qu’en cas de doute possible, vous contactiez votre chef de projet afin qu’il puisse ajouter plus de détails sur la fonctionnalité en question AVANT la validation du storyboard. Dans la limite du bon sens, la compréhension de la fonctionnalité par l’équipe technique prime sur toutes les autres.

Interprétation graphique : Le storyboard n’a pas pour vocation de contenir une version graphique de chaque page. Au contraire, ce document a pour but de modéliser schématiquement chaque fonction et de dessiner à l’aide de zones l’emplacement de chaque élément. Parmi l’équipe qui va travailler sur le développement du site, un webdesigner réera les pages secondaires du site dans l’esprit du graphisme validé à l’étape « DESIGN ». Dans l’éventualité où ces pages secondaires ne correspondaient pas à l’esprit des pages principales validées, le client peut demander leur correction. Procab Studio a l’obligation de réaliser la page « d’accueil » et la page « type » le plus conformément possible selon le design validé par le client. Nous encourageons la créativité. Ainsi, si le client souhaite modifier un élément graphique, pourtant conforme à l’esprit général du « DESIGN » validé, peut contacter Procab après la « validation » du site en vue d’obtenir un Devis. Un nouveau storyboard sera réalisé, un graphiste travaillera sur l’élément graphique et le webdesigner s’occupera d’intégrer les nouveaux éléments graphiques selon les souhaits du client.

Navigateurs : Internet est un monde fabuleux et les navigateurs (Internet Explorer, Chrome, Firefox, Safari) évoluent vite mais ne sont pas tous égaux. Ces derniers ne respectent malheureusement pas tous les mêmes standards et il y a de vraies différences de comportement et de rendu d’un navigateur à l’autre. Chez procab, nous testons tous nos sites avec les navigateurs courants et apportons un soin particulier au rendu de nos sites. Toutefois, il faut accepter que dans la réalité actuelle, de

STORYBOARD ACQIRIS

légères différences d’alignement ou de comportement peuvent exister d’un navigateur à l’autre.