Webdesign en Interface Design voor Barini

Vooraf

Deze casestudie is het vervolg op Identity Design voor Barini. Daarin stond het ontwerp van de visuele identiteit van Barini centraal. En omdat een website/webwinkel vrij organisch voortvloeit uit een visuele identiteit kwam was het ontwerp van dit interactieve deel daarna.
Deze casestudie zal toelichten hoe de webwinkel voor Barini ontworpen is, vanuit welke principes, en welke ideeën achter de ontwerpbeslissingen schuil gaan.

*Ik raad je sterk aan om eerst de identity-design casestudy te lezen zodat je een goed beeld hebt van het belang en het ontwerpproces van een visuele identiteit.

Webdesign en Interface Design voor Barini

Vooraf

Deze casestudie is het vervolg op Identity Design voor Barini. Daarin stond het ontwerp van de visuele identiteit van Barini centraal. En omdat een website/webwinkel vrij organisch voortvloeit uit een visuele identiteit kwam was het ontwerp van dit interactieve deel daarna.
Deze casestudie zal toelichten hoe de webwinkel voor Barini ontworpen is, vanuit welke principes, en welke ideeën achter de ontwerpbeslissingen schuil gaan.

*Ik raad je sterk aan om eerst de identity-design casestudy te lezen zodat je een goed beeld hebt van het belang en het ontwerpproces van een visuele identiteit.

Projectomschrijving

De webshop van Barini zou de voornaamste dienst worden van het gelijknamige bedrijf. En uiteraard gaat er achter een digitale winkel een groot pakhuis schuil met daarin alle producten. Maar voor de gebruiker van de website is dit doorgaans onzichtbaar.
Feit blijft wel dat het ideaalbeeld van João en Jengiz luidde: “Barini moet de one-stop automaterialen shop van Nederland worden. En de webshop zal 10.000 producten bevatten bij lancering.”
Kortom; er zouden direct 10.000 producten te bestellen zijn via de shop op vanaf de eerste dag dat de website live was. Een fikse taak en direct is in te schatten hoe cruciaal de interface is die al deze producten overzichtelijk in beeld moet brengen.
Binnen de metafoor van een fysieke winkel met 10.000 producten kun je eenvoudig nagaan hoe belangrijk een goede index en presentatie van je producten is. En binnen webshops (die steeds meer bekeken worden op kleine smartphone-beeldschermen) is dit een opgave van formaat.
Mijn taak was het om door middel van Photoshop mock-ups (visuele prototypes) de belangrijkste pagina’s van de webshop te ontwerpen en om de overkoepelende navigatie uit te denken.
Daarbij was het zaak dat iedere pagina zou worden uitgewerkt in drie formaten. Een design voor de smartphone, voor de tablet en voor de laptop/pc.
In totaal zou ik designs uitwerken op deze drie beeldschermformaten voor de homepage, het hoofdmenu, de productpagina, het productoverzicht, het bestelproces, het beoordelingsproces en het verzeker/financier/betaal-proces.
Tussenliggende pagina’s en schermen zouden worden uitgewerkt door een front-end developer die eveneens betrokken was bij het project. Zodra namelijk de visuele stijl van een website bepaald is en de voornaamste elementen zijn vormgegeven kunnen deze zonder al te veel aanpassingen worden doorgevoerd op andere plekken.

Projectdoelstellingen

  • Waar binnen het ontwerp van de visuele identiteit vooral snelheid, stijl, kracht en een strakke ‘premium’ uitstraling werden nagestreefd, stond in dit project het gebruiksgemak voorop. Een eenvoudig en laagdrempelig te gebruiken webshop die vooral begrijpelijk was. Dit was van groot belang met het enorme assortiment dat in de planning stond.
    Vooral de garagebedrijven en groot-inkopers willen graag snel dingen gedaan krijgen binnen zo’n interface, dus overzicht een logische indeling en gemak waren het voornaamste streven.
  • Mobile-first is een strategie waarbij een interface eerst wordt uitgedacht op het kleinste en meest ‘lastige’ scherm met de meeste beperkingen. Deze strategie is gehanteerd voor de belangrijkste elementen en pagina’s van de Barini-webshop om er zo voor te zorgen dat de interface optimaal werkt voor de steeds dominanter-wordende smartphone.
  • Hoewel de webshop één slagje conservatiever benaderd is qua design dan de visuele identiteit was het wel van groot belang dat de visuele stijl van Barini duidelijk herkenbaar was en terug zou komen in de website. Het kleurenpalet van Barini-blauw en Barini-bruin zou daarom consistent aanwezig zijn. Evenals de eerder bepaalde lettertypes en fotobewerkingen.
  • Omdat je met navigatie-elementen niet al te gekke dingen kunt doen met het oog op gebruiksvriendelijkheid, heb ik het mijzelf tot taak gesteld om daarom binnen het design van de user experience hier en daar aparte dingen te doen. Kleine elementen die een emotie opwekken en hier en daar een knipoog geven naar de gebruiker, wat ervoor zorgt dat de webshop buiten de bekende kaders treedt.

Een zwart-wit foto van João en Jengiz Kwakernaat in het kantoor van Barini.

Toelichtingen en terminologie

Omdat een webshop voor gebruikers en buitenstaanders in feite hetzelfde is als een website en de term ‘webdesign’ vele malen meer ingeburgerd is dan ‘webshop design’, gebruik ik binnen deze case veelal de term ‘webdesign’ wanneer ik spreek over het vormgeven van de Barini-webshop. Een webshop is in veel gevallen een uitgebreider systeem, maar het kent dezelfde beperkingen als een gemiddelde website (zo niet veel meer) en verder zijn de overeenkomsten enorm groot. Beide werken vaak met een content management systeem aan de achterkant (wat de gebruiker niet ziet). Beide hebben een ‘primaire actie’ voor de gebruiker (het plaatsen van een bestelling) en een weg om die actie binnen de interface tot uitvoer te brengen. En beide hebben te kampen met een kritische, ongeduldige gebruiker die zijn oplossing het een gerust hart en het volste vertrouwen het liefst zo snel mogelijk in huis heeft.

Los van de term ‘webdesign’ gebruik ik de term ‘interface design’ voor specifiek de besturingselementen binnen deze website. Denk hierbij vooral aan het hoofdmenu, de navigatie en het gevoel van locatie (“Waar ben ik, waar kan ik heen en hoe kom ik daar?”). In feite is eigenlijk de hele website/webshop één grote interface, dus de term is ook hier ietwat afwijkend. Maar net als met webdesign en webshop design hebben we te maken met Engelse termen, die erg jong zijn en zelden consistent worden gedefinieerd.
Anders gezegd; een website kun je zien als een soort boek, maar dan interactiever en vele malen uitgebreider. Binnen een boek heb je een index om snel te komen waar je wezen moet. En in bepaalde boeken is de index even relevant als de content van het boek zelf. Binnen een website of webshop moeten beide elementen ontworpen worden (zowel de index, als presentatie van de content), maar vooral de navigatie-elementen van een website zijn van cruciaal belang. Deze vormen in feite het ‘dashboard van de auto’ en geven de gebruiker alle middelen om te doen wat hij moet doen.
Op het internet (waar aandacht en geduld zeer beperkt zijn) is het van groot belang dat deze navigatie overzichtelijk, simpel en voorspelbaar is. En waar je met een visuele identiteit meer creatief los kunt gaan omdat bijvoorbeeld een logo statisch is, is het bij een website of interface verstandiger om daarin juist wat terughoudender te zijn.
Terugkomend op de ‘auto dashboard’ metafoor; als iedere auto een drastisch anders dashboard zou hebben ten opzichte van elke andere auto (het stuur in het midden, de schakelaar voor de lampen op het planvond etc.) zou iedere doorsnee persoon opnieuw de besturing moeten leren wanneer hij/zij in een andere auto zou plaatsnemen. Wel creatief… Maar absoluut niet praktisch.
Op het web is het niet anders. Wat bekend is, voelt vertrouwd. Ook al zien we de webshop of website voor het eerst. Het geeft de gebruiker een gevoel van controle en hij of zij weet min of meer in te schatten ‘Wat? Hoe en Waar?’
Waar ik dus bij het ontwerpen van de visuele identiteit creatief helemaal los kon gaan, heb ik bij het ontwerp van de Barini-webshop mezelf wat afgeremd met als doel om het de gebruiker zoveel mogelijk tegemoet te komen.

Waar ik binnen dit webdesign-project vooral mijn creativiteit wat meer heb ingezet, is op het gebied van user experience design. Waar usability zicht richt op puur het gebruiksgemak van een product, richt user experience design zich vooral op het gebruiksgenot. Dit is onder andere te bewerkstelligen door het geven van een unieke inslag voor een bepaalde actie of interactie binnen de interface. Een element dat weliswaar bekend is, maar waar je een ietwat andere draai aan geeft om zo toch een “Hé dat is leuk/origineel!”-reactie te krijgen van je gebruiker. Deze onderdelen zal ik verderop in deze casestudie nader toelichten.

Op het moment dat de design-mock-ups van de webshop voor deze casestudie gemaakt werden was de webshop officieel nog niet live. Wat er dus binnen deze casestudie te zien is, zijn designs met veelal dummy-tekst en fictieve producten met expres lange titels en hoge prijzen. Dit laatste om ervoor te zorgen dat zelfs de duurste producten (lange getallen) en langste productnamen goed leesbaar zouden blijven op kleine beeldschermen. Kortom: een product gebruiken in de designfase met de titel ‘Product 1 / € 19,- ’ is te makkelijk. Een beter voorbeeld is: ‘20 Ton Hydraulische Vrachtwagenkrik / € 10.099,00’. Dit laatste is namelijk realistischer en veel langer, waardoor je als designer nog beter moet letten op leesbaarheid, contrast, vlakverdeling etc.

Empty section. Edit page to add content here.

Let's dive in!

Let's dive in!

Onderzoek & aanloop

Nog meer dan bij het ontwerp van de visuele identiteit is in het webdesign-stuk van dit Barini-project veel onderzoek gedaan naar de concurrentie, de markt en webshops in het algemeen. Veel webshops zijn al jaren actief en sommige van hun hebben door middel van uitgebreid onderzoek antwoorden gevonden op vraagstukken waar andere shops weer op voort kunnen borduren. Kortom; het wiel opnieuw uitvinden, zeker ten aanzien van een medium waarin gebruiksvriendelijkheid zo van belang is, is vaak niet alleen onverstandig maar ook heel kostbaar. Daarom is in het begin van dit project breed gekeken naar andere webshops met de vragen; Wat doen zij goed? Wat doen ze minder goed? En wat willen wij anders doen? etc. Uit al deze analyses is een grote hoeveelheid conclusies gekomen en daarna is begonnen aan het ontwerpproces. Er zijn schetsen en moodboards gemaakt, een aantal wireframes (lijntekeningen) en daarna is er begonnen met de eerste design-aftastingen van de smartphone-versie van de homepage.

Mobile first

Mobile-first is een benadering van ontwerpen waarbij je eerst de mobiele versie (smartphone beeldscherm-formaat) uitwerkt van een website of webshop. Dit met het idee dat wanneer het ontwerp goed werkt op zo’n klein formaat, het zeker weten werkt op grotere schermen (tablet en laptops/pc’s).

De vroegere benadering was andersom. Laptops en pc’s voerden de absolute boventoon qua internet gebruik en websites en webshops werden vooral toegespitst op die beeldscherm formaten. Waarna vervolgens in bepaalde gevallen (en soms überhaupt niet) simpelweg elementen verkleind en geschrapt werden om alles op een klein telefoonscherm te kunnen passen.
Tevens is er het element van ‘touch’ bij deze apparaten. Omdat ze praktisch allemaal bestuurd worden met de top van een vinger, die vele malen dikker en minder accuraat is dan de punt van een muiscursor.
Deze zaken zijn in feite enorme beperkingen voor een ontwerper maar tevens vormen ze een leuke uitdaging. Het is een constant gevecht om de ruimte (wat laten we wel zien en wat niet?) en “Is dit element goed aan te ‘klikken’ met een vingertop of heeft het meer ruimte nodig omdat ik anders per ongeluk op iets anders druk?

Onderzoek & aanloop

Nog meer dan bij het ontwerp van de visuele identiteit is in het webdesign-stuk van dit Barini-project veel onderzoek gedaan naar de concurrentie, de markt en webshops in het algemeen. Veel webshops zijn al jaren actief en sommige van hun hebben door middel van uitgebreid onderzoek antwoorden gevonden op vraagstukken waar andere shops weer op voort kunnen borduren. Kortom; het wiel opnieuw uitvinden, zeker ten aanzien van een medium waarin gebruiksvriendelijkheid zo van belang is, is vaak niet alleen onverstandig maar ook heel kostbaar. Daarom is in het begin van dit project breed gekeken naar andere webshops met de vragen; Wat doen zij goed? Wat doen ze minder goed? En wat willen wij anders doen? etc. Uit al deze analyses is een grote hoeveelheid conclusies gekomen en daarna is begonnen aan het ontwerpproces. Er zijn schetsen en moodboards gemaakt, een aantal wireframes (lijntekeningen) en daarna is er begonnen met de eerste design-aftastingen van de smartphone-versie van de homepage.

Mobile first

Mobile-first is een benadering van ontwerpen waarbij je eerst de mobiele versie (smartphone beeldscherm-formaat) uitwerkt van een website of webshop. Dit met het idee dat wanneer het ontwerp goed werkt op zo’n klein formaat, het zeker weten werkt op grotere schermen (tablet en laptops/pc’s).
De vroegere benadering was andersom. Laptops en pc’s voerden de absolute boventoon qua internet gebruik en websites en webshops werden vooral toegespitst op die beeldscherm formaten. Waarna vervolgens in bepaalde gevallen (en soms überhaupt niet) simpelweg elementen verkleind en geschrapt werden om alles op een klein telefoonscherm te kunnen passen.
Tevens is er het element van ‘touch’ bij deze apparaten. Omdat ze praktisch allemaal bestuurd worden met de top van een vinger, die vele malen dikker en minder accuraat is dan de punt van een muiscursor.
Deze zaken zijn in feite enorme beperkingen voor een ontwerper maar tevens vormen ze een leuke uitdaging. Het is een constant gevecht om de ruimte (wat laten we wel zien en wat niet?) en “Is dit element goed aan te ‘klikken’ met een vingertop of heeft het meer ruimte nodig omdat ik anders per ongeluk op iets anders druk?

Een screenshot-overzicht van verschillende schermen van de Barini-webshop op een smartphone-formaat.

Interface/navigatie-design

Na een x-aantal concepten, aftastingen en goed kijken naar wat al prima werkt en ingeburgerd is op het internet, begon de navigatie van de webshop vorm te krijgen. Dit is een opsomming van het ontwerp van de lay-out van de home-pagina op de smartphone van boven naar beneden:

  • Bovenin de interface is een blauwe balk zichtbaar in de eerder bepaalde Barini-blauwtinten met daarin een subtiel verloop van lichter-blauw (boven) naar donkerblauw (onder). Hierin zijn in het wit van links naar rechts het Barini logo, een Menu-knop, een Inloggen-knop en een Winkelwagen-knop zichtbaar. En in feite zijn dit de meest noodzakelijke elementen van de hele webwinkel.
    Je moet als gebruiker weten waar je bent (het logo), waar je heen kunt (het menu), dat je kunt inloggen als je een account hebt of dat dat überhaupt een optie is. En je moet altijd direct je winkelwagen en diens inhoud kunnen zien. Eenvoud was een harde eis voor deze eerste sectie.
    Tevens is (mede omdat het winkelwagen icoontje zo bekend is) direct in te schatten – alleen al kijkend naar de blauwe balk – dat dit waarschijnlijk een webshop is. En wat daarnaast direct opvalt en afwijkend is, zijn de drie gekleurde cirkeltjes naast het winkelwagen icoontje, waarvan het bovenste rode cirkel het meest opvalt omdat die het meest helder is. Dit is een user experience design-element waar ik later op terug kom.
  • Direct onder de blauwe (hoofd)balk is een bruine balk zichtbaar in de eerder bepaalde Barini-bruintinten. Ook deze balk heeft een subtiel verloop om ook dit element wat zachter en minder ‘plat’ te maken en deze balk bevat niets anders dan een prominente zoekbalk en een zoek-icoon.
    Met een beoogd assortiment van 10.000+ producten zal naar alle waarschijnlijkheid dit het voornaamste navigatie-element zijn voor gebruikers om te navigeren naar het product dat ze zoeken. Via het hoofdmenu kun je daar natuurlijk ook komen, maar dit vergt meer stappen, meer tijd, en je moet beter weten waar je ongeveer moet zijn. Deze zoekbalk behoeft geen extra stap. Je kunt er direct in typen en vervolgens op ‘zoeken’ klikken.
  • Op de homepage van de webwinkel wordt deze bruine balk gevolgd door een slider. Deze slider toont afbeeldingen van acties, nieuws en andere zaken die van belang kunnen zijn en zorgt ervoor dat deze zaken de aandacht trekken. Tevens is het (wanneer er sfeervolle foto’s worden ingezet) een element waaraan de gebruiker een gevoel van sfeer kan overhouden en omdat het geanimeerd is doorbreekt dit het meer statische karakter van de rest van de pagina.
  • De slider wordt daaronder gevolgd door enkele afwisselende beloftes van Barini zoals: “Voor 17:00 besteld, morgen in huis”. Dit alles om zoveel mogelijk vertrouwen te wekken bij de gebruiker en heel duidelijk te maken waar Barini voor staat en wat het bedrijf belooft.
  • Onder deze beloftes volgt nogmaals het ‘Assortiment’-(hoofd)menu, ditmaal met de hoofdcategorieën in uitgeklapte toestand (de menu/assortiment-knop toont pas het volledige menu na een klik) om de gebruiker nogmaals de kans te geven om snel te schakelen naar een afdeling waar hij of zij wezen moet. Tevens geeft het direct een beeld van de indeling van de webshop, de aangeboden categorieën en producten, zodat de gebruiker bij benadering weet wat hij of zij wel en niet kan vinden in de webshop. Hoewel de hoofdcategorieën direct zichtbaar zijn, moet de gebruiker wel op de categorie klikken om vervolgens de subcategorieën weer te geven. Dit omdat het hoofdmenu anders te veel ruimte in zou nemen op de pagina zelf.

Een screenshot van het eerste deel van de homepage van de Barini-webshop op smartphone-formaat met het hoofdmenu, de slider en het assortiment-menu.
Een screenshot van het tweede deel van de homepage van de Barini-webshop op smartphone-formaat met de call-to-action, de ‘nieuw’ en ‘bestverkocht’ tabs en enkele webshop-artikelen.

  • Vervolgens volgt er een widget met daarin een foto van Jengiz en de optie om hem persoonlijk te bellen of te mailen met alle vragen die de gebruiker heeft. Persoonlijke service en ondersteuning van hoog niveau is een absoluut streven van Barini en deze “Neem contact op!” sectie komt op vrijwel alle pagina’s terug. Een bijkomstigheid van deze sectie is dat zelfs wanneer een gebruiker helemaal geen vraag heeft, hij of zij altijd weet dat er persoonlijk contact mogelijk is met de Barini-medewerkers. Dit geeft vertrouwen en een geruster gevoel dan wanneer deze gegevens enigszins weggestopt zouden worden (zoals nog wel eens gebeurt). Het komt transparant over en je biedt je gebruiker altijd een uitweg voor als hij of zij er echt niet meer uit komt.
  • Daarna volgt een sectie met de bestverkochte en nieuwste producten van de webshop. Deze sectie is opgesplitst in twee tabbladen waar tussen de gebruiker eenvoudig heen en weer kan klikken. Dit element is er weer één die ik bij User Experience Design verder toelicht, want het is een feature die ik vooralsnog zie als zijnde vrij uniek.
    In deze sectie staan daarnaast twee producten volledig in beeld onder elkaar. En twee producten daarnaast (rechts ervan) die half in beeld staan. Dit om de gebruiker er subtiel op te wijzen dan hij of zij horizontaal met zijn vinger door deze producten kan bladeren. De half-zichtbare producten vragen praktisch om in beeld te komen en de verleiding is groot om met de vinger te swipen zodat dat gebeurt. Zodra de gebruiker dit ontdekt heeft, weet hij of zij dat dit waarschijnlijk geldt binnen de hele interface van de webshop. Ook hier kom ik in de user experience design-sectie op terug.
  • De laatste sectie van de webshop is de footer. Dit is een beknopte versie van de sitemap (een overzicht van de belangrijkste pagina’s) en zet tevens een aantal vertrouwenwekkende elementen in, zoals de logo’s van bekende banken en betaalinstellingen en de Barini-contactgegevens.

Deze toelichting van de secties toont natuurlijk alleen de homepage en dat ook nog eens op slechts één beeldschermformaat. Maar veel onderdelen van deze opzet komen her en der terug en de grotere beeldschermen hanteren in feite dezelfde indeling, maar dan met de secties (waar mogelijk) naast elkaar in plaats van onder elkaar. Dit omdat er simpelweg veel meer horizontale ruimte is op tablets en laptops/pc’s.

Interface/navigatie-design

Na een x-aantal concepten, aftastingen en goed kijken naar wat al prima werkt en ingeburgerd is op het internet, begon de navigatie van de webshop vorm te krijgen. Dit is een opsomming van het ontwerp van de lay-out van de home-pagina op de smartphone van boven naar beneden:

  • Bovenin de interface is een blauwe balk zichtbaar in de eerder bepaalde Barini-blauwtinten met daarin een subtiel verloop van lichter-blauw (boven) naar donkerblauw (onder). Hierin zijn in het wit van links naar rechts het Barini logo, een Menu-knop, een Inloggen-knop en een Winkelwagen-knop zichtbaar. En in feite zijn dit de meest noodzakelijke elementen van de hele webwinkel.
    Je moet als gebruiker weten waar je bent (het logo), waar je heen kunt (het menu), dat je kunt inloggen als je een account hebt of dat dat überhaupt een optie is. En je moet altijd direct je winkelwagen en diens inhoud kunnen zien. Eenvoud was een harde eis voor deze eerste sectie.
    Tevens is (mede omdat het winkelwagen icoontje zo bekend is) direct in te schatten – alleen al kijkend naar de blauwe balk – dat dit waarschijnlijk een webshop is. En wat daarnaast direct opvalt en afwijkend is, zijn de drie gekleurde cirkeltjes naast het winkelwagen icoontje, waarvan het bovenste rode cirkel het meest opvalt omdat die het meest helder is. Dit is een user experience design-element waar ik later op terug kom.
  • Direct onder de blauwe (hoofd)balk is een bruine balk zichtbaar in de eerder bepaalde Barini-bruintinten. Ook deze balk heeft een subtiel verloop om ook dit element wat zachter en minder ‘plat’ te maken en deze balk bevat niets anders dan een prominente zoekbalk en een zoek-icoon.
    Met een beoogd assortiment van 10.000+ producten zal naar alle waarschijnlijkheid dit het voornaamste navigatie-element zijn voor gebruikers om te navigeren naar het product dat ze zoeken. Via het hoofdmenu kun je daar natuurlijk ook komen, maar dit vergt meer stappen, meer tijd, en je moet beter weten waar je ongeveer moet zijn. Deze zoekbalk behoeft geen extra stap. Je kunt er direct in typen en vervolgens op ‘zoeken’ klikken.

Een screenshot van het eerste deel van de homepage van de Barini-webshop op smartphone-formaat met het hoofdmenu, de slider en het assortiment-menu.

  • Op de homepage van de webwinkel wordt deze bruine balk gevolgd door een slider. Deze slider toont afbeeldingen van acties, nieuws en andere zaken die van belang kunnen zijn en zorgt ervoor dat deze zaken de aandacht trekken. Tevens is het (wanneer er sfeervolle foto’s worden ingezet) een element waaraan de gebruiker een gevoel van sfeer kan overhouden en omdat het geanimeerd is doorbreekt dit het meer statische karakter van de rest van de pagina.
  • De slider wordt daaronder gevolgd door enkele afwisselende beloftes van Barini zoals: “Voor 17:00 besteld, morgen in huis”. Dit alles om zoveel mogelijk vertrouwen te wekken bij de gebruiker en heel duidelijk te maken waar Barini voor staat en wat het bedrijf belooft.
  • Onder deze beloftes volgt nogmaals het ‘Assortiment’-(hoofd)menu, ditmaal met de hoofdcategorieën in uitgeklapte toestand (de menu/assortiment-knop toont pas het volledige menu na een klik) om de gebruiker nogmaals de kans te geven om snel te schakelen naar een afdeling waar hij of zij wezen moet. Tevens geeft het direct een beeld van de indeling van de webshop, de aangeboden categorieën en producten, zodat de gebruiker bij benadering weet wat hij of zij wel en niet kan vinden in de webshop. Hoewel de hoofdcategorieën direct zichtbaar zijn, moet de gebruiker wel op de categorie klikken om vervolgens de subcategorieën weer te geven. Dit omdat het hoofdmenu anders te veel ruimte in zou nemen op de pagina zelf.
  • Vervolgens volgt er een widget met daarin een foto van Jengiz en de optie om hem persoonlijk te bellen of te mailen met alle vragen die de gebruiker heeft. Persoonlijke service en ondersteuning van hoog niveau is een absoluut streven van Barini en deze “Neem contact op!” sectie komt op vrijwel alle pagina’s terug. Een bijkomstigheid van deze sectie is dat zelfs wanneer een gebruiker helemaal geen vraag heeft, hij of zij altijd weet dat er persoonlijk contact mogelijk is met de Barini-medewerkers. Dit geeft vertrouwen en een geruster gevoel dan wanneer deze gegevens enigszins weggestopt zouden worden (zoals nog wel eens gebeurt). Het komt transparant over en je biedt je gebruiker altijd een uitweg voor als hij of zij er echt niet meer uit komt.

Een screenshot van het tweede deel van de homepage van de Barini-webshop op smartphone-formaat met de call-to-action, de ‘nieuw’ en ‘bestverkocht’ tabs en enkele webshop-artikelen.

  • Daarna volgt een sectie met de bestverkochte en nieuwste producten van de webshop. Deze sectie is opgesplitst in twee tabbladen waar tussen de gebruiker eenvoudig heen en weer kan klikken. Dit element is er weer één die ik bij User Experience Design verder toelicht, want het is een feature die ik vooralsnog zie als zijnde vrij uniek.
    In deze sectie staan daarnaast twee producten volledig in beeld onder elkaar. En twee producten daarnaast (rechts ervan) die half in beeld staan. Dit om de gebruiker er subtiel op te wijzen dan hij of zij horizontaal met zijn vinger door deze producten kan bladeren. De half-zichtbare producten vragen praktisch om in beeld te komen en de verleiding is groot om met de vinger te swipen zodat dat gebeurt. Zodra de gebruiker dit ontdekt heeft, weet hij of zij dat dit waarschijnlijk geldt binnen de hele interface van de webshop. Ook hier kom ik in de user experience design-sectie op terug.
  • De laatste sectie van de webshop is de footer. Dit is een beknopte versie van de sitemap (een overzicht van de belangrijkste pagina’s) en zet tevens een aantal vertrouwenwekkende elementen in, zoals de logo’s van bekende banken en betaalinstellingen en de Barini-contactgegevens.

Deze toelichting van de secties toont natuurlijk alleen de homepage en dat ook nog eens op slechts één beeldschermformaat. Maar veel onderdelen van deze opzet komen her en der terug en de grotere beeldschermen hanteren in feite dezelfde indeling, maar dan met de secties (waar mogelijk) naast elkaar in plaats van onder elkaar. Dit omdat er simpelweg veel meer horizontale ruimte is op tablets en laptops/pc’s.

Zwevende smartphones tegen een zwarte achtergrond met screenshots van de Barini-webshop.
Een Formule 1-auto op snelheid waar de vonken vanaf vliegen.

Tablet & laptop/pc

Na het uitdenken en uitwerken van de belangrijkste elementen op het smartphone-formaat heb ik mij gebogen over de tablet- en laptop/pc-varianten van de designs. Ikzelf voorzie dat de groei van smartphones zal doorzetten en dat dit het voornaamste communicatiemiddel zal worden en blijven. Wat tevens betekent dat de smartphone de tablet en laptop/pc meer en meer gaat verdringen. Echter; als ik mijn geld moet inzetten op de tablet vs. de laptop/pc dan denk ik dat de tablet het absoluut zal winnen van die twee. (Sinds 2011 is globaal het verkochte aantal computers ieder jaar verder gedaald)
Voor deze casestudie licht ik daarom specifiek de smartphone en tablet uit als het gaat om designs en laat ik de laptop/pc buiten beeld. Temeer ook omdat wanneer een tablet van redelijk formaat (10 inch+ in beeldscherm-diagonaal) in landschapsmodus wordt gebruikt, deze in feite een laptopscherm benadert qua afmeting.
Hieronder zijn enkele schermen en secties op tablet-formaat te zien met daarop onder andere het bredere hoofdmenu met drie kolommen, het bestel- en beoordelingsproces van de producten en het verzeker/financieren scherm voor geselecteerde producten.

  • Wat duidelijk wordt is dat hier gekozen is om de zoekbalk te verwerken in de bovenste blauwe balk. Op het smartphone formaat was hier de ruimte niet voor, maar bij bredere schermen kon dit perfect en anders zou er in de blauwe balk te veel nodeloze ruimte vrij komen. Als gevolgd daarvan kwam de bruine balk daaronder leeg te staan en kon die perfect dienen om de Barini-beloftes te tonen. Zo blijft het geheel consistent tussen alle beeldscherm-formaten (blauwe balk, dan bruine balk en daaronder de content) maar heeft ieder beeldscherm-formaat zijn eigen optimale weergave.

  • Rechts bovenin is een design te zien van het bestelproces genaamd ‘Barini Kassa’ met een subtiele knipoog naar mijn eerdergenoemde gekleurde cirkels naast het winkelwagen-icoontje. Hier kom ik in de ‘user experience design’-sectie van deze casestudie uitgebreider op terug.
    Tevens is op deze pagina een absoluut minimum aan registratie-details te zien die worden gevraagd aan de gebruiker (des te minder hij/zij hoeft in te vullen des te hoger de conversie van prospect naar klant). En rechtsboven staat te allen tijde het hoofdtelefoonnummer van de Barini-helpdesk met het idee dat als iemand er tijdens het bestellen niet uitkomt, hij of zij direct kan bellen en niet hoeft door te klikken naar de contactpagina.
    Direct daaronder staat een beknopte opsomming van de bestelling ter dubbel-check en een Barini Service-sectie met nogmaals de beloftes en logo’s van bekende samenwerkingspartners en koppelingen. Dit eveneens weer om herkenning en vertrouwdheid op te wekken.
  • Direct onder dit scherm is een deel van het productoverzicht te zien op tablet-formaat. En ook bij deze pagina is eveneens gekozen voor drie kolommen (net als het hoofdmenu) om zoveel mogelijk relevante informatie te tonen.
    Direct daarboven staan filter-opties om het productoverzicht toe te spitsen op de wensen van de gebruiker bijv. goedkoopst naar duurst, nieuw naar oud, type weergave: lijst vs. miniaturen en hoeveel producten de gebruiker ziet per pagina.

Tablet & laptop/pc

Na het uitdenken en uitwerken van de belangrijkste elementen op het smartphone-formaat heb ik mij gebogen over de tablet- en laptop/pc-varianten van de designs. Ikzelf voorzie dat de groei van smartphones zal doorzetten en dat dit het voornaamste communicatiemiddel zal worden en blijven. Wat tevens betekent dat de smartphone de tablet en laptop/pc meer en meer gaat verdringen. Echter; als ik mijn geld moet inzetten op de tablet vs. de laptop/pc dan denk ik dat de tablet het absoluut zal winnen van die twee. (Sinds 2011 is globaal het verkochte aantal computers ieder jaar verder gedaald)
Voor deze casestudie licht ik daarom specifiek de smartphone en tablet uit als het gaat om designs en laat ik de laptop/pc buiten beeld. Temeer ook omdat wanneer een tablet van redelijk formaat (10 inch+ in beeldscherm-diagonaal) in landschapsmodus wordt gebruikt, deze in feite een laptopscherm benadert qua afmeting.
Hieronder zijn enkele schermen en secties op tablet-formaat te zien met daarop onder andere het bredere hoofdmenu met drie kolommen, het bestel- en beoordelingsproces van de producten en het verzeker/financieren scherm voor geselecteerde producten.

  • Wat duidelijk wordt is dat hier gekozen is om de zoekbalk te verwerken in de bovenste blauwe balk. Op het smartphone formaat was hier de ruimte niet voor, maar bij bredere schermen kon dit perfect en anders zou er in de blauwe balk te veel nodeloze ruimte vrij komen. Als gevolgd daarvan kwam de bruine balk daaronder leeg te staan en kon die perfect dienen om de Barini-beloftes te tonen. Zo blijft het geheel consistent tussen alle beeldscherm-formaten (blauwe balk, dan bruine balk en daaronder de content) maar heeft ieder beeldscherm-formaat zijn eigen optimale weergave.

  • Rechts bovenin is een design te zien van het bestelproces genaamd ‘Barini Kassa’ met een subtiele knipoog naar mijn eerdergenoemde gekleurde cirkels naast het winkelwagen-icoontje. Hier kom ik in de ‘user experience design’-sectie van deze casestudie uitgebreider op terug.
    Tevens is op deze pagina een absoluut minimum aan registratie-details te zien die worden gevraagd aan de gebruiker (des te minder hij/zij hoeft in te vullen des te hoger de conversie van prospect naar klant). En rechtsboven staat te allen tijde het hoofdtelefoonnummer van de Barini-helpdesk met het idee dat als iemand er tijdens het bestellen niet uitkomt, hij of zij direct kan bellen en niet hoeft door te klikken naar de contactpagina.
    Direct daaronder staat een beknopte opsomming van de bestelling ter dubbel-check en een Barini Service-sectie met nogmaals de beloftes en logo’s van bekende samenwerkingspartners en koppelingen. Dit eveneens weer om herkenning en vertrouwdheid op te wekken.
  • Direct onder dit scherm is een deel van het productoverzicht te zien op tablet-formaat. En ook bij deze pagina is eveneens gekozen voor drie kolommen (net als het hoofdmenu) om zoveel mogelijk relevante informatie te tonen.
    Direct daarboven staan filter-opties om het productoverzicht toe te spitsen op de wensen van de gebruiker bijv. goedkoopst naar duurst, nieuw naar oud, type weergave: lijst vs. miniaturen en hoeveel producten de gebruiker ziet per pagina.

Zwevende screenshots van de Barini-webshop op tabletformaat met daarop o.a. het besteloverzicht, het assortiment-menu en het recensie-scherm.

Iconen

Op kleinere schermen kunnen effectieve, begrijpelijke iconen een geschenk uit de hemel zijn. Iconen zijn doorgaans kleiner dan woorden en voelen logischer aan om op te drukken met je vingertop dan op een woord. Dit is een essentieel verschil tussen de muis- versus de touchscreen-interface.
Binnen de Barini-webshop is ervoor gekozen om gebruik te maken van een open-source iconenset genaamd: Fontawesome. Het voordeel van dergelijke iconen is onder andere dat ze enorm scherp lijken op ieder beeldscherm omdat het vectorbestanden zijn. Vectorbestanen zijn oneindig schaalbaar zonder dat er kwaliteitsverlies optreedt (zie de blauwe helft van de cirkel).
Dit in tegenstelling tot de bitmapafbeeldingen die in het verleden werden gebruikt. Bitmapafbeeldingen werden stukker vager op een groter formaat en op scherpere beeldschermen (zie de witte helft van de cirkel). En met de steeds hoger-wordende resolutie van beeldschermen (vooral op smartphones) is ‘vector’ als techniek heel waardevol.
Naast deze open-source iconen heb ik een specifiek autosport-gerelateerd icoon gevonden in de vorm van een Formule 1-helm. Deze licht ik toe in de sectie hieronder.

Een cirkel in twee helften waarbij de linkerhelft donkerblauw is met een scherpe rand. En de linkerhelft wit is met een gekartelde rand van lagere kwaliteit.

Iconen

Op kleinere schermen kunnen effectieve, begrijpelijke iconen een geschenk uit de hemel zijn. Iconen zijn doorgaans kleiner dan woorden en voelen logischer aan om op te drukken met je vingertop dan op een woord. Dit is een essentieel verschil tussen de muis- versus de touchscreen-interface.
Binnen de Barini-webshop is ervoor gekozen om gebruik te maken van een open-source iconenset genaamd: Fontawesome. Het voordeel van dergelijke iconen is onder andere dat ze enorm scherp lijken op ieder beeldscherm omdat het vectorbestanden zijn. Vectorbestanen zijn oneindig schaalbaar zonder dat er kwaliteitsverlies optreedt (zie de blauwe helft van de cirkel).
Dit in tegenstelling tot de bitmapafbeeldingen die in het verleden werden gebruikt. Bitmapafbeeldingen werden stukker vager op een groter formaat en op scherpere beeldschermen (zie de witte helft van de cirkel). En met de steeds hoger-wordende resolutie van beeldschermen (vooral op smartphones) is ‘vector’ als techniek heel waardevol.
Naast deze open-source iconen heb ik een specifiek autosport-gerelateerd icoon gevonden in de vorm van een Formule 1-helm. Deze licht ik toe in de sectie hieronder.

Een cirkel in twee helften waarbij de linkerhelft donkerblauw is met een scherpe rand. En de linkerhelft wit is met een gekartelde rand van lagere kwaliteit.
Een overzicht van alle gebruikte iconen in de webshop van Barini.

User Experience Design

Zoals eerder aangehaald was het mijn intentie om qua lay-out en navigatie geen rare dingen te doen binnen het ontwerp van de webshop. Het voortborduren op wat bekend is heeft (ook zeker met het oog op het budget en daarmee het aantal te besteden uren) simpelweg te veel voordelen ten opzichte van het alternatief.
Wat wel mijn streven was, was om binnen het design van de user experience hier en daar wat unieke features toe te voegen die de webshop meer karakter zouden geven. Kleine details en af en toe een knipoog naar de gebruiker die ervoor dienen dat de site niet ‘standaard’ over komt, maar echt even blijft hangen in het geheugen.
Hieronder volgt een beknopte opsomming van enkele van de features die ik bedacht om dit te bereiken.

User Experience Design

Zoals eerder aangehaald was het mijn intentie om qua lay-out en navigatie geen rare dingen te doen binnen het ontwerp van de webshop. Het voortborduren op wat bekend is heeft (ook zeker met het oog op het budget en daarmee het aantal te besteden uren) simpelweg te veel voordelen ten opzichte van het alternatief.
Wat wel mijn streven was, was om binnen het design van de user experience hier en daar wat unieke features toe te voegen die de webshop meer karakter zouden geven. Kleine details en af en toe een knipoog naar de gebruiker die ervoor dienen dat de site niet ‘standaard’ over komt, maar echt even blijft hangen in het geheugen.
Hieronder volgt een beknopte opsomming van enkele van de features die ik bedacht om dit te bereiken.

Twee zwevende zwarte tablets met het productoverzicht en assortiment-menu van de Barini-webshop.
Het ‘stoplicht concept’ waarbij een stoplicht naast het winkelwagen-icoon staat om aan te geven in welke ‘positie’ van de webshop de gebruiker zich bevindt.

Het stoplicht-concept

Het ‘stoplicht-concept’ (zoals ik het noem) is waarschijnlijk de feature waar ik het meest trots op ben. Het is een ludieke invalshoek voor een standaard winkelwagentje en ik maakte er eerder in deze casestudie al enkele toespelingen op. Binnen de racesport is het stoplicht een zeer bekend fenomeen. Het heeft niet helemaal dezelfde functie als in het normale verkeer, maar de insteek is: rood licht; wacht!, oranje licht: klaar voor de start?, groen licht: af!
Dit concept heb ik gekoppeld aan het bestelproces van de webshop. Waarbij rood licht geldt als ‘nog niets gedaan/neutraal’. Oranje geldt als: er zit een product in de winkelwagen maar het is nog niet afgerekend of de gebruiker is in het bestelproces. En groen licht is een voltooide bestelling. ‘Af!’ als het ware… Of ‘het is naar u onderweg’.
Dit stoplicht heb ik vorm gegeven door cirkels uit de iconenset in rood, oranje en geel te nemen. Evenals hun ‘licht-uit variant’ waar wel de contouren zichtbaar zijn, maar de cirkel niet is opgelicht. Kortom; als het stoplicht op rood staat is rood helder gekleurd en knalt die van het scherm. De oranje en groene ‘lampen’ zijn meer gedoofd, maar wel zichtbaar, zodat het stoplicht (ook op zeer klein formaat) wel degelijk herkenbaar blijft.

Een half-zwarte en half-witte tablet met daarop het bestelproces en het tab-menu van de Barini-webshop.
Een half-zwarte en half-witte tablet met daarop het bestelproces en het tab-menu van de Barini-webshop.
De bestelstappen van de Barini webshop met de voltooide stappen in het blauw, de onvoltooide stappen in het grijs en de ‘volledig voltooide’ staat in het groen.

De stoplicht-bestelstappen

Het stoplicht-concept heb ik doorgetrokken van de winkelwagen naar het bestelproces. Bovenin de bestelpagina zijn alle bestel-stappen zichtbaar en de actieve stap waarop de gebruiker zich bevindt is blauw en licht enigszins op. In de stap zelf zit het oranje lampje van het racecircuit verwerkt om een verband met het winkelwagentje aan te geven en om de gebruiker subtiel te sturen richting ‘groen licht’. Daarnaast zijn de stappen van het bestelproces onderverdeeld in 5 ‘borden’ die niet geheel toevallig doen denken aan bewegwijzeringsborden. Bij de laatste stap wordt het licht en het bord groen en verschijnen er de drie strepen van het Barini logo voor de letter B van Bedankt, alsof het woord wegrijdt (Af!) of de bestelling onderweg is.

De bestelstappen van de Barini webshop met de voltooide stappen in het blauw, de onvoltooide stappen in het grijs en de ‘volledig voltooide’ staat in het groen.
De bestverkocht/nieuw-tabs om de producten binnen de webshop overzichtelijker in beeld te brengen.

Bestverkocht/Nieuw

Een andere feature van de webwinkel zijn de ‘Bestverkocht/Nieuw’ tabs. Deze manier van informatie-design is niet heel origineel (o.a. regelmatig zichtbaar in smartphone apps) maar persoonlijk had ik het tot dusver niet eerder gezien binnen een webwinkel. En dat terwijl het een geweldig middel is om ruimte te besparen (vooral op kleinere beeldschermen). In feite heb je een ‘twee voor de prijs van één-benadering’ voor een sectie waar je anders een lange lijst met producten onder elkaar zou zien. Nu kun je simpelweg met één klik of ‘tap’ schakelen tussen de bestverkochte items (wat inspeelt op het wekken van vertrouwen) en de nieuwe producten (die wellicht geavanceerder zijn).

Producten in de Barini-webshop die half buiten beeld staan om de gebruiker aan te moedigen om te gaan swipen binnen de interface.

Half buiten beeld

Deze feature is vooral toegepast op de smartphone-designs van de Barini-webshop. Zoals eerder aangehaald toont dit idee anderhalf product in de horizontale breedte. Kortom; het 2e product staat half buiten beeld, terwijl de rest van de pagina in beeld staat… Dit moet de gebruiker aanzetten tot horizontaal swipen en zodra hij of zij weet dat dit kan, wordt dit een bekende handeling binnen de hele webshop. Horizontaal swipen op touchscreens is prettig en natuurlijk en het geeft Barini als bedrijf de mogelijkheid om meerdere producten op een rij te zetten ook al staat het op een klein beeldscherm. Tevens is het een soort ‘teaser’ van de producten, omdat je weliswaar een deel kunt zien maar niet alles. Het wekt nieuwsgierigheid.

Producten in de Barini-webshop die half buiten beeld staan om de gebruiker aan te moedigen om te gaan swipen binnen de interface.
Het helm en gebruikers-icoon van de Barini-webshop.

De helm

Het lijkt een klein detail, maar het icoon van de Formule 1-helm is een weloverwogen knipoog naar de doelgroep. Ten tijde van het uitwerken van deze casestudie staat nog niet vast of er eerst een persoons-icoon in beeld is en deze veranderd in een helm wanneer een gebruiker is ingelogd (alsof door in te loggen de persoon de racehelm op doet). Of dat te allen tijde de helm te zien is. Feit blijft dat het één van die kleine details is die de Barini-webshop simpelweg wat anders maakt en een beetje extra karakter geeft. En dat was de bedoeling. De helm in samenspel met de winkelwagen ernaast met het stoplicht (waar de helm ook nog eens ‘naartoe’ kijkt) is daarnaast een mooie bijkomstigheid.

Een zwart-wit foto van een klassieke Formule 1-auto.
Een favicon voor de webshop in het wit met daarop het B-zegel van Barini in hoogglans-zwart.
Een favicon voor de webshop in het zwart met daarop het B-zegel van Barini in hoogglans-aluminium.
Een favicon voor de webshop in donkerblauw met daarop het B-zegel van Barini in lichtgrijs-aluminium.
Een favicon voor de webshop in donkerblauw met daarop het B-zegel van Barini in lichtgrijs-aluminium.

Nawoord

Binnen het totale Barini-project van om en nabij de 160 uur aan werk, besloeg het ontwerpen van de webshop ongeveer 60 uur aan tijd. Het scheelde enorm dat in fase één van het project de visuele identiteit zo nauwkeurig was uitgedacht (daardoor konden we een vliegende start maken met de webshop) en tevens was het een verademing dat ik me als ontwerper kon buigen over puur het visuele stuk van dit deel van het project. Het is belangrijk bij interactief design zoals een website of webshop dat je weet wat er technisch haalbaar is en wat niet, zodat je als designer niet allerlei dingen verzint die lastig of niet uitvoerbaar blijken. Gelukkig beschik ik over deze kennis en daardoor was de aansluiting op de front-end developer optimaal. Maar fijn was het vooral dat ik me los van mijn technische kennis puur op het visuele en psychologische stuk kon richten van dit project. Dat is waar mijn hart ligt. En dat is waar mijn werk ook niet echt werk is. Maar meer een passie.
Ik heb meerdere momenten gehad bij zowel het ontwerp van de webshop als de visuele identiteit waarbij ik ’s avonds na 22:00 nogmaals Photoshop opstartte om aanpassingen of ingevingen door te voeren omdat me ineens iets moois binnen schoot.

En dergelijke dingen doe je natuurlijk vooral als je energie krijgt van je werk.
Mijn aandeel in de Barini-webshop voltooide ik rond eind juni 2017 en de site zelf ging in de lucht (in eerste instantie als ‘live’ testversie) in het midden van de zomer van 2017.
João en Jengiz zijn druk bezig met het vullen van de shop (10.000 producten bij lancering bleek lastig te realiseren), het verder uitbouwen van de site en het finetunen van alles.
Zelf kijk ik terug op een 2e deel van een groot totaalproject waarvan ik extreem veel geleerd heb en mijzelf meerdere malen heb overtroffen. Omdat ontwerpers doorgaans hun hun eigen grootste criticus zijn is dat een ontzettend fijn gevoel.
João en Jengiz wil ik (net als in de vorige Barini-casestudie) nogmaals enorm bedanken voor hun vertrouwen, inzet, betrokkenheid en de vrijheid die ze mij boden. En ik wens ze niets dan enorm veel succes met hun prachtige onderneming.

Binnen het totale Barini-project van om en nabij de 160 uur aan werk, besloeg het ontwerpen van de webshop ongeveer 60 uur aan tijd. Het scheelde enorm dat in fase één van het project de visuele identiteit zo nauwkeurig was uitgedacht (daardoor konden we een vliegende start maken met de webshop) en tevens was het een verademing dat ik me als ontwerper kon buigen over puur het visuele stuk van dit deel van het project. Het is belangrijk bij interactief design zoals een website of webshop dat je weet wat er technisch haalbaar is en wat niet, zodat je als designer niet allerlei dingen verzint die lastig of niet uitvoerbaar blijken. Gelukkig beschik ik over deze kennis en daardoor was de aansluiting op de front-end developer optimaal. Maar fijn was het vooral dat ik me los van mijn technische kennis puur op het visuele en psychologische stuk kon richten van dit project. Dat is waar mijn hart ligt. En dat is waar mijn werk ook niet echt werk is. Maar meer een passie.
Ik heb meerdere momenten gehad bij zowel het ontwerp van de webshop als de visuele identiteit waarbij ik ’s avonds na 22:00 nogmaals Photoshop opstartte om aanpassingen of ingevingen door te voeren omdat me ineens iets moois binnen schoot. En dergelijke dingen doe je natuurlijk vooral als je energie krijgt van je werk.
Mijn aandeel in de Barini-webshop voltooide ik rond eind juni 2017 en de site zelf ging in de lucht (in eerste instantie als ‘live’ testversie) in het midden van de zomer van 2017.
João en Jengiz zijn druk bezig met het vullen van de shop (10.000 producten bij lancering bleek lastig te realiseren), het verder uitbouwen van de site en het finetunen van alles.
Zelf kijk ik terug op een 2e deel van een groot totaalproject waarvan ik extreem veel geleerd heb en mijzelf meerdere malen heb overtroffen. Omdat ontwerpers doorgaans hun hun eigen grootste criticus zijn is dat een ontzettend fijn gevoel.
João en Jengiz wil ik (net als in de vorige Barini-casestudie) nogmaals enorm bedanken voor hun vertrouwen, inzet, betrokkenheid en de vrijheid die ze mij boden. En ik wens ze niets dan enorm veel succes met hun prachtige onderneming.

Projectdetails

Klant: Barini
Diensten: Webdesign, Interface Design, User Experience Design, Interaction Design
Datum oplevering: Q1 2017
Projectomvang: 60 uur

Deel dit project via