Sogeti.nl een IT website met een duidelijke identiteit

2 maart 2015 | interaction design | user experience

De nieuwe website zou vanaf de grond opnieuw opgebouwd worden. Een mooie opdracht waaraan ik heb gewerkt bij dietwee. Alle onderdelen van de website konden met een frisse blik bekeken worden. Besloten is om met de belangrijkste delen te starten en  de website daarna stapsgewijs uit te breiden. De eerste stap is gezet en staat ondertussen online.

De semi-Agile aanpak

Omdat het samen werken en van elkaar leren de voorkeur heeft boven documenteren en rapporteren aan elkaar, had Agile werken de voorkeur. Een geïntegreerd team van klant verantwoordelijke, interactie ontwerp, grafisch ontwerp en development. Waarbij tekstschrijver, fotograaf of een andere expert aanhaken wanneer nodig.
Om dat voor elkaar te krijgen moet iedereen wel op hetzelfde moment beschikbaar zijn, wat in dit geval maar gedeeltelijk lukte.
Het werd dus scrummen zonder sprinten.

The wall

Maar hoe krijgen we nu een effectievere website?

Alleen door goed te beseffen wie straks met de website gaan werken kan een effectieve website gebouwd worden. Door de doelgroep op weg te helpen.

Door dus de focus op de doelgroepen te leggen en met persona’s een helder beeld te creëren is dit voor iedereen duidelijk gemaakt. Hierdoor ontstaan ook geen discussies meer binnen team waarin gezegd wordt ‘ik vind dit duidelijker’. In plaats daar van gaan de discussie over; wat zou (persona) Maarten, de Scrum master hiervan vinden?

personas

Per doelgroep de doelen op de website benoemen en hier verschillende prioriteiten aan te geven levert een duidelijk overzicht op. Op basis hiervan konden keuzes gemaakt over waar als eerste aan gewerkt moest worden en wat de ‘nice to haves’ zijn voor de website.

Grove opzet en dan invullen, verbeteren en verfijnen

Een eerste flowchart, om de functies een plek te geven binnen de website geeft iedereen een indruk van waar we naar toe werken. De pagina’s worden opgezet als wireframes, waarin blokken met functionaliteit een plek krijgen. Eén voor één krijgen deze blokken hun invulling, waarmee steeds visueler gemaakt wordt waar we mee bezig zijn. Op deze manier kunnen ook betrokken afdelingen zien wat de nieuwe wedstrijd voor hen in gaat houden. En zij kunnen beginnen met content verzamelen.

Sogeti flowchart

En de website moet er op mobiel en tablet ook goed uit zien natuurlijk

Een Responsive Design, een website voor desktop, tablet en mobiel. Om voor te stellen hoe een website er op al de verschillende apparaten uit gaat zien valt niet voor iedereen mee. Maar door snelle schetsen te maken, gewoon met pen op papier, krijgt iedereen al snel een redelijke indruk van hoe de inhoud zich kan aanpassen aan de verschillende schermgroottes. En een foto van zo’n schets bekijken op de mobiel zelf, een heel ruw prototype, geeft meteen het gevoel van het toestel erbij. Hierdoor heeft iedereen binnen het team precies door wat de bedoeling is.

schets desktop mobile tablet

 

Tijd voor mooie plaatjes

Vanaf het begin van het project waren de ontwerper en Art Director bezig met visuele identiteit en hoe dit op de website toegepast kon worden.

Het globale kleurgebruik en beeldgevoel heeft al redelijk vorm gekregen. Maar nu de informatie en verschillende elementen meer hun plek op de pagina krijgen, kunnen ook echt volledige pagina’s ontworpen worden. En hiermee ziet iedereen hoe de identiteit ook op webpagina’s tot leven kan komen.

Mooie plaatjes maken van de schetsen

Prototypen, testen of de briljante ideeën ook echt werken

Van sommige oplossingen weet je pas echt of ze werken als het getest is, liefst met de echte bezoekers van de website. Daarom zijn deze losse onderdelen uitgewerkt als prototype. Deze technische schetsen geven het gevoel van de uiteindelijke website. Maar het zijn maar schetsen, die ook makkelijk aangepast kunnen worden. Of in de prullenbak verdwijnen als het niet blijkt te werken.

De details, of de basis?

Het juiste beeld, om aan te sluiten bij het gevoel van de bezoeker. Tekst, geschreven met de tone-of-voice van het bedrijf, maar altijd met de bezoeker helder voor ogen. De website kan mooi ontworpen zijn en technisch perfect werken, maar uiteindelijk gaat het om de content. Want daar komt de bezoeker voor. Door in bewoording – geen vaktermen als dat niet nodig is – en beeldtaal aan te sluiten bij de belevingswereld van de bezoeker wordt die het best geholpen en voelt zich thuis. Deze basis is dus tot in de details uitgewerkt en geoptimaliseerd.
Met als resultaat een goed bezochte website en een tevreden klant.