Webdesign proces BTI Foundation

BTI Foundation is een stichting die zich hard maakt voor educatie in Kenia, specifiek voor en samen met de Maasai. Didy van Brandwijk, één van de oprichters en voorzitter van BTI Foundation, vertelde in een oriënterend gesprek enthousiast over haar passie voor onderwijs, het betoverende Kenia en haar idee om deze passies te combineren. Ze wilde graag haar knowhow gebruiken om zich samen met de Maasai in te zetten voor (beter) onderwijs en de daaraan gelieerde zaken (schoolgebouwen, opvoeding). BTI had onofficieel al bij enkele andere ontwerpers een pitch uitgezet voor webdesign. Wij konden ons niet op alle punten vinden in de ontwerpen van de andere ontwerpers, en stelden een geheel andere aanpak aan wat zou resulteren in een compleet nieuw ontwerp. BTI toonde veel durf, en daarnaast vertrouwen in ons door de eerder gemaakte ontwerpen los te laten en voor Yummygum te kiezen. BTI is een jonge organisatie is, en beschikte nog niet over andere huisstijldragers. Wij hadden het visitekaartje als uitgangspunt voor de huisstijl.

Schetsfase

Wat voor ons vanaf het begin duidelijk als een paal boven water stond, was het bewustzijn van de positie van BTI ten opzichte van de websitebezoeker. BTI Foundation zou betrouwbaarbaar moeten overkomen en de bezoeker betrekken bij BTI projecten, waardoor hij/zij overtuigd zou moeten worden dat zijn/haar (financiële) bijdrage een effect heeft op de BTI initiatieven in Kenia. Deze insteek vertaalden we naar oa. de volgende doelstellingen om rekening mee te houden in visualiseren:

• Het moet de websitebezoeker in één oog moest duidelijk worden wat BTI Foundation is, en wat BTI tastbaar doet
• Het moet de bezoeker duidelijk worden wat van hem/haar verwacht wordt,
• Hij/zij moet helder -en snel duidelijk- worden en hoe hij/zij een bijdrage kan leveren.
• BTI Foundation dient geprofileerd te worden als een transparante organisatie die niet stil zit, maar actie onderneemt

In de eerste schetsen kwamen bovenstaande punten al naar voren. Zo is duidelijk dat de foto-fader en het citaat onder de menubalk prominent in beeld zouden komen.

Na de schetsen pakten we Photoshop erbij om er een statisch ontwerp van te maken, wat we vervolgens via onze klantenlogin aan BTI Foundation presenteerden. Het feit dat ons ontwerp enorm verschilde van het ontwerp dat BTI van de andere ontwerpers, maakte het wachten op de eerste reactie van BTI nog spannender.

Enkele dagen later kregen we via onze klantenlogin een razend enthousiaste opmerking terug over het ontwerp;... dat zijn de momenten waarvoor je het doet.

Indeling van de pagina's

Na een week ontvingen we van BTI Foundation de teksten voor de Nederlandse website. Na een kort overleg over de indeling van de pagina's konden we aan de slag met het ontwerpen van de overige pagina's. Hierbij besloten we pagina's waar veel tekst voor bestond op te delen in meerdere subpagina's. Zo werd de pagina about BTI opgedeeld in BTI & Partners en BTI locations Voor alle pagina's leverde Hendrik Jan van Brandwijk (www.brightview.nl) prachtige foto's, die de perfecte balans vormden met ons ontwerp. Om de consistentie te bewaren en daarmee de usability te vergroten hielden we het volgende in gedachten:

• De verdeling van de algemene tekst per pagina in verhouding tot de foto bevattende fader zou op elke pagina 1:3 zijn
• Het Donate now!-blok zou op iedere pagina (op Contact en Donations na) zichtbaar moeten zijn
• De blokken Sign up for the newsletter en Last blog post zouden wisselend op de pagina's zichtbaar moeten zijn

Fine tuning

Nadat de vlakverdeling van alle pagina's erop zat, BTI tweets lieten ophalen, de Sign up for the newsletter-blokken en het contactformulier functioneel waren, konden we beginnen met fine tuning: het polijsten van de website. We namen hierbij alle elementen waar we nog niet 200% tevreden over waren onder handen. We polijstten onder andere:

• De fader op de homepage waarin de vier initiatieven van BTI Foundation genoemd worden. De nieuwe fader bestaat uit vier losse jpg-bestanden waarin de tabs verwerkt zijn. Hierdoor konden we nog beter het verschil tussen een actieve- en een inactieve tab visualiseren.
• De vaandel, zoals die in het Donate now!-blok, paste we toe op meerdere plaatsen, zoals bij het zoekveld in de menubalk en het inputveld van het Sign up for the newsletter-blok
• We ontwierpen een nieuwe footer
• We ontwierpen een kaart voor op de Where does BTI work-pagina

Didy van Brandwijk zou voor de officiele lancering van de website enkele weken naar Kenia gaan om de ontwikkelingen rondom de website te laten zien aan Maasai die samen met BTI Foundation werken. De website werd erg goed ontvangen door de Maasai. De BTI Foundation website kent een Nederlandstalige en een Engelstalige variant, op respectievelijk www.btifoundation.nl en www.btifoundation.com.