Boat Bike Tours

Het probleem

Door de jaren heen hadden veel verschillende mensen aan de uitingen van Boat Bike Tours gewerkt. Daardoor was het ontwerp versnipperd geraakt en ontbrak er een herkenbare merkstijl. Zonder het logo waren ze nauwelijks te herkennen, en dat gold zowel voor de website als voor alles op papier.

Ze zochten geen vormgever voor een losse opdracht. Ze zochten iemand die de hele site als één geheel kon laten voelen. Daarnaast kon de gebruiksvriendelijkheid beter.

Ontwerpen: eerst het systeem, dan de pagina's

Na het eerste gesprek stelde ik voor om te beginnen met een design system in plaats van met schermen. Als de versnippering het probleem is, dan is een reeks mooie pagina's een oplossing die na een half jaar weer uit elkaar valt.

In de eerste ronde bekeek ik de bestaande pagina's en ontwierp ik ze opnieuw binnen vaste kaders. Bewust niet te veel anders: er komen bezoekers terug die er vorig jaar ook boekten, en voor hen moest de site herkenbaar blijven. Wat ik vastlegde was typografie, kleur, maten en breedtes. Bij de kleuren woog contrast mee, want een kleurenpalet dat je pas achteraf op toegankelijkheid controleert is een palet dat je twee keer maakt.

Dat deed ik in overleg met de front-end developer die de site op WordPress bouwt. Wat ik vastleg moet immers in zijn code passen en niet alleen in mijn bestand.

Alle belangrijke pagina's, en een eigen plugin om mee te controleren

Na de eerste ronde volgden de andere belangrijke pagina's, met de componenten die daarbij hoorden. Dat deed ik samen met Theo van der Zee voor de conversie en de UX, en met Judith Blanken namens Boat Bike Tours.

Een design system houdt alleen stand als het ook echt wordt gebruikt, en dat gebeurt alleen als het systeem ook echt klopt. Daarom controleer ik met een zelfgeschreven Figma-plugin of elke waarde die in het ontwerp staat ook daadwerkelijk uit het systeem komt voordat het naar de developer gaat. Een kleur die er net naast zit valt in Figma niet op, maar in de gebouwde site ga je dat merken in het aantal regels CSS.

Bouwen: bijspringen toen de deadline in zicht kwam

De laatste anderhalve maand bleek er meer werk te liggen dan er tijd beschikbaar was, en ben ik als front-ender bijgesprongen. Ik pakte vooral de dynamische onderdelen op: het uitbouwen van de navigatie, en de sticky header op het touroverzicht. Verder alles waar de developer niet meer aan toekwam.

Dat ik kon bijspringen is geen toeval. Ik had het ontwerp zelf gemaakt, dus er was geen overdracht nodig en geen week om erin te komen. Dat is het voordeel van ontwerp en bouw bij één persoon, en je merkt het pas op het moment dat je het nodig hebt.

Verbeteren: ruim veertig procent van de CSS kon weg

Kort na de livegang heb ik de CSS verder opgeschoond. Die werd ruim veertig procent kleiner en bovendien beter doorzoekbaar. Dat is geen opruimactie voor de sier: minder CSS die hetzelfde doet is minder dat stuk kan gaan, en het is de reden dat er nu iemand met vertrouwen een nieuwe pagina bij kan bouwen.

Daarnaast heb ik de usability en de toegankelijkheid opgepakt op de plekken waar dat tijdens het bouwen was blijven liggen.

En je kunt er weer in zoeken

Een deel van het werk zit in iets dat je niet aan een cijfer ziet. In de oude Sass werden klassenamen met & in elkaar gezet, dus als naam bestonden ze nergens. Wie een knop wilde aanpassen kon niet zoeken op wat er in de HTML stond.

.button {
  &\:secondary { … }
}

.button\:secondary { … }

Zoeken op button\:secondary leverde eerst niets op, want die tekst stond nergens in het project. Nu staat hij er gewoon. Over de hele stylesheet ging het om 123 klassenamen die zo waren opgebouwd, waarvan er nu nog 77 over zijn, klaar voor een volgende refactor-ronde.

Wat het opleverde

Van mijn kant is dit hard te maken: ruim veertig procent minder gecompileerde CSS, en een design system dat er eerst niet was. Wat het Boat Bike Tours aan boekingen of bespaarde tijd heeft opgeleverd weet ik nog niet, en dat zet ik hier pas neer als ik het weet. Wat er nu wel al is, is één grafische stijl waarmee ze met vertrouwen de volgende stap kunnen zetten.

Het blijft bijzonder hoeveel hij met zo weinig woorden weet te realiseren.

Door de jaren heen hadden veel verschillende mensen aan onze uitingen gewerkt. Ons ontwerp was versnipperd geraakt en zonder ons logo waren we nauwelijks herkenbaar als Boat Bike Tours, op de website én offline. Naast de merkidentiteit kon ook de gebruiksvriendelijkheid beter.

Met Robin haalden we een echte specialist in huis. Hij heeft weinig uitleg nodig om tot een sterk resultaat te komen en begrijpt snel wat we doen en willen bereiken. Niet alleen het eindresultaat is prachtig, maar ook hoe hij meedenkt, structuur aanbrengt en zijn voorstellen presenteert.

Nu hebben we een specialist naast ons die ons helpt de volgende fase in te gaan. Onze uitstraling wordt professioneler, consistenter en herkenbaarder, en groeit mee met onze organisatie.

Na de lancering van de nieuwe website vroegen ze of ik ook de rebranding verder wilde oppakken, en niet alleen online. De offline uitingen verkeren in dezelfde staat als de website: veel opgebouwd door de jaren heen, zonder rode draad. Die draad breng ik er nu weer in. Zodra ik daar meer van kan laten zien kan je dat ook hier vinden.