Remco Gaikema

UX Design & frontend

profile picture menu sluit

Ik analyseer, leg verbanden en heb oog voor detail

Als kind was ik altijd bezig met knutselen en zocht ik uit hoe iets werkte - leergierig en bevlogen. Ik ging net zo lang door totdat ik het snapte of dat het me gelukt was. En dat is nog steeds zo.


Hoe kan ik door verandering verbeteringen maken? Van mij mag de weg daar naartoe best afwijken van het geijkte pad. Dat vind ik juist interessant en is voor mij een bron van inspiratie.



Werkwijze

Ik onderzoek, schets scenario's en test deze uit. Zo kom ik erachter wat de meest waardevolle oplossing is. Dan ga ik verder.


De structuur van een website of app breng ik in kaart door middel van wireframes. Deze zet ik om naar interactieve prototypes en vervolgens werk ik het design verder uit. Daarnaast voeg ik graag (micro) animaties toe om de gebruikerservaring te optimaliseren.


Ik ga graag door tot het uiterste en houd ervan om met een gedreven team een mooi eindresultaat te creëren.

sluit

HCS Company

lees verder

Opdracht

Het toevoegen van zorgvuldig gekozen animaties aan de nieuwe website voor HCS Company.

De nieuwe online identiteit van HCS Company werd onder andere door de nieuwe website onthuld en het principe van 'onthullen' heb ik doorgevoerd in verschillende onderdelen van de site.

Concept

Doordat het design van de website ruim is opgezet heb ik gekozen om de meeste animaties te laten beginnen aan de onderkant van het scherm. Bij bepaalde onderdelen heb ik gekozen voor het midden van de viewport als triggerpunt.

Op deze manier blijft het gevoel behouden dat er steeds nog iets nieuws verschijnt.

Menu animatie

De schuine grafische elementen van de huisstijl van HCS Company heb ik laten animeren tijdens een 'mouse over' in het menu op de desktop. De menu items animeren één voor één in door middel van een stagger animatie. De mobiele weergave is wat anders aangezien er geen mouse over is. Daar is het menu beeldvullend.

Overige animaties

Verschillende onderdelen heb ik op een speelse manier geanimeerd. De bezoeker van de website krijgt het idee dat er steeds wat valt te ontdekken en hiermee heb ik een meerwaarde gecreëerd voor een anders statische website. De animatietijd en easing opties zijn volledig op elkaar afgestemd om zo een coherent geheel te vormen.

De combinatie van animatie en interactie zorgt voor een rijkere beleving van de website. Hiermee onderscheid HCS Company zich van branche genoten.

Agency: Sigbar, Maibru

Klant: HCS Company

Opdracht: Website verrijken met animaties (2019)

JavaScript, GSAP, ScrollMagic, CSS

KLM Birthday

lees verder

Opdracht

Bij de Birthday campagne van KLM moest er een uiting worden ingezet waarbij drie bestemmingen werden uitgelicht.

Ik koos voor een nieuw soort uiting (Cross device header) waardoor ik behoorlijk vrij was bij het bedenken van het concept. Afgezien van de huisstijl elementen was het belangrijk een animerende counter in de vorm van balonnen te tonen en moest de uiting responsive zijn.

KLM Birthday concept overview

Concept

Tijdens het ontwikkelen van het concept heb ik gekozen voor het gebruik van tabbladen aangezien dit een herkenbaar object is, uitnodigt tot interactie en ook responsive weer te geven is.

Om de interactie te bevorderen heb ik gekozen voor een duidelijke mouse-over actie. Mooie afbeeldingen van de bestemmingen nodigen de bezoeker uit om door te klikken.

Gemaakte keuzes

De bestemmingen werden door KLM geselecteerd, maar konden op het laatste moment nog wijzigen. Het aantal bestemmingen stond vast, namelijk drie. Daarom leek het mij goed mogelijk om de tabbladen ook op een mobiel device goed te kunnen weergeven.

De naam van de bestemming in combinatie met de van/voor prijs bleek toch iets teveel informatie, waardoor ik vanaf tablet formaat heb gekozen voor het gebruik van een responsive slider.

Responsive

Om de interactie te verduidelijken leek het mij verstandig een swipe animatie te maken zodat het duidelijk werd dat je behalve tikken, ook via een swipe beweging de verschillende bestemmingen kon zien. Dit gaf als resultaat dat de uiting significant beter presteerde dan een regulier 'billboard' of 'leaderboard' formaat.

KLM Birthday mobile overview

We ontvingen de 'Campaign of the Month' award van weborama voor deze uiting wat bevestigde dat de uitvoering van deze uiting meer dan geslaagd was.

Agency: Storm Digital

Klant: KLM

Platform: Weborama

Opdracht: Birthday campagne (2017)

Concept, Design, HTML5, JavaScript, GSAP, CSS

Telecombinatie

lees verder

Opdracht

Gedurende een 'pressure cooker' (binnen drie dagen) zouden we een opzet maken voor de nieuwe website van Telecombinatie. Daarbij werden campagnes opgezet voor verschillende marketing kanalen.

Mijn focus lag op de structuur in kaart brengen voor de drie belangrijkste pagina's en de visuele uitwerking daarvan.

Telecombinatie case overview

Strategie

De drie belangrijke pagina's: Home pagina, winkel locatie pagina en categorie pagina heb ik opgedeeld in verschillende secties Op basis van Google Analytics data en interviews met verschillende mensen van de organisatie heb ik de top taken onderverdeeld in de secties.

Samen met één van de vaste designers van Telecombinatie heb ik gekeken hoe we de nieuwe huisstijl konden gebruiken voor de website en dit verder uitgewerkt.

Structuur

De menustructuur kwam tot stand op basis van Analytics data. De header bestaat verder uit een sfeerafbeelding en een top taken blok.

Dat blok is dynamisch en wordt gepersonaliseerd op basis van lead scoring. De overige ruimte wordt gebruikt om de propositie uit te dragen, de meest aktuele acties te laten zien en quotes van klanten te tonen.

Telecombinatie Wireframes Homepage

Pagina indeling

Elke winkel heeft een 'persoonlijke' pagina. Eén van de belangrijkste mogelijkheden op de pagina is dat mensen eenvoudig een afspraak moeten kunnen maken om langs te gaan.

Voor de reguliere content pagina's heb ik gekeken naar veel voorkomende componenten op de pagina en deze weergegeven op een logische manier.

Telecombinatie Wireframes Homepage

Telecombinatie vond deze opzet erg geslaagd en heeft dit gebruikt voor de daadwerkelijke implementatie.

Agency: Storm Digital

Klant: Telecombinatie

Opdracht: UX design nieuwe website (2017)

Concept, Wireframes, Design

Heeft mijn werk je enthousiast gemaakt en heb je een mooi project om aan te werken?



Stuur dan een bericht:

Vul a.u.b. alle velden in.

Helaas, er ging iets mis bij het versturen. Stuur je bericht rechtstreeks naar mail@de-boom-yoga.nl

Bedankt voor je bericht!