Sparta.nl

Sparta

Sparta is het meest vooruitstrevende fietsenmerk van Nederland. Dat zie je in alles wat ze doen, vanaf de dag van oprichting in 1917 tot vandaag. Sparta houdt alle nieuwe technieken in de gaten en past deze toe op hun producten. Met als resultaat de prijswinnende E-bikes. DPI is verantwoordelijk voor het vertalen van de visie van Sparta naar de gloednieuwe website sparta.nl.

De opdracht

De website diende te voldoen aan de hedendaagse eisen. Zo is hij volledig responsive opgezet, zodat de gebruiksvriendelijkheid op zowel smartphones, tablets als pc’s goed tot zijn recht komt. Er is tijdens het ontwerpproces uitgegaan van het tablet-first principe, omdat de website het meest op een tablet wordt bekeken. Daarnaast speelt natuurlijk het product, de fiets, de meest belangrijke rol. Want wie sparta.nl bezoekt, is op zoek naar een fiets.

sparta

De flow

De fiets is het meest belangrijke onderdeel op Sparta.nl. Daarom is het belangrijk dat de website de gebruiker zo veel mogelijk bijstaat bij het maken van de juiste keuze voor het kopen van een fiets.

We hebben gekeken naar hoe een fysieke aankoop van een fiets verloopt in een winkel en hoe een klant zich daar oriënteert. En met name vanaf welk punt de gebruiker hulp of assistentie verwacht en wanneer je meer wilt weten over de technische aspecten van een fiets.

We zijn uitgegaan van de homepage als etalage, waar je de bezoekers inzicht geeft in je assortiment, welke service je biedt en wat de ‘unique selling points’ van Sparta zijn, bijvoorbeeld het Sparta Testcenter.

menu

Het menu

Het menu dient als assistent waarmee de gebruiker gemakkelijk alle content kan vinden. Bij de collectie wordt er direct gevraagd waarnaar de gebruiker op zoek is. Een E-bike of een reguliere fiets? Vervolgens tonen we de onderliggende productcategorieën waar de gebruiker zich mee kan meten. We tonen additionele links, mocht de gebruiker nog geen keuze hebben kunnen maken. Zo wordt de gebruiker voorzien van alle hulpmiddelen binnen het menu.

De overige menu items zijn vrij basic, de focus ligt vooral op de collectie. Echter is het wel zo dat sommige hulpstukken zoals de ‘Spartalocator’, ‘zoeken’ en de ‘fietsvergelijker’ over de content schuiven. Zo raakt de gebruiker minder snel de weg kwijt en kan hij of zij altijd terug naar de vorige pagina. Want we willen dat de gebruiker zoveel mogelijk tijd besteed op de productpagina, het gaat tenslotte om de fiets.

De collectie

Vanuit het menu navigeert de gebruiker naar de collectie of productcategorie. Hier worden de fietsafbeeldingen, in tegenstelling tot de oude website, groot weergegeven. In deze fase oriënteert de gebruiker zich voornamelijk visueel. Voor E-bikes fietsen bieden we meer informatie in de vorm van actiebanners om de gebruiker te overtuigen van de kracht van de E-bike. Voor de aanschaf van een elektrische fiets dient een gebruiker goed ingelezen te zijn.

Met behulp van de filter creeëren we een tweede assistent binnen de website. Zo kan de gebruiker gemakkelijk de fietsen filteren op de gewenste eisen. Welke prijs? Welke kleur? Wat voor niveau comfort?

product+filter

productpagina

Productpagina

De productpagina dient als hét podium voor de fiets. Hier bekijkt de gebruiker de fiets echt van dichtbij. De fiets wordt daarom groot afgebeeld en er kan gemakkelijk van model en kleur gewisseld worden. Een extra menu zorgt ervoor dat de gebruiker door de grote hoeveelheid informatie (motorpositie, accukeuze, specificaties) gemakkelijk kan navigeren. Een zeer belangrijk element op de productpagina is de mogelijkheid om een fiets te testen in het Sparta testcenter. Hier wordt extra aandacht aan besteed via de bestelknop en het extra blok onderaan de pagina.

Responsive

Voor op de tablet en de desktopversie zijn de functies en interacties binnen de website grotendeels hetzelfde gebleven. Dit omdat het gebruik van een tablet en de pc niet veel van elkaar verschillen. Voor gebruik op de smartphone hebben we een aantal interactieve elementen ingekort of weggehaald zoals bijvoorbeeld de fietsvergelijker. Door de beperkte ruimte op het scherm werd dit haast onmogelijk en we wilden de focus op de fiets zelf leggen. Welke informatie wilt een gebruiker zien wanneer hij de website op een smartphone bekijkt? Informatie over de fiets.

sparta-showcase

Het proces

wall

Scrum

Tijdens het proces hebben we Scrum als projectmethode gehanteerd en zijn we gestart met het bedenken van de kernfunctionaliteiten en gebruikerswensen van de website. We hebben de flow door de website eerst geschetst en besproken met de klant. Tijdens dit proces zijn er al enkele schermen ontworpen om de stijl en richting te bepalen. 

Styleguide

De stijl van de eerste schermen zijn omgezet naar een styleguide die we hebben gebruikt om de consistentie binnen de website te handhaven. Tevens diende de styleguide als een handig hulpmiddel voor het bouwen van de website, want alles diende strak op het grid te staan en pixel perfect te zijn.

De kracht van een stylesheet is het kunnen hergebruiken van elementen zodat niet iedere pagina ontworpen hoeft te worden. We hebben 4 templates ontwikkeld; overzichtspagina, productpagina, homepagina en de overlays (de zoekpagina, de Sparta locator en de fietsvergelijker). Met alleen deze 4 templates konden we het overgrote deel van de website al gaan bouwen.

styleguide

testen

Testen

Speciale interactievormen eisten extra aandacht. Het menu heeft meerdere varianten gekend. Dit zelfde gold voor het submenu op de productpagina en de interacties op de overige pagina’s. Deze zijn bepalend voor de flow binnen de website. Doordat we 4 templates hebben uitgewerkt, hebben we tijd bespaard voor de klant en uiteindelijk ook gezorgd voor een betere gebruikersvriendelijkheid.

Grid

We zijn gestart met een procentueel 2 koloms grid. Die we tot een bepaalde breedte opschalen en middels bepaalde keypoints terugschalen om op iedere resolutie een goede ervaring te kunnen bieden. Naast de 2 koloms indeling hebben we gebruik gemaakt van herbruikbare blokken die gemakkelijk onder elkaar kunnen vallen voor de smallere devices. Dit resulteert in minder maatwerk voor een mobiele variant, maar wel met het gewenste resultaat en beleving.

Flat design

Flat design sluit goed aan bij de visie van DPI: meer de nadruk leggen op de content door goede typografie, geschreven teksten en fotografie. Alle overige ontwerpelementen dienen alleen versterkend te werken en de focus op de content te houden.

 

live

Live!

Op 30 oktober zijn we live gegaan. We zijn enorm trots op het resultaat en kunnen niet wachten om de website de komende tijd nog beter te maken.

Heb je tips of vragen? Neem dan gerust contact met ons op:
informatie@dpi.nl of +31 70 346 06 79.