AFSTUDEERRAPPORT
Afstudeeronderzoek naar de online brand identity van 100%FAT
Ilse van der Linde (432875)
Academiejaar 2019/2020
Creative Media and Game Technologies
Saxion University of Applied Sciences
2
ALGEMENE INFORMATIE
Afstudeerrapport
Online Brand Identity 100%FAT
Student
Naam: Ilse van der Linde
Studentnummer: 432875
Email: 432875@student.saxion.nl
Opleiding: Creative Media and Game Technologies
Onderwijsinstelling: Saxion University of Applied Sciences
Academiejaar: 2019/2020
Bedrijfsbegeleider
Naam: Floris Schreuder
Email: floris@100fat.nl
Bedrijf: 100%FAT B.V.
Afstudeerbegeleider
Naam: Mark Boerrigter
Email: m.j.boerrigter@saxion.nl
Onderwijsinstelling: Saxion University of Applied Sciences
Tweede lezer
Naam: Lukas Malec
Email: l.m.malec@saxion.nl
Onderwijsinstelling: Saxion University of Applied Sciences
Colofon
© 2020 Ilse van der Linde - Alle rechten voorbehouden. Niets uit deze uitgave mag worden
ver-veelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand en/of openbaar gemaakt in
enige vorm of op enige wijze zonder voorafgaande schriftelijke toestemming van de uitgever.
3
VOORWOORD
Voor u heeft u mijn afstudeerrapport ter afronding van mijn bachelor Creative Media and Game Technologies (Kunst en Techniek) aan Saxion University of Applied Sciences te Enschede. Mijn afstudeeronderzoek heb ik uitgevoerd voor 100%FAT, een zeer creatief en innovatief bedrijf gevestigd in Enschede. Het doel van dit onderzoek is om onderzoek te doen naar de (online) brand identity van 100%FAT en dit te vertalen naar een vernieuwde huisstijl en een nieuw ontwerp voor de website.
Graag wil ik 100%FAT bedanken voor de gezellige en leerzame periode, ondanks dat ik, in verband met het COVID-19 virus, het grootste gedeelte van deze periode thuis heb gewerkt aan mijn onderzoek. Daarnaast wil ik graag Floris Schreuder bedanken voor de begeleiding bij 100%FAT
gedurende mijn afstudeerperiode.
Mijn dank gaat ook uit naar mijn afstudeerdocent Mark Boerrigter, voor de fijne begeleiding
gedurende de afgelopen 20 weken.
Ten slotte wil ik ook de klanten van 100%FAT bedanken die mij geholpen hebben met mijn onderzoek door het invullen van de enquêtes. Ilse van der Linde
4
SAMENVATTING
100%FAT is een creatief bureau en producent van maatwerk interactieve installaties waarmee zij hardware, software en content combineren tot een interactieve installatie of complete experience. 100%FAT wil graag duidelijk maken aan klanten wat ze doen en waarvoor ze te benaderen zijn, dit is (vooral op de huidige website) nog niet duidelijk genoeg.
Om dit doel te kunnen bereiken is er gebruik gemaakt van de Design Thinking methode. Om de identiteit van 100%FAT te kunnen bepalen is er gebruik gemaakt van een canvas, waarin de organisatie, de doelgroep, trends en de concurrentie onderzocht wordt.
Het onderzoek is gestart in de empathize fase met een interview met de directieleden (de organisatie), om de missie en visie van het bedrijf helder te krijgen. Om inzicht te krijgen in de ervaringen van klanten (de doelgroep) met 100%FAT is er een enquête opgesteld en verstuurd. De ervaringen van klanten benadrukken de identiteit van 100%FAT en geven aan waar nog kansen liggen voor 100%FAT om te verbeteren. Naast deze enquête is er ook een enquête online verspreid, waarbij de duidelijkheid wordt vastgesteld van de huidige website van 100%FAT. Er is in deze fase ook onderzoek gedaan naar de concurrentie, door middel van een concurrentieanalyse is onderzocht op welke wijze de concurrentie communiceert op de website en op welke wijze de concurrentie haar werk presenteert. Ten slotte is er in deze fase een trendanalyse uitgevoerd op het gebied van webdesign en online communicatie. Al deze informatie is overhandigd aan digitaal strateeg Joost Vervoorn, die met behulp van deze informatie de propositie heeft geschreven voor 100%FAT.
In de define fase is alle informatie gefilterd en ingevuld in het canvas. Op basis van dit canvas en alle verzamelde informatie is in de ideate fase de huisstijl van 100%FAT vormgegeven en is de basis gelegd voor het prototype van de website. De huisstijl is voorzien van een moderne en frisse uitstraling, passend bij de innovativiteit van 100%FAT. Na een brainstormsessie over de website is er een sitemap gemaakt en is er een wireframe voor de website gemaakt.
In de volgende fase, de prototype fase, is het prototype ontworpen en vormgegeven. Het prototype is vervolgens voorzien van feedback en de propositie van Joost Vervoorn is verwerkt in de teksten van de website. Ten slotte is in de laatste fase, de test fase, het prototype getest onder de doelgroep in de vorm van een doelgroep test en online in de vorm van een user test. Uit de doelgroep test kwam naar voren dat klanten de informatie die zij zoeken gemakkelijk kunnen vinden in het prototype en dat zij vinden dat het nieuwe ontwerp van de website goed past bij de identiteit van 100%FAT. Uit de user test kwam naar voren dat het voor respondenten duidelijk was wat de werkzaamheden zijn van 100%FAT en dat de werkzaamheden en diensten ook veel duidelijker naar voren komen in het nieuwe ontwerp dan op de huidige website.
Aanbevelingen voor de nieuwe versie van de website zijn onder andere het verbeteren van de kwaliteit van de fotografie en het verbeteren van de projectbeschrijvingen op de website, zodat de werking en het nut van de installaties nog duidelijker worden. Verder zal er nog vervolgonderzoek gedaan kunnen worden naar de strategische funnel van de website, om van de bezoeker van de website ook daadwerkelijk een klant te kunnen maken.
5
INHOUDSOPGAVE
01 Inleiding
01.1 Bedrijfsomschrijving 01.2 Aanleiding 01.3 Probleemstelling 01.4 Hoofd- en deelvragen 01.5 Doelstelling 01.6 Randvoorwaarden02 Theoretisch kader
02.1 Brand identity 02.2 Rebranding 02.2.1 Rebranding 02.2.2 Brand-refreshen 02.3 Huisstijl 02.4 Webdesign 02.4.1 Inhoud 02.4.2 Sitemap 02.4.3 Wireframes 02.4.4 Ontwerpen03 Methodology
03.1 Algemene aanpak 03.2 Aanpak per deelvraag04 Resultaten
04.1 Empathize
04.1.1 Interviews Floris en Lieven 04.1.2 Huidige huisstijl
04.1.3 Klantervaringen
04.1.4 Enquête huidige website 04.1.5 Concurrentieanalyse
04.1.6 Webdesign trends 2020 04.1.7 Online communicatie 04.1.8 Propositie Joost Vervoorn
04.2 Define 04.3 Ideate 04.3.1 Logo update 04.3.2 Huisstijl 04.3.3 Brainstorm website 04.3.4 Sitemap 04.3.5 Wireframe 04.4 Prototype 04.4.1 Ontwerp 04.4.2 Feedback 04.4.3 Propositite webteksten 04.4.4 Animaties 04.5 Testing 04.5.1 User test 04.5.2 Doelgroep test 04.5.3 Vergelijking enquêtes 04.6 Eindproduct 04.6.1 Aanpassingen prototype
04.6.2 Onderzoek website bouwen
8
9 9 9 9 10 1011
12 12 12 13 13 14 14 14 14 1517
18 1823
24 24 24 25 26 26 27 29 29 29 31 31 33 34 34 34 35 35 36 37 37 37 37 38 39 39 39 406
04.6.3 Eindproducten05 Conclusie
06 Discussie
07 Aanbevelingen
00 Bronnenlijst
00 Bijlagen
Bijlage 1 | MoSCoW visuele uitingen Bijlage 2a | Interview Floris Schreuder Bijlage 2b | Interview Lieven Maes
Bijlage 2c | Samenvatting interviews Floris en Lieven
Bijlage 3a | Enquête klantervaringen Bijlage 3b | Resultaten enquête klantervaringen
Bijlage 4a | Enquête huidige website Bijlage 4b | Resultaten enquête huidige website
Bijlage 5 | Bevindingen concurrentieanalyse Bijlage 6 | Propositie Joost Vervoorn
Bijlage 7 | Canvas 100%FAT Bijlage 8 | Logo typografie Bijlage 9 | Nieuwe versie logo Bijlage 10 | Stylesheet
Bijlage 11 | Brainstorm website Bijlage 12 | Sitemap
Bijlage 13 | Wireframe Bijlage 14 | Prototype
Bijlage 15a | Enquête doelgroep test
Bijlage 15b | Resultaten enquête doelgroep test
Bijlage 16a | Enquête user test
Bijlage 16b | Resultaten enquête user test Bijlage 17 | Prototype aanpassingen
Bijlage 18a | HTML/CSS code Adobe XD export
Bijlage 18b | Screenshots Adobe XD Web Export
Bijlage 19 | Adobe XD ontwerp versus Duda ontwerp 40
42
43
45
47
50
51 52 56 60 63 67 75 77 83 89 90 91 92 93 94 99 100 103 117 119 124 126 132 134 136 1407
BEGRIPPENLIJST
B2B
B2B of BtB staat voor business to business, het leveren van diensten en goederen tussen bedrijven. B2C
B2C of BtC staat voor business to customer, het door een bedrijf verkopen van producten of dienten aan consumenten.
Footer
De onderste balk op een webpagina, waarin vaak de copyright, algemene voorwaarden, eventuele adresgegevens en social media links staan. Header
De bovenste balk op een webpagina, hierin staat het logo van het bedrijf en het navigatiemenu. Hover
Het “zweven” van de muis boven een knop of element op een webpagina. Vaak triggert dit een animatie.
Lead
Een lead is een bedrijf of persoon die interesse heeft in de aankoop van een product of dienst. Pay-off
De pay-off vertelt wat een bedrijf doet, maar vaak ook wat een bedrijf belooft en waar het bedrijf beter in is dan de concurrent
Propositie
Een propositie is hoe je een dienst, product of bedrijf in de markt zet.
SEO
SEO staat voor Search Engine Optimization en is een verzamelnaam voor alle stappen die nodig zijn om hoog te scoren in Google.
Sitemap
Een sitemap is een document waarin een
schematische weergave staat van alle pagina’s die op een website te vinden zijn.
Tone-of-voice
De tone-of-voice is de stijl waarin een bedrijf of merk communiceert met de doelgroep.
UI
UI staat voor User Interface. Het doel van de user interface is het zorgen voor een betere en
vriendelijkere gebruikerservaring. UX
UX staat voor User Experience, waarbij vooral op de totale gebruikerservaring wordt gericht. Website builder
Een online tool die je helpt om zonder gebruik van programmeertalen een website te bouwen.
Wireframe
Een wireframe is de bouwtekening van een website, waarin een overzicht wordt gegeven van de verschillende onderdelen die op een website aanwezig zullen zijn.
8
01
Inleiding
01.1 Bedrijfsomschrijving
01.2 Aanleiding
01.3 Probleemsteling
01.4 Hoofd- en deelvragen
01.5 Doelstelling
01.6 Randvoorwaarden
9
01.1 Bedrijfsomschrijving
100%FAT is op 10 juni 2009 opgericht door Lieven Meas en Floris Schreuder. Beiden afgestudeerd aan Hogeschool Saxion in de opleiding Kunst en Techniek. 100%FAT is gevestigd aan de Borstelweg 29 te Enschede.
De innovatie van techniek gaat tegenwoordig razendsnel en daar moeten bedrijven in mee gaan. 100%FAT doet dit, zij spelen hierop in. Als creatief ontwerpbureau zetten zij zich in voor onder andere musea, bedrijven, (onderwijs)instellingen uit alle sectoren van de samenleving. Zij hebben experts op het gebied van conceptontwikkeling, software (augmented reality, virtual reality, Unity 3D),
hardware (LEDs, electronica, Arduino) en industrieel ontwerp. Zij zijn gespecialiseerd in maatwerk oplossingen voor interactieve projecten.
100%FAT heeft 13 werknemers in dienst, zowel fulltimers als parttimers. Het team bestaat uit projectmanagers, concept developers, electrical engineers, hardware engineers, software
developers, industrial designers/engineers, een officemanager en een medewerker voor de administratie. Naast alle medewerkers zijn er per halfjaar ongeveer 4 tot 6 studenten aan het werk voor stage of afstuderen. Het is een prettige werkomgeving waar je als student veel vrijheid krijgt en meewerkt aan lopende projecten.
01.2 Aanleiding
100%FAT zit in hoe zij het noemen een
“identiteitscrisis”. Enerzijds bedenken en maken zij erg professionele installaties en anderzijds maken zij meer experimentele installaties. Hierdoor weten zij niet goed hoe zij zich moeten/willen presenteren tegenover (nieuwe) klanten. Ze willen graag duidelijk maken aan de klant wat ze doen en waarvoor ze te benaderen zijn, dit is nog niet duidelijk genoeg.
Het huidige portfolio op de website bestaat uit een verzameling van veel verschillende soorten projecten, er is geen overzicht dus zal er een nieuwe verdeling (en opschoning) moeten komen in de projecten.
De vraag van 100%FAT is om te helpen met het bepalen van haar identiteit om deze vervolgens te vertalen naar een nieuw ontwerp voor de website.
01.3 Probleemstelling
100%FAT wil graag een manier zien hoe zij zich met de huidige werkwijze en werkzaamheden kunnen profileren ten opzichte van (nieuwe) klanten. Dit zal zich uiten in een brand identity, welke zich zal vertalen naar de huisstijl, een vernieuwde website en in de social mediakanalen van 100%FAT.
Het probleem zit in de kern van het bedrijf. Wat is de missie en visie van 100%FAT? En hoe erg verschilt deze mening in de directie van 100%FAT? Wat zijn de kernwaarden en krachten van 100%FAT? Wat belooft 100%FAT klanten en hoe communiceren ze dit naar klanten? Wat is de tone-of-voice van het bedrijf en wat zeggen ze wel of niet tegen klanten?
De vraag voor dit onderzoek is hoe bovenstaande probleemstelling vertaald kan worden naar een vernieuwde brand identity welke tot uiting komt in de huisstijl, website en eventueel bijpassende social media vormgeving.
100%FAT heeft het meeste baat bij het creëren en formuleren van hun brand identity. Zij willen graag inzichtelijk hebben waar zij voor staan en wat de kernwaarden zijn van het bedrijf. Daarbij is het opnieuw ontwerpen en vormgeven van de website een verlengstuk van bovenstaande doel, dus ook bij een nieuwe website heeft 100%FAT veel baat bij.
01.4 Hoofd- en deelvragen
Om de probleemstelling op te kunnen lossen staat er één hoofdvraag centraal tijdens dit onderzoek:
“Hoe kan er een brand identity gecreëerd worden die tot uiting komt in een website zodat (potentiële) klanten meer duidelijkheid krijgen over de diensten van 100%FAT?”
Om antwoord te kunnen geven op de hoofdvraag, zijn de volgende deelvragen geformuleerd:
• Wat zijn de missies en visies van de twee directieleden van 100%FAT en hoe erg verschillen deze van elkaar?
• Wat zijn de kernwaarden en werkwijzen van 100%FAT?
10
en hoe ervaren zij de samenwerking met 100%FAT?
• Welke bedrijven zijn concurrenten van
100%FAT en op welke wijze communiceren zij? • Wat zijn de huidige trends op het gebied van
online communicatie en webdesign?
• Hoe kan de gecreëerde brand identity vertaald worden naar een vernieuwde huisstijl met bijbehorende nieuwe website?
• Op welke manier kan de huidige website verbeterd worden zodat dat de bezoekers van de website beter begrijpen wat de diensten van 100%FAT zijn?
01.5 Doelstelling
Het doel van deze afstudeeropdracht is om aan het einde van deze afstudeerperiode een product op te leveren aan 100%FAT en Hogeschool Saxion. Dit product zal een prototype zijn van de website van 100%FAT, gemaakt in Adobe XD. Daarnaast zal er een stylesheet aangeleverd worden met de opgefriste huisstijl van 100%FAT. Deze producten worden uiterlijk 16 juni 2020 om 12:00 aangeleverd.
01.6 Randvoorwaarden
Deze opdracht bevat een aantal randvoorwaarden. Randvoorwaarden Hogeschool Saxion:
• Afstudeeronderzoek moet een complexe opdracht zijn waarin kennis, vaardigheden en houding met betrekking tot de
studiecompetenties worden geïntegreerd. Competenties:
Technisch: technisch onderzoek, analyse, ontwerpen, prototyping, testen, implementeren
Ontwerp: onderzoek, analyse, conceptualiseren, ontwerpen Organisatorisch: ondernemende houding, vaardigheden, communicatie Professioneel: leervermogen, reflexiviteit, verantwoordelijkheid • In de eindopdracht zijn theorie en praktijk
verbonden met praktisch onderzoek en (product) ontwerp.
Randvoorwaarden 100%FAT:
• Branding (bedrijfsprofiel, opfrissen huisstijl).
• Nieuw websiteontwerp (sluit aan bij branding). • Social media plan (content kalender, welke
platforms, capaciteit) is optioneel. Eigen randvoorwaarden:
• Eindverslag afstudeeronderzoek op tijd inleveren (16 juni 2020 voor 12:00).
• Alle 12 competenties toepassen en minimaal “goed” uitvoeren.
• Eindproduct moet er “gelikt“ uitzien en goed onderbouwd zijn.
11
02
Theoretisch kader
02.1 Brand identity
02.2 Rebranding
02.3 Huisstijl
02.4 Webdesign
12
02.1 Brand identity
Een brand identity, oftewel, merkidentiteit is wat een merk of bedrijf uniek maakt en wat ervoor zorgt dat een merk of bedrijf zich onderscheidt van concurrenten. De merkidentititeit geeft weer wie je bent als organisatie. Merkidentiteit wordt wel eens verward met imago. Imago is het beeld dat buitenstaanders hebben bij een merk, in de identiteit van een merk of bedrijf komen de eigen overtuigingen en waarden terug (Comaxx, 2019). Om de merkidentiteit van een bedrijf onder woorden te brengen, kan een bedrijf de volgende onderdelen benoemen:
• De visie van het bedrijf • De missie van het bedrijf
• De kernwaarden waaruit het bedrijf opereert • De krachten die bepalen wat het bedrijf zo sterk
maakt
• De beloften die het bedrijf maakt • De communicatie van het bedrijf • De visuele identiteit
Voordat een bedrijf start met het bepalen van de visie en de missie, moet het bedrijf eerst zoeken naar de diepere betekenis van de organisatie. De betekenis van een bedrijf is de innerlijke drijfveer waar de organisatie naar streeft. Wat is de echte bijdrage die het bedrijf wil leveren? Waarin gelooft het bedrijf? Wat zou een bedrijf doen als het bedrijf niet druk hoeft te maken om geld?
De visie is het toekomstbeeld van een organisatie. Het geeft een helder beeld weer van de ideale situatie als de missie wordt behaald. In het geval van de visie gaat het dus om een droomscenario. De missie is de grote opdracht van de organisatie. Het is de essentie waar een bedrijf voor staat en vormt de leidraad voor een bedrijf. Het is datgene wat een bedrijf echt wil bereiken en is daarom verweven met de betekenis van een bedrijf. Op de website van CreatingHeroes stellen ze de volgende vragen voor het bepalen van de missie van een bedrijf:
1. Wat wil het bedrijf veranderen? Wat moet er anders?
2. Waar staat het bedrijf voor?
3. Wat is het bestaansrecht van het bedrijf? 4. Welke betekenis heeft het bedrijf voor haar
klanten en directe stakeholders?
5. Wat is de grote opdracht die het bedrijf heeft? Wat wil het bedrijf bereikt hebben over 20/30 jaar?
Kernwaarden zijn richtlijnen en regels waar een bedrijf mee werkt. De kernvraag is: waarvoor staat een bedrijf? Het zijn eigenschappen of drijfveren die laten zien waar een bedrijf voor staat. Met kernwaarden geeft en bedrijf aan waarom en hoe een bedrijf dingen doet. Vanuit de kernwaarden kan een bedrijf ook een eigen slogan bedenken.
Om zaken of opdrachten op te lossen heeft een bedrijf krachten nodig. Om te bepalen wat de krachten zijn van een bedrijf, moet een bedrijf op zoek naar de sterkten in de organisatie. Waar is het bedrijf écht goed in? Het bedrijf moet daarnaast bedenken welke krachten zij graag wilt ontwikkelen in de komende jaren om de missie te kunnen vergroten. Het bedrijf moet ook bedenken welke krachten noodzakelijk zijn om de missie te kunnen bereiken.
Voor een bedrijf is het belangrijk om na te denken wat er wel en niet naar buiten gecommuniceerd wordt. Een bedrijf moet ervoor zorgen dat ze een helder plan hebben. Op de website van CreatingHeroes worden vragen gesteld die helpen om keuzes te maken op het gebied van communicatie:
• Wat moet het bedrijf wel zeggen en wat moet het bedrijf bewust niet zeggen?
• Wat is de hoofdboodschap die het bedrijf wil vertellen? Wat is de pay-off (een kort en bondige zin die communiceert waar het bedrijf voor staat)?
• Wat is de tone-of-voice van het bedrijf? • Welke woorden en termen gebruikt het bedrijf
wel en wat zijn verboden woorden?
• Wat zijn de valkuilen van het verhaal van het bedrijf? Welk verhaal vertellen tegenstanders en wat zet het bedrijf daar tegenover?
Met al deze stappen heeft een bedrijf haar merkidentiteit ontwikkeld. Het laatste belangrijke deel is om deze merkidentiteit te vertalen in een visuele identiteit.
(Creating Heroes, 2019a) (Alsem & Kostelijk, 2016, pp. 116–139) (Lapperre, 2019) (ManagementSite, 2020)
02.2 Rebranding
02.2.1 Rebranding
Met rebranding wordt bedoeld het radicaal veranderen van de identiteit, de essentie van een merk of bedrijf bedoeld. Het vervangen van de huidige positionering door een nieuwe.
13
Rebranding is nooit een doel op zich. Het zou een weerspiegeling moeten zijn van de visie en strategie van de organisatie. Rebranding moet concreet bijdragen aan het behalen van strategische organisatiedoelen.
Belangrijk onderscheid maken tussen productmerk of organisatiemerk. Het rebrandingsproces ziet er anders uit. Bij productmerk ligt de focus vooral op het aanpassen van een tastbaar product of dienst op basis van marktgegevens van buitenaf. Bij organisatiemerk gaat het over cultuur, identiteit, organisatie en business- en verdienmodellen, vooral van binnenuit.
Er zijn verschillende aanleidingen voor het doen van een rebranding:
• Fusies, overnames en strategische samenwerkingen
• Reputatieschade • Internationalisering • Cultuurverandering
Deze laatste het geval bij 100%FAT. De kern van de dienstverlening veranderd niet, maar wel de manier waarop deze wordt aangeboden. De identiteit op de website klopt niet meer met de beleving (Schils, 2017).
02.2.2 Brand-refreshen
Rebranding wordt vaak verward met brand-refreshing. Waar rebranding gaat om het totaal transformeren van een bedrijf, het opnieuw vinden van haar merkidentiteit en het aanpassen van visuele elementen, gaat het bij brand-refreshen voornamelijk alleen om het vernieuwen van het uiterlijk van het merk. Het uiterlijk van het merk krijgt vaak alleen een actueler, moderner en frisser gevoel (Verwoerd, 2018).
Een bedrijf kan rebranding toepassen op drie niveaus:
1. Beeldmateriaal. Dit zijn alle visuele elementen waar een merk of bedrijf door herkend wordt. Deze elementen zijn onder andere lettertype, kleurenpallet, webdesign, e-mailtemplate, fotografische stijl of verpakking.
2. Boodschappen. Hieronder valt alles wat je kan lezen, horen en uitspreken over je bedrijf of merk. Een bedrijf communiceert onder andere via je slogan, tone-of-voice, bloginhoud, webteksten en hashtags.
3. Acties. De acties van een bedrijf of merk moeten overeenkomen met wat het bedrijf of merk beloofd. (Ramos, 2018)
02.3 Huisstijl
Deze visuele identiteit wordt vertaald in een huisstijl. De volgende onderdelen zijn onderdeel van een huisstijl:
• De naam van het bedrijf • Het logo van het bedrijf
• De gebruikte lettertypes van het bedrijf, zowel online als offline
• De gebruikte iconen van het bedrijf • De stijl van vormen die het bedrijf inzet • De stijl van foto’s die het bedrijf inzet De huisstijl zorgt voor herkenbaarheid van het bedrijf en geeft het bedrijf een gevoel. Men zou het bedrijf moeten herkennen, zonder de naam erbij te noemen. De huisstijl roept associaties op bij mensen en het bedrijf moet ervoor zorgen dat deze positief zijn. Kleuren spelen een belangrijke rol als het om een huisstijl gaat, kleuren bepalen vaak in combinatie met vorm het imago van het bedrijf. Zo straalt blauw betrouwbaarheid en eerlijkheid uit en straalt geel optimisme en levendigheid uit. Samen met vorm en kleur zijn lettertypes een belangrijk element in de uitstraling van een logo. Wanneer deze drie elementen goed in balans zijn, ontstaat er een krachtig logo. Het lettertype uit het logo mag niet gebruikt worden in andere vormen van communicatie, dit neemt anders de kracht van het logo weg.
Om als bedrijf herkenbaar te blijven is het belangrijk om consistent te blijven. Alle uitingen (website, sociale kanalen en andere uitingen) moeten dezelfde kleur, vorm en taal bevatten om overal herkenbaar te blijven. Op deze manier is het voor (potentiële) klanten gemakkelijker om het bedrijf te herinneren.
Een huisstijl handboek is onmisbaar voor ieder bedrijf. Dit is een document waarin alle richtlijnen van de huisstijl staan vastgelegd. Zo wordt er genoemd hoe het logo gebruikt moet worden en de specificatie van de kleuren en typografie. Met het behulp van dit handboek wordt ervoor gezorgd dat elke medewerker weet hoe er met de huisstijl omgegaan moet worden en dat de huisstijl consistent blijft.
De volgende onderdelen staan er doorgaans in een huisstijl handboek:
• De merkidentititeit van het bedrijf kort beschreven, dit zorgt voor een compleet verhaal van het bedrijf en de huisstijl. • Hoe het logo gebruikt moet worden, zoals
14
gekleurde achtergrond gebruikt moet worden. • Hoe de pay-off gebruikt moet worden. Wanneer
wordt het logo met de pay-off gebruikt en wanneer zonder.
• Hoe de lettertypes of typografie gebruikt moet worden. Welke lettertypes worden voor welke koppen of teksten gebruikt.
• Welke kleuren (inclusief kleurcodes) er bij de huisstijl horen en hoe de kleuren het beste gebruikt kunnen worden.
• Welke iconen en vormen wanneer gebruikt dienen te worden.
• Hoe er omgegaan moet worden met fotografie. Op welke wijze moeten beelden worden
bewerkt en hoe mogen de foto’s worden gebruikt.
• Hoe huisstijldragers worden ingezet. De meest voorkomende huisstijldragers zijn:
visitekaartjes, presentaties, offertes en facturen, enveloppen, website, E-mail(handtekening), bedrijfskleding, bedrijfsauto, word-documenten, formulieren en bonnen, video’s (en thumbnails) en social media banners etc.
(Creating Heroes, 2019b) (The DISTRIKT, 2019)
02.4 Webdesign
02.4.1 Inhoud
De eerste stap voor het ontwerpen van een website is om te bepalen voor welke doelgroep de website gemaakt moet worden, hierdoor kan de inhoud van de website aangepast worden op de doelgroep. Daarnaast is het belangrijk om te bedenken waarom men de website bezoekt. Is de bezoeker op zoek naar algemeen vermaak of heeft de bezoeker een bepaald doel? Is er een persoonlijk doel of een professioneel doel? Zien ze tijd aan deze activiteit besteden als iets essentieels of als een luxe? Willen ze algemene informatie of zijn zij opzoek naar iets specifieks? Zijn ze al bekend met de dienst of het product of moeten ze aan de hand meegenomen worden en hebben ze achtergrondinformatie nodig? Willen ze informatie over een bepaalde dienst of product om te beslissen of ze deze willen afnemen? Willen ze contact opnemen? En zo ja, kunnen ze het bedrijf persoonlijk benaderen door langs te komen of moeten ze bellen of mailen? Deze vragen zijn belangrijk om te stellen om te bepalen wat belangrijk is in het ontwerp van de website. Daarnaast is het de vraag hoe vaak bezoekers terugkeren op de website, dit bepaalt ook hoe vaak de website geüpdatet zou moeten worden. (Duckett, 2015, pp. 454–459)
02.4.2 Sitemap
De volgende stap is het structureren van de website. Door een sitemap te maken kan en duidelijk overzicht gecreëerd worden van de indeling van de website. Het maken van een sitemap begint vaak met het opschrijven van alle inhoud op aparte briefjes en deze briefjes te sorteren in groepen. Deze groepen zijn vaak de koppen die op de homepage komen te staan. Hieronder staat een voorbeeld van een sitemap weergegeven. (Duckett, 2015, pp. 460-461)
Bron: freelancer.com
02.4.3 Wireframes
Een wireframe is een schets van een website. Hierbij blijven kleuren, typografie, achtergronden en afbeeldingen nog achterwege. Door een wireframe te maken wordt ervoor gezorgd dat alle informatie die op de website moet komen te staan, op de juiste plek komt te staan. In een wireframe is de hiërarchie van de informatie te zien en is te zien hoeveel ruimte deze informatie inneemt. Door dit in een vroeg stadium van het ontwerpproces te gebruiken, kan voorkomen worden dat in een later stadium van het ontwerpproces de website voorkomen worden dat de gehele website weer aangepast moet worden. Een voorbeeld van een wireframe is op de volgende pagina te zien. (Duckett, 2015, pp. 462–463)
15
Bron: lucidchart.com02.4.4 Ontwerpen
Vooraf aan het ontwerpen is het aan te raden om de persoonlijkheid te bepalen van de website. Moet de website neutraal worden, juist formeel of mag de website een persoonlijke en informele persoonlijkheid krijgen? Aan de hand van deze persoonlijkheid wordt de website ontworpen. Wanneer gekeken wordt naar font keuze, zorgt een font met schreef vaak voor een elegante en klassieke uitstraling, een font zonder schreef voor een neutrale, strakke uitstraling en een font zonder schreef met afgeronde hoeken voor een speelse uitstraling. Kleurkeuze speelt hierbij ook een rol. De kleur blauw staat voor veilig en herkenbaarheid, goud staat vaak voor duur en geraffineerd en is roze vaak speelser en niet zo serieus. Ook in de afronding van hoeken zit hier verschil in. Hoeken die heel licht zijn afgerond hebben een neutrale uitstraling, hoeken die extreem zijn afgerond hebben een speelse uitstraling en hoeken die niet zijn afgerond geven veelal een serieuze en formele uitstraling. Ook de spreektaal bepaald veel op een website, een minder persoonlijke toon voelt meer officieel en professioneel, terwijl een vriendelijke, informele toon een website een stuk vriendelijker maakt. De manier van aanspreken is vaak nog belangrijker dan de kleuren of het lettertype dat gebruikt wordt. (Wathan & Schoger, 2018, pp. 20–26)
Om ervoor te zorgen dat er geen willekeurige keuzes gemaakt worden is het heel handig om voor het ontwerpen systemen te maken voor verschillende elementen van de website, denk aan: letter grootte, letter dikte, lijn hoogte, kleur, marges,
padding, breedte, hoogte, schaduwen, afgeronde hoeken, rand dikte en doorzichtigheid. Bepaal van tevoren bijvoorbeeld welke kleuren gebruikt gaan worden en kies voor elke kleur een set van 8-10 tinten, waar uiteindelijk uit gekozen gaat worden. Kies een “hoofdkleur” en maak deze een x aantal tinten donkerder en lichter. Selecteer vervolgens de tint die hier precies tussenin zit en herhaal dit totdat er een rij van 9 kleuren ontstaat, zoals hieronder is afgebeeld.
Bron: Refactoring UI.
Ditzelfde kan ook gedaan worden met de lettergrootte, door van te voren een aantal letter groottes te kiezen. Door bijvoorbeeld een reeks te kiezen van 12px, 14px, 16px, 18px, 20px, 24px, 32px, 48px, 60px en 72px hoeft er niet geëxperimenteerd te worden door een letter met 1 pixel te vergroten of te verkleinen, maar kan vastgehouden worden aan dit vaste schema. Zie de afbeelding hieronder.
Bron: Refactoring UI.
Drie kleuren zijn voldoende voor de kleur van het lettertype. Een donkere kleur voor primaire content, een grijze kleur voor secundaire content en eventueel nog een lichtere grijs voor tertiare
16
content. Voor de dikte van het lettertype zijn twee soorten voldoende, normale dikte voor de meeste teksten en een dikker lettertype voor de woorden die moet opvallen. Ditzelfde geldt overigens ook voor iconen en symbolen.
Het systeem voor marges en padding is ook zeer belangrijk bij het ontwerpen van elementen op de website. Door ervoor te zorgen dat de marges en de padding in evenwicht blijven, ontstaat er een rustig en evenwichtig ontwerp, zie onderstaande afbeelding.
Bron: Refactoring UI.
Doordat er van tevoren een systeem is gemaakt met deze waarden, is het heel gemakkelijk om verschillende waarden uit dit systeem te kiezen en uit te proberen wat werkt en wat niet.
Voor de beste leeservaring is het aan te raden om alinea’s niet breder te maken dan 45 - 75 karakters. Enkel korte tekst kan gecentreerd weergegeven worden, wordt gecentreerde tekst te lang dan kan het rommelig ogen. Wordt de alinea langer, dan is het beter om de tekst links uit te lijnen.
Bron: Refactoring UI.
Tot slot is het belangrijk om kwalitatief goede foto’s te gebruiken op een website. Slechte foto’s kunnen een website ruïneren, zelfs al is de website heel goed ontworpen. Ook is het belangrijk dat wanneer er tekst over een foto heen wordt geplaatst, dat er genoeg contrast is zodat de tekst goed leesbaar is. (Wathan & Schoger, 2018, pp. 28–206)
17
03
Methodologie
03.1 Algemene aanpak
03.2 Aanpak per deelvraag
18
03.1 Algemene aanpak
Om de hoofdvraag te kunnen beantwoorden is het belangrijk om zoveel mogelijk te weten te komen over 100%FAT. Onderstaand canvas helpt erbij om te bepalen wat belangrijk is om te onderzoeken om de kern van 100%FAT te kunnen bepalen.
Daarnaast wordt de Design Thinking methode toegepast. De eerste fase is Empathize, waarbij het belangrijk is om empathisch begrip te krijgen. Tijdens deze fase verdiept men zich in de oorsprong van het probleem, door inzicht te krijgen in de behoeftes van klanten en gebruikers. De tweede fase is Define, waarbij zoveel mogelijk onderzoek gedaan moet worden zodat uiteindelijk de probleemstelling geformuleerd kan worden en er gedefinieerd kan worden wat er nodig is om het probleem op te lossen. De derde fase is de Ideate fase. In deze fase worden er zoveel mogelijk ideeën verzameld door brainstormsessies te houden. De vierde fase is de Prototype fase. Tijdens deze fase worden er voor elk idee naar de voor- en nadelen gekeken. Van kleine aantal ideeën dat een goede kans van slagen heeft worden prototypes gemaakt en getest. De laatste fase is Testen. Tijdens deze fase worden de prototypes verder getest en wordt het beste ontwerp gekozen en verder verbeterd tot een eindproduct (Mulder, 2019).
19
03.2 Aanpak per deelvraag
Deelvraag 1: Wat zijn de missies en visies van de twee directieleden van 100%FAT en hoe erg verschillen deze van elkaar?
Gedurende de eerste weken binnen 100%FAT is opgemerkt dat er een meningsverschil heerst tussen de twee directieleden wat betreft de missie en visie van het bedrijf. Door deze meningen in kaart te brengen, kan geconcludeerd worden wat de grootste verschillen zijn en of deze verschillen wel zo groot zijn. Deze meningen worden samengebracht tot een gezamenlijke missie en visie waar beide directieleden achter zullen staan.
Verwachte producten:
• Interview Floris Schreuder (in bijlage) • Interview Lieven Maes (in bijlage) • Interviews samengevat (in bijlage)
• Conclusies en bijzonderheden interviews (in resultaten)
Deelvraag 2: Wat zijn de kernwaarden en werkwijzen van 100%FAT?
Om de brand identity van 100%FAT te kunnen bepalen en vorm te geven is het belangrijk om te weten op welke manier zij werken en wat zo uniek is aan deze manier van werken. Door dit vast te stellen kan er een brand identity vastgesteld worden welke uniek is, hierdoor gaat een bedrijf opvallen.
20
Verwachte producten:
• Interview Floris Schreuder (in bijlage) * • Interview Lieven Maes (in bijlage) *
• Interviews samengevat (in bijlage, conclusie in resultaten) * • Resultaten vragenlijst klanten (in bijlage, conclusie in resultaten) * Omvat hetzelfde interview als in deelvraag 1
Deelvraag 3: Welke bedrijven zijn klanten van 100%FAT en hoe ervaren zij de samenwerking met 100%FAT?
Belangrijk is om de klanten (doelgroep) van 100%FAT in kaart te brengen. Wat vinden klanten van de samenwerking met 100%FAT en hoe ervaren zij dit? Wat vinden klanten goede eigenschappen van 100%FAT en waar liggen nog kansen?
Verwachte producten:
• Resultaten vragenlijst klanten (in bijlage, conclusie in resultaten) ** ** Omvat dezelfde vragenlijst als deelvraag 2
Deelvraag 4: Welke bedrijven zijn concurrenten van 100%FAT en op welke wijze communiceren zij? Door te onderzoeken welke bedrijven concurrenten zijn van 100%FAT kan geanalyseerd worden op welke wijze zij communiceren op de website en op welke wijze zij de bezoekers aanspreekt op de website. Deze informatie kan gebruikt worden als inspiratie voor het vormgeven van de brand identity en de website.
21
Verwachte producten:
• Concurrentieanalyse (in bijlage, conclusie in resultaten)
Deelvraag 5: Wat zijn de huidige trends op het gebied van online communicatie en webdesign? Door onderzoek te doen naar de huidige trends op het gebied van online communicatie en webdesign, kan gekeken worden op welke manier veel (succesvolle) bedrijven communiceren naar klanten en hoe deze bedrijven dit terug laten komen in het design van de website. Deze informatie kan gebruikt worden als inspiratie voor het vormgeven van de website.
Verwachte producten:
• Trendanalyse (in bijlage, conclusie in resultaten)
Deelvraag 6: Hoe kan de gecreëerde brand identity vertaald worden naar een vernieuwde huisstijl met bijbehorende nieuwe website?
Met behulp van online onderzoek kan er een huisstijl vormgegeven worden, welke tevens doorgevoerd gaat worden op de website. Door deze vormgeving vast te leggen in een brandbook is het voor de werknemers van 100%FAT in de toekomst gemakkelijker om de huisstijl door te voeren in verschillende uitingen.
22
Verwachte producten:
• Brandbook/stylesheet met onder andere bedrijfsomschrijving, missie, visie, typografie, tone-of-voice, kleurgebruik, logogebruik, vormgebruik etc. (product)
• Eventuele vormgegeven uitingen, zie MoSCoW in bijlage 1
Deelvraag 7: Op welke manier kan de huidige website verbeterd worden zodat dat de bezoekers van de website beter begrijpen wat de diensten van 100%FAT zijn?
Met behulp van literatuuronderzoek, technisch onderzoek, testing en iteraties maken kan er aan het eind van de afstudeerperiode een vernieuwde website gerealiseerd worden, in de vorm van een Adobe XD ontwerp.
Verwachte producten
• Resultaten onderzoek naar websitebuilders (in bijlage, conclusie in resultaten) • Resultaten eerste vragenlijst (in bijlage, conclusie in resultaten)
• Testresultaten website (in resultaten)
• Vernieuwde website, ontwerp in Adobe XD (eindproduct)
• Resultaten tweede vragenlijst (in bijlage, conclusie in resultaten) • Resultaten vergelijkend onderzoek (in resultaten)
23
04
Resultaten
04.1 Empathize
04.2 Define
04.3 Ideate
04.4 Prototype
04.5 Testing
04.6 Eindproduct
24
04.1 Empathize
Tijdens deze fase is er verdiept in de oorsprong van het probleem, welke te lezen is in hoofdstuk 01.2 en hoofdstuk 01.3. Het probleem van 100%FAT is, is dat zij behoefte hebben aan het vastleggen van de identiteit van het bedrijf. Deze identiteit moet vervolgens tot uiting komen in de website, tevens omdat de website zeer verouderd is. Daarnaast wordt er tijdens deze fase verdiept in de behoeftes van klanten en gebruikers.
04.1.1 Interviews Floris en Lieven
Om een goed beeld te creëren van de achtergrond en motivatie van 100%FAT zijn er interviews gehouden met Floris en Lieven, de oprichters van het bedrijf. Met behulp van de theorie uit het theoretisch kader (hoofdstuk 02.1) zijn de interviewvragen opgesteld en met behulp van interviewtechnieken (Swaen, 2019) zijn de interviews uitgevoerd. Uit de interviews kwam naar voren dat 100%FAT een bedrijf is dat installaties maakt en projecten uitvoert die veel andere bedrijven niet kunnen maken en uitvoeren. 100%FAT is een klein bedrijf waardoor zij heel wendbaar en flexibel zijn. Voor elke klant leveren zij maatwerk en voelen zij zich zeer verantwoordelijk voor het project en de nazorg. 100%FAT streeft ernaar om schijnbaar onmogelijke “dromen“ tot werkelijkheid te brengen, door creatief en oplossingsgericht te zijn.
De doelgroep van 100%FAT is op te delen in 3 categorieën:
• Musea en exposities. Binnen deze doelgroep is er vaak veel animo voor experiment en innovatie, maar hebben vaak weinig geld. De opdrachten binnen deze doelgroep zijn volgens 100%FAT vaak inhoudelijk erg interessant. • Gemeentes en onderwijsinstellingen. Deze
doelgroep wil vaak functionele installaties laten bouwen met zo min mogelijk onderhoud. Deze doelgroep staat vaak wel open voor innovatie. • Corporate bedrijven. Deze doelgroep heeft
vaak een vaste huisstijl en een strak stramien. 100%FAT heeft gemerkt dat zij vaak wel open staan voor experiment en innovatie en hebben hier het geld ook voor. Opdrachten zijn vaak inhoudelijk minder interessant, waardoor het bij 100%FAT minder de voorkeur heeft.
In de toekomst wil 100%FAT jaarlijks een aantal startups (projecten zoals VirtuScope en de
interactieve tafel) per jaar ontwikkelen om op deze manier te zorgen voor een basiskapitaal. Naast deze startups wil 100%FAT opdrachten van klanten aannemen, welke wat minder geld zullen opleveren. Wat 100%FAT graag nog wil verbeteren is de kwaliteit van de projecten en het portfolio, om meer professionaliteit uit te stralen. Daarnaast zitten er nog verbeterpunten in de organisatie, soms verlopen projecten chaotisch waardoor er steken worden laten vallen. Daarentegen heeft 100%FAT een hele prettige werksfeer en heerst er geen sterke hiërarchie, iedereen heeft inspraak en iedereen is bereid elkaar te helpen.
100%FAT is goed in technische oplossingen bieden voor conceptuele vraagstukken. Interactieve
oplossingen in hard en software bedenken en maken, die op een creatieve manier informatie ontsluiten. Daarbij ook snel met oplossingen komen. 100%FAT is in staat om proactief te denken voor de klant, ideeën bedenken voordat de klant het heeft bedacht. 100%FAT is flexibel, snel en heel creatief. No nonsens is een belangrijke USP, het is belangrijk dat klanten deze aanpak en mentaliteit snappen en waarderen. 100%FAT levert technologieën van nu en morgen, hebben daarin een vooruitziende blik maar zijn daar ook kritisch in.
De volledige interviews zijn te vinden in bijlage 2a
en bijlage 2b en de samenvatting in bijlage 2c. 04.1.2 Huidige huisstijl
Hoe is het onderstaande logo van 100%FAT tot stand gekomen? Het driehoek, de strepen en de kleuren zijn geïnspireerd op het ‘risk of explosion‘ waarschuwingsbord. Het melkpak is bedacht doordat destijds veel producten met maar 50% of 0% vet werden geproduceerd. 100%FAT levert geen mager werk zoals melk, maar volledig 100% werk. Daarom 100% Fusion of Art and Technology.
25
verschillende grijstinten met geel als accentkleur. Voor de lettertypes wordt gebruik gemaakt van het font Armata voor titels en Open Sans (semi bold en light) voor koppen en teksten.
Om de driehoekige vorm terug te laten komen in de huisstijl wordt er gebruik gemaakt van geometrische vormen, door deze bijvoorbeeld als accent toe te voegen aan banners in
conceptdocumenten. Deze geometrische vormen zijn op de huidige website terug te vinden in de afbeeldingen van het personeel van 100%FAT, zie hieronder.
04.1.3 Klantervaringen
Om inzicht te krijgen in de ervaringen van klanten met 100%FAT is er een enquête opgesteld en verstuurd naar 44 klanten. Ervaringen van klanten kunnen de identiteit van 100%FAT benadrukken, maar kunnen ook aangeven waar nog kansen liggen voor 100%FAT om te verbeteren. De vraagstellingen van de enquête zijn te vinden in
bijlage 3a.
23 klanten (van de 44 klanten die uitgenodigd zijn) hebben de enquête ingevuld, wat neer komt op een respons van 52,27%. Klanten zijn voornamelijk in contact gekomen met 100%FAT door middel van mond-tot-mondreclame en via eerdere samenwerkingen of door een gezamenlijke opdrachtgever. Er is één klant die heeft
aangegeven 100%FAT te kennen via de krant of het nieuws.
Het pijnpunt bij klanten was voornamelijk dat zij hulp nodig hadden bij het bedenken van concepten, het ontwikkelen en de realisatie van producten en/of interactieve opstellingen en
installaties. Klanten hadden ook behoefte aan het meedenkend vermogen van 100%FAT. Ook voor het bedenken van technische oplossingen en voor het zorgen voor technische ondersteuning werd 100%FAT ingeschakeld.
Qua ervaring scoort 100%FAT het beste op verantwoordelijkheid en algemene ervaring, maar er liggen nog kansen bij het verbeteren van de communicatie en de snelheid. De prijs zijn de meeste klanten wel tevreden over.
De goede punten van 100%FAT zijn dat zij met veel enthousiasme werken en dat zij ook zorgen voor een prettige samenwerking. Tevens vinden klanten dat 100%FAT betrouwbaar is, dat zij gemaakte afspraken nakomen en dat het resultaat (technisch) goed werkt. 100%FAT heeft een zeer flexibele werkhouding en beschikt over veel (technische) kennis. 100%FAT luistert goed naar de wens van de klant, denkt (proactief) mee en komt altijd met een creatieve oplossing
Wat 100%FAT echter nog kan verbeteren is de communicatie en planning. Klanten zien graag na het bespreken van het project een samenvatting van de plannen (projectomschrijving), zodat voor beide partijen duidelijk is wat er gaat en moet gebeuren. Dit zorgt tevens voor een beter verwachtingsmanagement. Ook de planning van projecten zou beter moeten, zodat een race tegen de klok voorkomen kan worden en er meer tijd overblijft voor het uitvoeren van testen. Klanten hebben tevens ook aangegeven dat het soms onduidelijk is wie het aanspreekpunt is en wie welke taak op zich neemt, wat ook weer te maken heeft met het verwachtingsmanagement. Veel klanten hebben ook behoefte aan updates over de voortgang van het proces, een eindcheck en spontane nazorg in de vorm van een telefoontje. Ten slotte waren creatief, enthousiast, ingenieus, eerlijk en hulpvaardig de karaktereigenschappen die het vaakst waren aangevinkt en waren creativiteit, enthousiasme, betrouwbaarheid, passie, bekwaam en innovatief de kernwaarden die het vaakst waren aangevinkt. Deze
karaktereigenschappen en kernwaarden hebben duidelijke overeenkomsten met de antwoorden die zijn gegeven op de open vragen van deze enquête. Alle vragen met bijbehorende resultaten zijn te vinden in bijlage 3b.
26
04.1.4 Enquête over de huidige website
Om het probleem van de huidige website vast te stellen is er een enquête verspreidt via Facebook. De enquête is te vinden in bijlage 4a. In deze enquête werden de respondenten onder andere gevraagd of zij aan de hand van de website duidelijk konden maken wat voor soort bedrijf 100%FAT is en welke werkzaamheden en diensten zij denken dat 100%FAT uitvoert. Deze enquête dient tevens als nulmeting voor de enquête die uitgevoerd wordt na het opnieuw ontwerpen van de nieuwe website.
Uit de enquête is gebleken dat het voor veel respondenten onduidelijk is wat het logo en de naam betekent. Op het eerste oog kunnen respondenten wel zeggen dat 100%FAT iets met (nieuwe) technologie doet, maar kunnen niet uit de website halen wat 100%FAT precies doet. Bij de vraag welke werkzaamheden en diensten 100%FAT uitvoert kunnen respondenten ook vaak geen duidelijk antwoord geven, deze antwoorden blijven allemaal een beetje ‘vaag’, “iets met technologie” of “iets op vraag van de klant”.
Ook wanneer de respondenten de website beter bekijken en een aantal portfolio items bekijken wordt het niet heel veel duidelijker, veel respondenten geven aan niets te kunnen toevoegen.
Wat maakt 100%FAT uniek? Het feit dat er niet zo veel bedrijven van in Nederland zijn, maakt 100%FAT al uniek. Ook het out of the box denken en de flexibiliteit en maatwerk maakt 100%FAT uniek.
Slechte punten van de website zijn volgens respondenten vooral dat de naam en het logo niet duidelijk zijn en dat de website ‘saai’ is en niet modern. Ook de mobiele website vinden een aantal respondenten niet prettig. De meeste respondenten vinden het moeilijk om met behulp van de website te begrijpen wat 100%FAT voor werk doet.
Daarnaast ontbreekt er volgens een respondent bij de projecten een beschrijving van het nut van de installatie en ontbreekt er volgens een andere respondent de ‘what’s in it for me’ op de website. Wat veel respondenten positief vinden aan de website is de hoeveelheid portfolio items en de uitleg/video’s bij de portfolio items. Veel
respondenten zijn erg te spreken over de illustraties van de medewerkers op de website.
Alle resultaten van de enquête zijn te vinden in
bijlage 4b.
04.1.5 Concurrentieanalyse
Om in kaart te brengen hoe de concurrentie communiceert via de website is er gekeken naar 10 vergelijkbare bedrijven als 100%FAT, zowel nationaal als internationaal. De 10 bedrijven welke naar gekeken is zijn: Tinker Imagineers (Utrecht), YIPP (Amsterdam), NorthernLight (Amsterdam), KissTheFrog (Delft & Sydney, Australië), IJsfontein (Amsterdam), Critical Mass (Utrecht), KITT
Engineering (Enschede), Ethno Tekh (Melbourne, Australië), Ideum (Corrales, New Mexico) en Valo Motion (Finland). Voor deze concurrentieanalyse is er onder andere gekeken naar de doelstelling van het bedrijf, de strategie, een quote of slogan, het assortiment en eventuele prijzen, de services en sterke en zwakke punten van de website
(marketingscriptie, 2019). De volledige bevindingen van elk bedrijf zijn te vinden inbijlage 5.
Tinker Imagineers heeft een rustige website, die veel professionaliteit uitstraalt. Tinker is een bedrijf gespecialiseerd in experience design en dit laten ze duidelijk terugkomen op de website. Door gebruik te maken van veel duidelijke afbeeldingen en video’s van projecten, wordt de beleving van de experiences zo duidelijk mogelijk weergegeven op de website. De visie van Tinker staat duidelijk beschreven op de website en lichten ze de term ‘imagineering‘ toe. Verder vult Tinker de website met inspirerende quotes als “we are experience designers creating worlds of wonder for curious people” en “it is our mission to bring people, stories and places to life”.
YIPP daarentegen gebruikt geen “inspirerende quotes”, maar communiceert een stuk nuchterder. YIPP geeft ook aan te willen inspireren en impact te willen maken, maar leggen meer de nadruk op de gamification, storytelling en de betrouwbaarheid van de producten. Ook YIPP maakt veel gebruik van professionele foto’s en video’s om een goede weergave te creëren van de projecten die zij uitgevoerd hebben.
NorthernLight is weer zeer gefocust op het
verbreden van de wereld en het verbreden van het perspectief van de gebruiker. Zij willen graag indruk maken met de experiences die zij creëren. Het logo van NorthernLight bevat een herkenbaar icoon die over de hele website terug te zien is, dit zorgt ervoor dat het herkenbaar blijft en in het geheugen
27
blijft hangen. Ten slotte heeft NorthernLight een pagina genaamd Playground, hierin laten zij concepten, wilde ideeën, prototypes en dromen zien voor de toekomst.
KissTheFrog heeft een veel zakelijkere benadering. Zij laten aan de buitenwereld zien wat ze kunnen, welke projecten zij uitgevoerd hebben en voor welke (grote) klanten zij dit gedaan hebben. De website bevat weinig tekst, behalve bij de uitleg van de projecten. Een goede toevoeging aan de site zijn de enthousiaste quotes van de opdrachtgever of gebruiker/bezoeker van de interactieve opstelling.
IJsfontein is gefocust op playful learning, op een leuke manier nieuwe dingen leren, zowel voor kinderen als volwassenen. De website heeft een zeer professionele uitstraling. Per project wordt duidelijk uitgelegd wat het doel is van de app/installatie en wat de interactie is. Tevens wordt er bij elke projectbeschrijving een call to action gegeven om contact op te nemen bij het bedrijf. Ze maken de website en de projecten persoonlijk, door bij elk project aan te geven welke medewerkers hebben meegewerkt aan het project.
Critical Mass levert voornamelijk tentoonstellingen, installaties, films en games aan bedoeld voor onderwijs en educatie. Zij willen graag mensen activeren om zich in te zetten voor een inclusieve samenleving. Crititcal Mass maakt veel gebruik van call to actions op de website, zodat het uitnodigt om contact met ze op te nemen.
KITT Engineering is een bedrijf gevestigd in Enschede en daarom erg interessant om te vergelijken met 100%FAT. Qua werkzaamheden is KITT erg vergelijkbaar met 100%FAT, maar de website laat veel te wensen over. De website oogt zeer verouderd en is sinds 2015 weinig bijgewerkt. Tot dusver waren dit enkel Nederlandse bedrijven. Enkele bedrijven als Tinker, YIPP en NorthernLight lijken zich echter te focussen op de internationale doelgroep, omdat deze bedrijven Engels als primaire taal op de website gebruiken. Omdat 100%FAT ook klanten heeft in het buitenland, is er ook gekeken naar enkele internationale concurrenten.
Ethno Tekh is gevestigd in Australië en heeft als doel om grenzen te doorbreken tussen de menselijke wereld en de digitale wereld. Op de website geeft het bedrijf niet veel tekst en uitleg bij
de projecten, maar brengen vooral de sfeer over door middel van video’s. Het bedrijf heeft eigen software ontwikkeld en dit laten ze duidelijk zien op de website, deze software is ook te downloaden via de website (soms gratis en soms tegen een kleine vergoeding). Ook bij Ethno Tekh stammen de laatste berichten op de website en social media uit 2015.
Ideum is gevestigd in New Mexico en hebben als missie om innovatieve technologieën te benutten om boeiende interactieve ervaringen te creëren. Tevens benadrukken zij op de website dat zij respectvol omgaan met partners en klanten en dat zij ernaar streven om open en eerlijk te zijn. Verder laten zij zien op de website interactieve exposities te creëren, maar dat zij ook beschikken over eigen ontwikkelde multitouch tafels en displays.
Het laatste bedrijf in deze analyse is Valo Motion. Valo Motion onderscheidt zich van alle andere bedrijven in deze analyse doordat Valo Motion zich in de basis beperkt tot twee producten. Deze twee producten (ValoJump en ValoClimb) zijn vervolgens verder uit te breiden met nieuwe spellen en interacties. Valo Motion laat duidelijk op de website zien dat zij veel kennis hebben, door de vele technische uitleg die zij geven over de hardware. De website geeft veel informatie over de producten, maar geeft weinig tot geen informatie over het bedrijf zelf.
04.1.6 Webdesign trends 2020
Door in te spelen op trends blijft een bedrijf actueel en relevant, dit laat tevens zien dat het bedrijf op de hoogte is en moeite doet om dit te blijven (Raaymakers, 2018) (van Hooijdonk, 2019). In dit geval op het gebied van webdesign. Veel webdesign, marketing- en communicatiebureaus geven jaarlijks een update over de nieuwe
webdesign trends voor het nieuwe jaar. Zo zijn er veel trends besproken voor het jaar 2020. Dit zijn de trends die het vaakst naar voren kwamen: Oversized fonts. Lettertypes mogen groot en opvallend zijn. Zinnen of woorden die moeten opvallen op de website worden groot en dikgedrukt weergegeven. Apple maakt onder andere veel gebruik van oversized fonts, zie de afbeelding op de volgende pagina.
28
(Micro)animaties. Animaties maken een website minder statisch en meer speels. Animaties vergroten de user experience, maar de animaties moeten niet gaan afleiden. Voorbeelden van (micro) animaties zijn te vinden op de site van Dopper en
SuperHi.
Levendige en opvallende kleuren. Dit is geen nieuwe trend, maar volgens experts is deze trend steeds meer zichtbaar op het web. Steeds meer (web)designers proberen de balans te vinden tussen robuuste kleuren en een overzichtelijke en simpele lay-out, bovenstaande website van SuperHi is hier een goed voorbeeld van, zie de afbeelding hieronder.
Minimalisme. Websites bevatten steeds meer witruimtes met weinig kleurverschillen, behalve de elementen waar de aandacht naartoe getrokken moet worden. Het creëert overzicht, zodat de bezoeker gemakkelijk kan vinden waarnaar hij opzoek is.
3D en diepte. Langzaam verdwijnt flat design meer naar de achtergrond en maakt het meer ruimte vrij voor 3D en diepte. Diepte creëren gebeurt in onder andere de simpele vorm van schaduwen toevoegen, maar ook door 3D afbeeldingen in de achtergrond te gebruiken. Een voorbeeld hiervan is de website van WebHero. Zie de afbeelding rechts bovenin. Door het toevoegen van de schaduwen achter de verschillende vlakken, wordt er diepte gecreëerd in de website.
Illustraties. In 2020 worden illustraties steeds vaker gebruikt ter ondersteuning van de boodschap. Als de stijl van de illustraties krachtig genoeg is, kan dit tevens zorgen voor herkenbaarheid van de gehele branding. Ook wordt fotografie veel gecombineerd met illustraties en grafische elementen. De website van Headspace is hier een voorbeeld van hoe illustraties gebruikt worden in een website.
Asymmetrische designs. Asymmetrische designs maken een website speels en draagt bij aan de experience. Geen gebruik maken van lijnrechte blokken, maar creatief gebruik maken van de ruimte op de website. Deze website is hier een mooi voorbeeld van.
Ten slotte is mobile first een trend die elk jaar weer terugkomt. Een repsonsive design is erg belangrijk, omdat er steeds meer gebrowset wordt op de
29
mobiele telefoon.
(van Vliet, 2019) (Beekhuis, 2020) (Hölper, 2019) (Booom Digital, 2019) (van der Plas, 2019) 04.1.7 Online communicatie
Naast de visuele uitstraling van de website is ook de communicatie heel belangrijk op de website. Zo wordt de bezoeker van een website vaak heel formeel aangesproken, maar tegenwoordig worden bezoekers van een website ook vaak op een hele persoonlijke manier aangesproken.
Een bedrijf met een opvallende persoonlijkheid is Coolblue. Coolblue is een bedrijf dat zich volledig inzet op klantvriendelijkheid. Coolblue hanteert een persoonlijke benadering op de website, door de klant met ‘jou‘ aan te spreken en de website te vullen met foto’s van glimlachend personeel van Coolblue. Coolblue zorgt ervoor dat winkelen bij hen een leuke ervaring is en dat de klant er een glimlach van krijgt. Wanneer de klant een bestelling geplaatst heeft de klant de mogelijkheid om een paar video’s te kijken: een video over wachttherapie en een video over verschillende manieren om een pakketje uit te pakken. Ook kent Coolblue geen geheimen. Alle informatie staat op de website. De basis van de cultuur van Coolblue is ‘gewoon verwonderen’ met daaromheen ‘eigenzinnig‘, ‘vrienden’, ‘flexibel’ en ‘gewoon doen’. (Heemskerk, 2020) (Hakker, 2016) Deze cultuur past ook bij 100%FAT, zij staan ook voor no-nonsens en transparant zijn. Geen onzin praatjes, maar gewoon zeggen waar het op staat. Tevens is de branding van Coolblue overal op terug te vinden. De bekende oranje stip en de smiley is overal terug te zien: op de website, op social media, op hun bedrijfskleding, op de bezorgbussen en bezorgfietsen.
Echter is Coolblue een b2c-bedrijf en 100%FAT een b2b-bedrijf, waardoor deze twee bedrijven niet volledig met elkaar vergeleken kunnen worden. De communicatie en marketing van b2b en b2c verschillen van elkaar. B2b-marketing duurt langer dan b2c-marketing, omdat het vaak over veel grotere bedragen gaat waardoor er vaak meerdere mensen betrokken zijn bij het beslissingstraject. Belangrijk bij dit traject is dat de beslissers
behandeld worden als normale mensen, het verhaal moet menselijk zijn. Geen loze beloftes, maar juist heldere en betrouwbare informatie. Dit is ook de mentaliteit die past bij 100%FAT. Om effectief te kunnen communiceren met de doelgroep, moet ervoor gezorgd worden dat de doelgroep de
informatie krijgt waar zij behoefte aan heeft. Bij b2b-marketing moet de klant niet worden gepusht, maar moet de klant uit zichzelf naar het bedrijf toe komen. Daarbij is het ook belangrijk om te zorgen voor voldoende call-to-actions op de website, zodat de b2b-marketeers zonder veel moeite te hoeven doen, contact kunnen opnemen. Bij b2b-bedrijven is het vaak zo dat ongeveer 80% van de omzet afkomstig is van 20% van de klanten, dit zorgt er al voor dat een bedrijf heel anders moet omgaan met klanten dan een b2c-bedrijf. Bij b2b draait het om kwaliteit en niet om kwantiteit. Uit onderzoek blijkt dat 93% van alle web traffic via zoekmachines komt, daarom is het belangrijk om veel aandacht te besteden aan de SEO van een website. (99 Firms, z.d.) Op het gebied van social media is LinkedIn het meest gebruikte platform, via dit platform komen ook de meeste leads vandaan ten opzichte van andere platforms (waaronder Twitter en Facebook). (Ros & Gremmen, z.d.) 04.1.8 Propositie Joost Vervoorn
Joost Vervoorn is digitaal strateeg en is door 100%FAT ingeschakeld om een propositie te schrijven. Deze propositie zal weer zichtbaar terugkomen in de teksten van de website. Op basis van de interviews met Floris en Lieven, de resultaten van de enquête onder klanten en de concurrentieanalyse heeft Joost Vervoorn de propositie geschreven. De propositie is te vinden in bijlage 6. De hoofdboodschap van 100%FAT is dat een prachtig verhaal een prachtige experience verdient. 100%FAT helpt organisaties die out of the box durven te denken, beter hun verhaal te vertellen met creatieve, betrouwbare en makkelijk te gebruiken interactieve installaties. De pay-off die daarbij gebruikt wordt is: De meest creatieve manier om jouw verhaal te vertellen. De tone-of-voice daarbij is persoonlijk en informeel, wat past bij de no nonsens mentaliteit van 100%FAT.
04.2 Define
In deze fase is er gedefinieerd wat er nodig is om de probleemstelling op te lossen, op basis van de informatie uit de empathize fase. Deze define fase legt de fundering voor de ideate fase.
Uit de interviews met Floris en Lieven kwam naar voren dat 100%FAT als doel hebben om schijnbaar onmogelijke “dromen” tot werkelijkheid te brengen, door creatief en oplossingsgericht te zijn. Daarnaast is 100%FAT erg flexibel, werken met veel toewijding aan alle projecten
30
en denken zeer proactief mee met de klant. In de toekomst wil 100%FAT graag jaarlijks, naast opdrachten van klanten, een aantal producten en/of technologieën bedenken, ontwikkelen en lanceren als startups. Belangrijk voor 100%FAT is de no nonsens mentaliteit, ze doen geen valse beloftes en zijn eerlijk tegen klanten. Uit de enquête onder de klanten kwam ook naar voren dat 100%FAT zeer proactief meedenkt en dat zij zeer goed zijn in het bedenken en realiseren van creatieve, interactieve en innovatieve oplossingen. 100%FAT werkt met veel enthousiasme en
zorgen voor een prettige samenwerking. Tevens vinden klanten dat 100%FAT betrouwbaar is, dat zij gemaakte afspraken nakomen en dat zij ook een flexibele werkhouding hebben. De top 5 karaktereigenschappen die uit de enquête naar voren kwamen zijn: creatief, enthousiast, ingenieus, eerlijk en hulpvaardig. De top 6 kernwaarden die uit de enquête naar voren kwamen zijn: creativiteit, enthousiasme, betrouwbaarheid, passie, bekwaam en innovatief. Uit de concurrentieanalyse kwam naar voren dat veel van de concurrenten van 100%FAT duidelijk op de website laten zien welke missie en visie zij hebben. Enkele bedrijven hebben een wereld verbeterende missie/visie, maar een aantal bedrijven hebben dit net als 100%FAT ook niet. Deze bedrijven leggen de nadruk op de experience en de beleving van de tentoonstellingen en installaties. Deze experiences zijn duidelijk zichtbaar in een professioneel portfolio met professionele foto’s en video’s.
Al deze informatie van de interviews, de enquête onder de klanten en de concurrentieanalyse is door digitaal strateeg Joost Vervoorn gebruikt om een propositie voor 100%FAT te schrijven. Deze propositie zal gebruikt woren voor het maken van de teksten op de website. De propositie van Joost Vervoorn is te vinden in bijlage 6.
In hoofdstuk 02.2 Rebranding wordt gesproken over rebranding en brand-refreshen en het verschil hier tussen. In dit onderzoek gaat het echter om een combinatie hiertussen. Er zal geen volledige verandering in propositie plaatsvinden, de identiteit en mentaliteit van 100%FAT verandert niet, maar de propositite wordt eigenlijk pas voor de eerste keer pas echt vastgesteld. Het belangrijkste is dat de identiteit op de website niet meer past bij de identiteit van 100%FAT op dit moment. Daarnaast zal naast het volledig vernieuwen van de website niet veel veranderen aan de huisstijl van 100%FAT, behalve dat deze in kleine mate wordt opgefrist, zodat de vormgeving aansluit bij de website en
andersom. De website krijgt een actueler, moderner en frisser gevoel.
In hoofdstuk 02.3 Huisstijl wordt gesproken over alle belangrijke aspecten van een huisstijl van een bedrijf. De naam van het bedrijf, het logo van het bedrijf, de gebruikte lettertypen, iconen, vormen en foto’s zijn allemaal onderdelen van de huisstijl van een bedrijf of merk. Een huisstijl moet zorgen voor herkenbaarheid en het geeft een bedrijf een gevoel. Dit gevoel en de associaties moeten positief zijn bij mensen, kleuren spelen hierbij een belangrijke rol. Om herkenbaar te blijven wordt ervoor
gezorgd dat alle uitingen consistent blijven. Om deze consistentie te waarborgen wordt er gebruik gemaakt van een huisstijl handboek, waarin alle richtlijnen zijn vastgelegd. In dit handboek komt de merkidentiteit te staan, hoe het logo gebruikt moet worden, hoe lettertypes gebruikt moeten worden, welke kleuren er gebruikt moeten worden, welke iconen en vormen er gebruikt moeten worden, hoe fotografie moet worden ingezet en hoe huisstijldragers worden ingezet.
Om meer duidelijkheid te creëren voor de bezoekers van de website over wie 100%FAT is en wat ze doen (wat de hoofdvraag is van dit onderzoek), zijn er verschillende onderzoeken gedaan. Er is een enquête gehouden online over de huidige (oude) website van 100%FAT. Uit deze enquête is inderdaad gebleken dat de respondenten het onduidelijk vinden wat 100%FAT precies voor werkzaamheden uitvoert. De respondenten konden er wel uit halen dat 100%FAT iets met techniek en installaties/
apparatuur doet, maar meer was er niet duidelijk. Ook de naam en het logo vonden een aantal respondenten erg onduidelijk en vonden ook de website onoverzichtelijk. Uit de enquête blijkt ook dat een aantal respondenten onduidelijk wat 100%FAT voor nieuwe klanten kan betekenen, hoe zij te werk gaan en wat er allemaal mogelijk is (what’s in it for me). Al deze onduidelijkheden zullen in de nieuwe website wel duidelijk beschreven worden. Qua uitstraling vinden een aantal
respondenten dat de website moderner/flitsender kan en moeten de foto’s en video’s professioneler en van betere kwaliteit, ook dit zal meegenomen worden in de nieuwe versie van de website. Veel respondenten zijn zeer positief over de illustraties van het team, dus deze komen terug op de nieuwe website. Ook uit de concurrentieanalyse kwam naar voren dat het hebben van professionele foto’s en video’s erg belangrijk is, om op hetzelfde niveau te zitten als de concurrentie, zij hebben dit wel goed
31
voor elkaar. Echter is dit door de huidige situatie van COVID-19 op dit moment niet mogelijk, dus zal dit meegenomen worden in de aanbevelingen voor de toekomst. Daarnaast beschrijven veel concurrenten de missie en visie van het bedrijf, zij beschrijven duidelijk de drijfveer van het bedrijf op de website. Dit zal ook toegevoegd worden aan de nieuwe website voor 100%FAT. 100%FAT beschikt over heel veel (technische) kennis, wat veel concurrenten niet laten zien. Om op te vallen tussen de concurrentie is dit een kans voor 100%FAT door deze technische kennis wel te laten zien op de website.
In het theoretisch kader hoofdstuk 02.1 is te lezen dat er een aantal vragen zijn die gesteld kunnen worden bij het bepalen van de manier van communiceren van een bedrijf. Zo moet een bedrijf bedenken wat het bedrijf wel en niet moet zeggen, wat de kern van de boodschap is, wat de pay-off is, de tone-of-voice, welke woorden en termen gebruikt gaan worden, welke woorden niet gebruikt worden en wat eventuele valkuilen van het verhaal zijn. Uit de trendanalyse komt naar voren dat er geen loze beloftes op de website mogen komen te staan om veel klanten te lokken. Een b2b-bedrijf moet heldere en betrouwbare informatie overbrengen welke aansluit bij de behoeftes van de doelgroep. Deze mentaliteit past tevens ook erg goed bij de no-nonsens mentaliteit van 100%FAT. De (potentiële) klant zal uit zichzelf contact moeten opnemen met 100%FAT, daarom zal de klant in één oogopslag geïnteresseerd moeten zijn en moeten er duidelijke call-to-actions aanwezig zijn op de website. Tevens zal er gebruik gemaakt moeten worden van de juiste keywords (de woorden men gebruikt in Google om bedrijven als 100%FAT te kunnen vinden) op de website, zodat dit een positieve invloed zal hebben op de SEO van de website.
Uit de theorie uit hoofdstuk 02.4 Webdesign komt naar voren dat er op het gebied van webdesign er eerst gekeken moet worden naar de doelgroep, wat in dit geval (potentiële) klanten van 100%FAT zijn. Met welk doel komen zij op de website en naar welke informatie zijn zij op zoek? De doelgroep zal op zoek zijn naar informatie die kan beantwoorden of 100%FAT de oplossing kan bieden voor
het probleem dat zij hebben. Zijn ze al bekend met het product of de dienst of hebben zij nog achtergrondinformatie nodig? Ook voor iedereen die nog niet bekend is met 100%FAT zal gezorgd worden voor voldoende achtergrondinformatie. Na het beantwoorden van deze vragen zal er een
sitemap gemaakt worden, wat de structuur is van de website. De volgende stap is het maken van een wireframe, wat als het ware de schets is van de website. Zonder tijd en energie in de vormgeving te steken kan al in een vroeg stadium van de website bepaald worden waar alle informatie moet komen te staan. Hierna kan er begonnen worden met het ontwerpen van de website. Uit de trendanalyse kwamen een aantal trends naar voren, deze trends zullen meegenomen worden in het ontwerp van de website. Deze trends zijn: oversized
fonts, (micro)animaties, levendige en opvallende kleuren, minimalisme, 3D en diepte, illustraties, asymmetrische designs en mobile first.
Alle informatie over de identiteit van 100%FAT, de doelgroep, de trends en de concurrentie is ingevuld in het canvas, welke besproken wordt in hoofdstuk 03.1 Algemene aanpak. Een vergrootte versie van het canvas is te vinden in bijlage 7.
04.3 Ideate
In deze derde fase zijn er brainstormsessies gehouden en zijn alle voorbereidende taken uitgevoerd voor het ontwerpen van de website, waaronder het opfrissen van de huisstijl van 100%FAT.
04.3.1 Logo update
Kijkend naar de MoSCoW in bijlage 1 heeft het logo geen prioriteit, echter is opgevallen dat het huidige logo enkele ongelijkheden heeft. Op basis van het huidige logo is een vernieuwde, evenwichtige versie van het logo gemaakt, omdat dit tevens ook beter aansluit bij de strakkere en frisse look van de nieuwe huisstijl en nieuwe website.
Als eerst is de typografie aangepast van het logo. Opgevallen was dat er niet tussen alle letters evenveel witruimte zit en niet alle letters
