Bekijk JOUW® op

Werk

Well done is better than
well said.

Benjamin Franklin

Terug naar overzicht

USER FRIENDLY ONLINE ZONE

Na het neerzetten van de merkstrategie en nieuwe stijl van Zone.college, mochten we aan de slag met de website! Zone.college heeft 3 merken: Zone.college (overkoepelend), vmbo.zone en mbo.zone. Elk merk heeft zijn eigen doelgroepen: dé reden dat wij kozen voor een 3-in-1 multi domain website: www.zone.college, www.vmbozone.nl en www.mbozone.nl. Hoe we dat aanvlogen? Dat lees je hieronder!

Mobile first
De belangrijkste doelgroepen - leerlingen en studenten - zijn rasechte smartphonegebruikers. Onze werkwijze was daarom mobile first: we hebben het design van de mobiele versie doorvertaald naar een desktopversie.

3 merken, 1 familie
De 3 websites hebben een eigen uitstraling, maar zijn duidelijk herkenbaar als 1 familie. Je kunt ook vanuit elke website navigeren naar een ander merk. Door de Look & Feel weet je meteen in welke online zone je zit: corporate, vmbo óf mbo. Vanuit de logo’s heeft Zone.college de kleur oranje, vmbo.zone rood en mbo.zone geel. We zijn nagegaan of deze kleuren werken voor online. Zo is rood (vmbo.zone) een signaalkleur: stop, paniek! Veelvuldig gebruik van deze kleur geeft geen positieve associatie bij een website. Daarom hebben we ervoor gekozen om voor de online vmbo.zone de kleur groen te gebruiken (één van de huisstijlkleuren). Deze kleur matcht perfect met de Groene uitstraling van het vmbo en mbo.

Slimme elementen
De gekozen kleuren komen terug in de koppen, buttons, hyperlinks en kaders. De buttons maken het mogelijk om snel te navigeren. Zo kun je je rechts bovenin via een opvallende button aanmelden en onder de header kun je je opleidingsrichting of vo-route selecteren. Geen ingewikkelde routes dus, maar met slimme tools gericht naar je doel navigeren.

We hebben op elke website props en helden terug laten komen. De helden zijn de gefotografeerde leerlingen en studenten die hun zone vertegenwoordigen. De props geven een beeld van de zone: in de online mbo.zone worden veel props uit het beroepenveld gebruikt en in de online vmbo.zone komen props terug die je in en rondom de school tegenkomt.

Go with the flow
Met 3 verschillende websites moet je er natuurlijk voor zorgen dat de navigatie optimaal is. Onze uitdaging? Ervoor zorgen dat bezoekers meteen in de juiste flow komen!

Zone.college
Om bezoekers in die juiste flow te krijgen, verwijst de corporate website meteen door: wil je naar de vmbo.zone, naar de mbo.zone of naar Groeipunt (cursussen en opleidingen voor bedrijven en organisaties)? Verder vind je hier informatie over Zone.college en vacatures.

Vmbo.zone
Op deze website hebben we 1 element centraal gezet: locatie. Als vo-scholier wil je natuurlijk naar een middelbare school bij je in de buurt. Daarom hebben we ervoor gezorgd dat de website jouw locatie herkent. Woon je bijvoorbeeld in Zwolle? Dan komt bij je eerste bezoek aan de online vmbo.zone meteen een pop-up in beeld: “We hebben de locatie Zwolle voor jou gekozen. Is dit niet de juiste locatie? Geen probleem. Je kunt makkelijk switchen naar jouw gewenste locatie.” Dat doe je via de locatiekiezer links bovenin. Hiermee kun je elke vo-locatie van Zone.college bekijken. En je kunt ook meteen de sfeer van die locatie proeven, handig!

Mbo.zone
De focus van de online mbo.zone? De opleidingen, natuurlijk! Hét uitgangspunt voor een mbo’er. Wordt de opleiding Paardenhouderij bijvoorbeeld alleen aangeboden in Almelo of Zwolle? Dan reist de mbo’er in veel gevallen naar Almelo of Zwolle, ook als hij/zij ergens anders woont.

Na een onderzoek hebben we voor slimme filteropties gekozen: na één klik krijg je een overzicht van alle opleidingen. Je kunt ze vervolgens ook per opleidingszone bekijken: welke opleidingen kun je bijvoorbeeld volgen in de zone Paardenhouderij en welke in de zone Tuin & landschap? Zoek je een specifieke opleiding? Dan kun je die natuurlijk ook meteen invullen in de ‘zoeker’ bovenin de pagina.

Naast opleidingen wil Zone.college dat toekomstige studenten weten hoe het werkveld eruit ziet. Ze moeten er echt feeling mee krijgen. Bij de opleidingsinformatie wordt daarom ook beschreven welke beroepen aansluiten op de opleidingen die de school biedt.

Efficiency is key
Om het proces zo efficiënt mogelijk in te richten, zijn we begonnen met schetsen en wireframes. De websitestructuur die hierdoor is ontstaan, bakende de opdracht af voor alle betrokken partijen. Vervolgens zijn we gestart met design sprints: we hakten het proces op in delen die we stuk voor stuk doorliepen. Behapbaar én efficiënt!

Onze webpartner Pixelpillow heeft deze website technisch gerealiseerd. Terwijl zij ons design omzette in techniek, stond het CMS-systeem al klaar om gevuld te worden met content. Zo konden op hetzelfde moment meerdere to do’s afgevinkt worden, ideaal!

Klik op de tegeltjes onder de grote afbeelding om verder te bladeren. 

TOP