Type document
Offerte aanvraag design
Scoop
Partena corporate website 2015 Grafisch ontwerp en frontend framework voor website en online tools
Auteur
Vanessa Verlé
Versie
1.0
Datum
06/10/2014
Contactgegevens: Partena Ziekenfonds & partners Sluisweg 2 9000 GENT Vanessa Verlé ‐ Projectverantwoordelijke vanessa.verle@partena‐partners.be Betrokken websites: www.partena‐ziekenfonds.be www.partena‐partners.be www.partena‐dienstencheques.be www.partena‐kinderopvang.be www.goedvoorjou.be www.partena‐kantoren.be
Inhoudstafel 1 Voorwoord
3
1.1 Context 1.2 Waarom Sitecore? 1.3 Vooranalyse
3 3 3
2 Administratieve details
4
3 Grafisch design en frontend framework
4
3.1 Oplevering 3.1.1 Een frontend design framework 3.1.2 Library van iconen en buttons 3.1.3 Responsive CSS voor elke type pagina van volledige website 3.1.4 Aparte CSS voor print 3.2 Specificaties 3.2.1 Bullet proof design 3.2.2 Onderhoudsvriendelijk 3.2.3 Technologieën
5 5 5 5 5 6 6 6 6
4 Indicatieve planning
6
5 Annex
6
5.1 Huisstijlgids 5.2 Wireframes
6 7
2
1
Voorwoord
Partena Ziekenfonds & partners, Partena Hulp in Huis, Partena Kinderopvang en Partena Vitaliteitsmanagement bieden samen kwalitatieve oplossingen op het vlak van gezondheid en persoonlijk comfort. Dit doen we door te ondernemen in: wettelijke en aanvullende ziekteverzekeringen gezinsondersteunende diensten zoals huishoudelijke hulp en kinderopvang gezondheidsbevorderende diensten en producten We zijn een social profit bedrijf. Dit betekent dat we de winsten reserveren om terug te investeren in diensten en producten ten voordele van onze klanten. Dit is onze driver om bedrijfseconomisch te handelen. Voor bepaalde diensten worden we gedeeltelijk gefinancierd met middelen van de overheid. Dat we zo zorgzaam mogelijk met deze middelen omspringen, past in onze visie op duurzaam ondernemen. Partena Ziekenfonds & partners maakt deel uit van de Groep Partena, een netwerk van complementaire ondernemingen die de klant begeleidt in alles wat hij onderneemt en in alle fases van zijn privé‐ en professioneel leven.
1.1
Context
Op 1 januari 2014 gingen Euromut en Partena Ziekenfonds in Vlaanderen en Nederlandstalig Brussel samen. Vanaf dan zijn klanten van Euromut lid van het onafhankelijke ziekenfonds Partena. Meer info: http://www.mloz.be/nl/art/de‐onafhankelijke‐mutualiteiten‐euromut‐partena‐ziekenfonds‐en‐partenamut‐ kondigen‐een‐strategis Door onze krachten te bundelen, kunnen we beter aan de verwachtingen voldoen van al onze klanten en hun belangen behartigen, rekening houdend met de evoluties in de sociale zekerheid en het gezondheidsbeleid (federaal en regionaal).
1.2
Waarom Sitecore?
In 2012 hebben de Onafhankelijke Ziekenfondsen beslist om gebruik te maken van een Content Management Systeem. Na een grondige benchmarking van bestaande oplossingen werd Sitecore gekozen als CMS. Onze corporate website dient dus in dit CMS te worden geïmplementeerd en de focus dient te liggen op de mogelijkheid om bezoekerservaring te personaliseren en de conversie te verhogen. Toekomstgewijs is de uitbreidbaarheid aan functionaliteiten heel belangrijk.
1.3
Vooranalyse
De bijgevoegde wireframes zijn het resultaat van een uitgebreide analyse in samenwerking met Dearmedia en een reeks van A/B usertests. Alles werd afgetoetst met de analyses van Partenamut om zoveel mogelijk synergie te bekomen. Met deze verzamelde gegevens zijn reeds de sitemap en type pagina’s bepaalt. Voorafgaand werd er een onderzoeksproject opgestart waarbij 70 klanten werden bevraagd rond het globaal aanbod van Partena en hun bezoekersgedrag van de websites. Ook intern werden medewerkers geïnterviewd rond het gebruik, de inhoud en de structuur van de websites. In dit document zijn alle richtlijnen beschreven aangaande grafisch ontwerp van de nieuwe website met online tools, alsook de ontwikkeling van het frontend framework. Dit project omvat de samensmelting van 6 websites tot één globale bedrijfswebsite. De betrokken websites zijn: www.partena‐ziekenfonds.be www.partena‐partners.be
3
www.partena‐dienstencheques.be www.partena‐kinderopvang.be www.goedvoorjou.be www.partena‐kantoren.be
De volledige brandbook en web‐identiteit richtlijnen worden als apart document bijgevoegd. Een volledige functionele analyse is ook opgesteld en gepubliceerd op 06/10/2014. De keuze van een design partner is gepland eind november/begin december 2014 onmiddellijk gevolgd door een kick‐off.
2
Administratieve details
De administratieve details worden besproken in deel 1 van het bestek gekoppeld aan deze opdracht.
3
Grafisch design en frontend framework
Het ontwerp dient gebaseerd te worden op het aangeleverde brandbook en het web‐identiteit richtlijnen document (zie annex). Toch is het toegestaan deze uit te breiden, maar dit moet op een coherente manier toegepast worden. De website moet in het Bootstrap 1 design framework (laatste versie) geïmplementeerd worden, aangevuld met Partena visuele features en met Less CSS 2 framework. Toegang tot bestanden van framework moet verleend worden. Dit framework dient ook in een Gitomgeving 3 opgezet te worden (makkelijk leesbaar, begrijpbaar en bruikbaar). Dit framework zal ook gebruikt worden voor toekomstige ontwikkelingen van tools/nevenprojecten en daarvoor is het noodzakelijk dat het makkelijk herbruikbaar moet zijn. De Git documentatie zal dus zowel de showcase van het framework (web grafische richtlijnen) zijn als de centrale plaats waar alle CSS, JS, icons, losse componenten,… ‘gestockeerd’ worden, alsook hoe alles moet worden toegepast. De website moet gebruik maken van HTML5 en CCS3, en met ondersteuning van oude internet browsers via gebruik van Modernizr9 4. Componenten/snippets die javascript gebruiken (carrousels, modals, menu, dropdowns…) dienen compatibel te zijn met de laatste versie van jQuery (incl. IE7 ondersteunend). Het ontwerp moet aansluiten bij de huisstijl, maar mag op een ‘frissere en gedurfdere’ manier toegepast worden met goede contrasten (goede leesbaarheid op glossy smartphone schermen en voor slechtzienden). Voor een optimale toegankelijkheid en SEO dient het design bullet proof te zijn en moeten de W3C standaarden gevolgd worden. Er dienen zo weinig mogelijk afbeeldingen gebruikt te worden. Logo, achtergronden, iconen,… moeten compatibel zijn met high pixel density schermen (vb. Retina), @2x images, iconen moeten vectorieel zijn (svg/webfont). Belangrijk is ook dat tijd moet worden voorzien voor de integratie van het frontend framework, in samenwerking met de Sitecore partner.
4
1
http://getbootstrap.com/ ‐ 2 http://lesscss.org/ 3 http://git‐scm.com/ 4 http://modernizr.com/
3.1
Oplevering
Volgende zaken dienen uitgewerkt te worden: 3.1.1 Een frontend design framework Moet herbruikbaar zijn voor toekomstige tools/projecten. Elk uitgewerkte wireframe dient geïmplementeerd te worden: Homepagina (+ versie ingelogde klant) Terugbetalingen o Vervangingsinkomen level 1 o Vervangingsinkomen level 2 o Vervangingsinkomen level 3 Verzekeringen (+ versie ingelogde klant) o Hospitalisatieverzekeringen Hospitalia (+ versie ingelogde klant) Diensten o Kinderopvang (+ versie ingelogde klant) o Kinderdagverblijf Contact (+ versie ingelogde klant) Blogoverzicht o Blogdetail FAQ Zoekresultaten Geolocator (zoeken op eigen diensten) o Geolocator zoekresultaten o Geolocator detail kantoor Van volgende type pagina’s zijn geen wireframes voorzien, maar dienen als optie meegenomen te worden: ABC voordelen overzichtspagina: huidige URL: http://www.partena‐ ziekenfonds.be/nl/diensten/terugbetalingen‐en‐voordelen/voordelen` Landingspagina: voorbeeld van een huidige landingspagina: http://www.partena‐ ziekenfonds.be/nl/tandverzekering 3.1.2 Library van iconen en buttons Inclusief cookies overlay. 3.1.3 Responsive CSS voor elke type pagina van volledige website Dit omvatten alle templates en visuale elementen waarvan wireframe is van voorzien. 3.1.4 Aparte CSS voor print Enkel voor lay‐outs waar printfunctie is. 3.1.5 Links externe URLs Er zullen tal van links toegevoegd worden naar externe websites (tools, partners, …). Deze moeten op een andere manier geïmplementeerd worden dan interne links. Deze moeten visueel anders getoond worden (vb. Icoontje, kleur,…) of een tooltip die meedeelt dat bezoeker de website van Partena ziekenfonds & partners verlaat.
5
3.2
Specificaties
3.2.1
3.2.2
3.2.3
4
Bullet proof design Alle content moet leesbaar zijn zonder CSS of JS (leesbaar door tekstgebaseerde internet browsers en webcrawler) Best practices: o W3C standaarden volgen o Leesbaarheid/toegankelijkheid o Semantische HTML/CSS o Onnodige CSS classes/ids vermijden Cross browser compatibel: leesbaar op IE7+, Firefox, Chrome, Safari Multi platform: Windows, Mac OS, Android, iOS, Windows phone Responsive fluid design (smartphone, tablet, desktop, widescreen) Onderhoudsvriendelijk Less CSS framework: Versioning Bootstrap framework: o Herbruikbare snippets/widgets o Compatibel met laatste versie van Jquery o Volledig gedeelde, gebruiksvriendelijke doc (zoals Bootstrap voorziet in Git) Sterk en compleet UI library (gebaseerd op de bestaande grafische richtlijnen) Semantische HTML/CSS Onnodige CSS classes/ids vermijden Technologieën Less CSS framework HTML5/CSS3 Modernizr Indien webfonts gebruikt worden deze zo minimaal toepassen Logo, iconen, achtergrondafbeeldingen,… moeten compatibel zijn met high density schermen
Indicatieve planning
5 5.1
06/10/2014: Publicatie offerte aanvraag (design en functionele analyse) 13/11/2014 ‐ 12u00: Deadline doorsturen offertes November/December 2014: Evaluatie, onderhandelingen en keuze van de design partner December 2015: Project kick‐off Maart/April 2015: Frontend design framework en CSS beschikbaar Nog te bepalen: Integratie in Sitecore 1/11/2015: Go‐live van de website
Annex Huisstijlgids
Als apart document bijgevoegd, maar tevens downloadbaar via http://www.partena‐ziekenfonds.be/New526
6
5.2
Wireframes
Alle wireframes kunnen online gedownload worden in pdf of html formaat via http://www.partena‐ ziekenfonds.be/New526
5.3
Website architectuur
Onze website architectuur kan online gedownload worden in png formaat via http://www.partena‐ ziekenfonds.be/New526
7
