SAFA HASSAN
GET IN TOUCH

INTERACTIVE MEDIA

>
Development Iterative design Professional standard Personal leadership Project-x

MEDIA CAMPAGNE OVP

Voorwoord

We hebben de opdracht gekregen om een mediacampagne te ontwikkelen voor Fontys (OVP). Het doel van deze campagne is om de bekendheid van de opleiding te vergroten en meer studenten te enthousiasmeren en aan te trekken om zich in te schrijven. We hebben hierbij verschillende media en strategieën ingezet om een breed publiek te bereiken en te overtuigen van de voordelen en mogelijkheden die de opleiding biedt.

Oriënteren

Ik wilde weten wie de doelgroep was, dus ik heb onderzoeksvragen opgesteld en hierop een enquête gemaakt die deeltijdstudenten hebben ingevuld. Zoals te zien in de enquête is LinkedIn het meest gebruikte sociale mediaplatform.

Uit de resultaten blijkt ook dat Instagram en WhatsApp veel worden gebruikt. Wij hebben deze platforms ook opgenomen in onze mediacampagne. De meeste mensen die de enquête hebben ingevuld, waren tussen de 25 en 34 jaar oud. Ik heb ervoor gekozen om me op deze leeftijdsgroep te richten. Ik heb onderzocht wat hen motiveert om naast hun werk weer te gaan studeren. De meeste mensen gaven aan dat persoonlijke groei en het behalen van een hogere functie de belangrijkste redenen zijn.

Enquete Enquete

Ik heb een concurrentieanalyse gemaakt door de LinkedIn-pagina van de Universiteit Utrecht te analyseren om te zien hoe andere hogescholen hun aanwezigheid op dit platform hebben vormgegeven. De pagina heeft een professionele uitstraling, plaatst regelmatig diverse content, en toont veel interactie met volgers, maar kan soms overweldigend zijn door de hoge frequentie van posts en de brede variëteit aan content. Ik heb voor deze universiteit gekozen als benchmark vanwege hun sterke en effectieve LinkedIn-aanwezigheid, die waardevolle inzichten biedt voor onze mediacampagne voor Fontys (OVP). Door hun strategieën te bestuderen, konden we onze eigen campagne verbeteren.

Op basis van de resultaten heb ik een persona gemaakt om het beter in beeld te krijgen.

Universiteit Utrecht Universiteit Amsterdam

Omdat ik had opgemerkt dat Fontys al een LinkedIn-account heeft, maar dat de informatie en content niet relevant zijn voor deeltijdstudenten, heb ik besloten om een LinkedIn-account speciaal voor deeltijdstudenten te ontwerpen. Vervolgens heb ik onderzocht welke content geschikt zou zijn voor OVP-studenten en ben ik met verschillende ideeën gekomen om meer studenten aan te trekken. De gekozen posts zijn:

Ik heb gekozen voor deze drie posts omdat het waardevol is voor geïnteresseerden om de verhalen van voormalige studenten te lezen. Zo kunnen ze zich mogelijk identificeren met die ervaringen. Bovendien is het cruciaal om de voordelen van Fontys te benadrukken, omdat we kwaliteiten hebben die meer studenten kunnen aantrekken. Zodra studenten interesse tonen, willen ze vaak meer kunnen ontdekken en ervaren. Daarom heb ik besloten om workshops of open dagen aan te kondigen, waarbij alle informatie beschikbaar is om hen te helpen bij hun beslissing.

Door deze diverse posts te ontwerpen op figma, heb ik een strategie gecreëerd om potentiële studenten aan te trekken en hen te voorzien van nuttige informatie over de Fontys deeltijdopleiding.

Versie 1

Versie 2

Usertest

Ik heb mijn interactief media product getest bij studenten in de oil dit waren aantal antwoorden die ik heb gekregen bij het stellen van vragen:

“De gekozen content lijkt relevant te zijn voor deeltijdstudenten, vooral met posts zoals "Alumina Spotlight" en "Informatie over voordelen". Ze bieden waardevolle inzichten en kunnen studenten helpen bij het nemen van een beslissing. Persoonlijk zou ik meer interesse hebben om meer te weten te komen over de deeltijdopleiding na het zien van deze posts.”

“Het navigeren door het interactieve mediaproduct was over het algemeen vrij eenvoudig. De verschillende functies waren goed georganiseerd en gemakkelijk te vinden. Ik had geen moeite om door de verschillende secties te bladeren en de inhoud te verkennen.”

“Het algehele design van het interactieve mediaproduct was aantrekkelijk en gebruiksvriendelijk. De lay-out was duidelijk en overzichtelijk, en de visuele elementen waren aantrekkelijk. Het droeg bij aan een positieve gebruikerservaring.”

“Ja, ik vind dat je interactieve elementen zou kunnen toevoegen aan het mediaproduct om de betrokkenheid van de gebruikers te vergroten. Denk bijvoorbeeld aan het integreren van quizzen, polls of interactieve infographics. Dit zou de gebruikerservaring kunnen verbeteren en de kans vergroten dat gebruikers meer tijd besteden aan het verkennen van de inhoud.”

Het doorlopen van de navigatie leverde geen problemen op, de berichten waren gemakkelijk te vinden en te begrijpen. Echter, ik ontving het advies om meer interactieve elementen toe te voegen aan de berichten om zo het contact met studenten te versterken. Ik heb deze aanbeveling geïmplementeerd en de nodige aanpassingen gedaan in mijn ontwerp. Voor de bijgewerkte versie verwijs ik naar versie 2.

Conclusie

Ik heb deze feedback overwogen en verwerkt in mijn design door een post opnieuw te ontwerpen met een interactief element. Dit leidde tot een tweede versie van mijn posts. Uiteindelijk resulteerde dit in mijn definitieve interactieve mediaproduct.

Naast het ontwerpen van posts voor mobiele apparaten, heb ik ook gezorgd voor een laptopversie. Dit is belangrijk omdat veel professionals de voorkeur geven aan het gebruik van laptops voor werk- en studio gerelateerde taken. Door een geoptimaliseerde laptopversie te bieden, zorg ik ervoor dat de inhoud goed wordt weergegeven op grotere schermen, waardoor gebruikers een betere leesbaarheid en gebruikerservaring hebben.

PORTFOLIO WEBSITE

Voorwoord

Voor deze opdracht moeten we een portfolio website maken waar we ons werk en alle leeruitkomsten kunnen tonen. De website mag je naar eigen stijl ontwerpen. Het is een plek waar mensen meer over jou en je werk kunnen ontdekken.

Oriënteren

Voordat ik aan deze opdracht begon, heb ik uitgebreid onderzoek gedaan en inspiratie opgedaan bij bestaande portfolio's. Ik ben een groot liefhebber van minimalistisch design. Ik waardeer de duidelijke, nette uitstraling en de eenvoud waarmee het te begrijpen is. Tegelijkertijd vind ik het heerlijk om te experimenteren met speelse elementen, zoals opvallende lettertypes en kleurrijke gradiënten. Daarom wil ik deze twee stijlen combineren in mijn portfolio. Door de strakke, minimalistische uitstraling te vermengen met levendige en speelse details, streef ik naar een portfolio dat zowel professioneel als boeiend is, en dat mensen inspireert en nieuwsgierig maakt naar meer.

Dit zijn de belangrijkste links die ik heb bezocht:

Om mijn stijl goed in beeld te krijgen, heb ik een moodboard gemaakt. Hierop heb ik een aantal inspiratiewebsites toegevoegd die de minimalistische en speelse elementen goed laten zien. Vervolgens heb ik een kleurenpalet opgesteld. Ik heb zorgvuldig fonts uitgekozen die passen bij zowel grote als kleine teksten, zodat de leesbaarheid optimaal blijft. Daarnaast heb ik geëxperimenteerd met minimalistische logo’s, waarbij ik het simpel wilde houden door mijn initialen toe te voegen. Verder heb ik foto’s en afbeeldingen verzameld die mij goed representeren en mijn persoonlijke stijl benadrukken.

Door al deze elementen samen te brengen, wil ik een uniek en samenhangend portfolio creëren dat mijn professionaliteit toont en tegelijkertijd mijn creatieve kant benadrukt.

Ik heb daarna de layout van mijn portfolio onderzocht en verschillende schetsen en wireframes gemaakt. Vervolgens heb ik deze ontwerpen uitgewerkt in Figma. Tijdens dit proces heb ik meerdere iteratiesdoorlopen, waarbij ik mijn designkeuzes moest aanpassen en vooral aandacht heb besteed aan wat er precies zichtbaar is wanneer je op een leeruitkomst klikt.

Hiervoor heb ik de vervolgpagina’s ontworpen en gekeken hoe ik deze zou opdelen. Zodra je op een leeruitkomst klikt, wordt het verdeeld in de verschillende opdrachten waaraan we werken: introweek, branding, mediacampagne, en OVP. Wanneer je op een opdracht klikt, zie je wat ik heb gemaakt in verband met die leeruitkomst.

Universiteit Utrecht

Usertest

Ik heb mijn ontwerp getest met Dennis. Ik vroeg hem om mijn opdracht voor de leeruitkomst 'Interactive Media' te vinden. Al snel merkte ik dat Dennis voornamelijk op de knoppen zelf klikte in plaats van op de link binnen de knop. Toen hij op 'Leeruitkomst 1: Interactive Media' klikte, verschenen er drie nieuwe knoppen: 'Introweek', 'Branding', en 'Mediacampagne'. Dennis viel op dat de eerste knop al zwart gekleurd was, terwijl de andere twee knoppen pas zwart werden als je er met de muis overheen ging. Hier zat geen specifieke reden achter.

Dennis moest vervolgens een van de drie knoppen kiezen om een van mijn opdrachten te bekijken. Achteraf vond ik dit zelf overbodig. Bovendien viel het mij op dat ik bij de opdracht 'Branding' geen product had gemaakt dat relevant was voor 'Interactive Media'. De aanwezigheid van die knop had dus geen nut.

 

Daarnaast heb ik drie studenten dezelfde vragen gesteld. Twee van hen merkten op dat je, als je vanuit een leeruitkomst naar een andere leeruitkomst wilde, helemaal terug moest naar de homepage. Om het makkelijker te maken voor de gebruiker heb ik een dropdownmenu toegevoegd, zodat je vanuit een leeruitkomst direct naar de volgende leeruitkomst kunt klikken. Bovendien heb ik op de pagina zelf kopjes toegevoegd om de opdrachten overzichtelijker te maken.

Aanpassingen:

Om de gebruiksvriendelijkheid te verbeteren, heb ik de volgende wijzigingen aangebracht:

1. Klikbaarheid van knoppen: Ik heb ervoor gezorgd dat je direct op de knoppen zelf kunt klikken en niet per se op de link binnen de knop.

2. Verwijdering van overbodige knoppen: De drie knoppen voor 'Introweek', 'Branding', en 'Mediacampagne' heb ik verwijderd. Doordat sommige knoppen geen functie hadden en nergens naartoe zouden leiden.

3. Toevoeging van een dropdownmenu: Ik heb een dropdownmenu toegevoegd, zodat je vanuit een leeruitkomst direct naar de volgende leeruitkomst kunt klikken.

4. Opdrachten overzichtelijker gemaakt: Ik heb de opdrachten onder kopjes bij elke leeruitkomst geplaatst, zodat het voor de gebruiker zo eenvoudig mogelijk is om de gewenste informatie te vinden.

Conclusie

Tijdens een gebruikerstest bleek dat de navigatie verwarrend was en sommige knoppen overbodig waren. Daarom heb ik de knoppen direct klikbaar gemaakt, overbodige knoppen verwijderd en de opdrachten overzichtelijk onder elke leeruitkomst geplaatst. Deze aanpassingen verbeteren de gebruiksvriendelijkheid aanzienlijk.

Dit kun je zien in mijn figma voor versie 1 en versie 2

Versie 1

Versie 2

Dropdown

GOOD & BAD UX

Voorwoord

De opdracht draaide om het testen en analyseren van user experiences (UX), waarbij zowel goede als slechte voorbeelden werden onderzocht. We ontdekten dat goede UX gekenmerkt wordt door heldere navigatie, beknopte informatie en een visueel aantrekkelijk ontwerp. Deze inzichten gebruikten we om onze eigen ontwerpen te verbeteren voor een betere gebruikerservaring.

Oriënteren

Ik heb twee websites bezocht en de gebruikerservaring van de websites geëvalueerd: https://cantunsee.space/ en https://userinyerface.com/

Ik heb een analyse uitgevoerd van beide websites met een focus op het identificeren van elementen van goed en slecht ontwerp. Hierbij heb ik gelet op de beeldresolutie, de uitlijning van lijnen, de afstand tussen elementen, het gebruik van kleurtinten, de grootte van pictogrammen, de keuze van achtergrondkleuren, het gebruik van randradius en de manier waarop tekst werd weergegeven.

Ik heb de heuristische evaluatiemethode gebruikt om de bruikbaarheid van digitale interfaces te beoordelen, waarbij ik me richtte op principes zoals Nielsen's 10 Usability Heuristics. Dit hielp bij het identificeren van problemen en het bieden van aanbevelingen. De voordelen zijn onder meer vroege probleemdetectie, kosteneffectiviteit en waardevolle expertinzichten. Dit leidt tot iteratieve ontwerpverbeteringen en een gebruiksvriendelijker product.

Enquete Enquete

Bij het vinden van good en bad ux voorbeelden heb ik mij ook op de aangegeven elementen opgelet. Hierbij heb ik een kledingwebsite gevonden die een verbetering kon gebruiken in zijn user experience. Het kleurenschema was chaotisch, met kleuren die in elkaar overliepen en een gebrek aan helderheid veroorzaakten. Overvloedige knoppen en een drukke achtergrond maakten de site rommelig en moeilijk te navigeren. Knoppen voor 'Women' en 'Men' leidden naar dezelfde bestemming, wat onnodige visuele ruis creëerde. De uitgerekte zoekbalk nam te veel schermruimte in beslag en verstoorde de visuele harmonie. De achtergrond achter de tekst verminderde de leesbaarheid aanzienlijk. De toepassing van randradius was willekeurig en inconsistent met de esthetiek van de site. Deze problemen maakten de website minder professioneel en moeilijker te gebruiken. Ondanks het potentieel van de website, zijn er meerdere verbeterpunten nodig. Het aanpakken van deze problemen zou de bruikbaarheid en aantrekkelijkheid voor gebruikers en het bedrijf verbeteren.

Om deze problemen aan te pakken, heb ik diverse aanpassingen doorgevoerd. Ik zorgde ervoor dat de kleuren samenhang vertoonden en niet meer in elkaar overliepen. Overbodige knoppen met een drukke achtergrond heb ik verwijderd om de site minder rommelig te maken. Door de drukke achtergrond te verwijderen, heb ik de leesbaarheid van de tekst verbeterd. Daarnaast heb ik gezorgd voor een consistente toepassing van de randradius, passend bij de esthetiek van de site. Deze verbeteringen en aanpassingen heb ik vervolgens in Figmatoegepast en ontworpen.

Versie 1

Versie 2

Afbeelding 1 Afbeelding 2 Afbeelding 3

Usertest

Na het implementeren van deze wijzigingen heb ik de nieuwe ontwerpen getest met mijn groepsgenoot. Uit deze tests bleek dat de gebruikerstest gericht was op het evalueren van de bruikbaarheid en gebruikerservaring van de verbeterde elementen op de kledingwebsite. De test omvatte het zoeken en bekijken van een specifiek product.

Gebruikers gaven aan dat ze het nieuwe kleurenschema als zeer prettig en overzichtelijk ervaren. De kleuren zijn harmonieus op elkaar afgestemd, wat zorgt voor een rustige uitstraling. De knoppen zijn nu duidelijk zichtbaar en gemakkelijk te vinden, wat de navigatie op de site aanzienlijk vereenvoudigt. Daarnaast is de leesbaarheid van de tekst sterk verbeterd door het verwijderen van een drukke achtergrond, waardoor de tekst nu goed leesbaar is en er echt uitspringt.

Over het algemeen verliepen de taken tijdens de test soepel en zonder problemen. De doorgevoerde verbeteringen hebben de algehele gebruikerservaring aanzienlijk verbeterd, waardoor de website nu veel gebruiksvriendelijker en aantrekkelijker is geworden.

Conclusie

Gebruikerstest op verbeterde kledingwebsite toonde positieve feedback na aanpassingen aan kleurenschema, knoppen en tekstleesbaarheid. Gebruikers ervaren het nieuwe design als overzichtelijk en navigatievriendelijk, waardoor de algehele gebruikerservaring significant verbeterd is.

PAPER PROTOTYPE GAME

Voorwoord

Bij deze opdracht hebben we een papieren prototype van een spel gemaakt op de tafel, gebruikmakend van materialen die gemakkelijk te vinden zijn.

Oriënteren

Al snel besloten we gezamenlijk om er een bordspel van te maken, waarbij we het concept van "Truth or Dare" als uitgangspunt namen om het spel een duidelijk doel te geven. Voordat we van start gingen, hebben we grondig overlegd over de aanpak. We hebben besloten om de kaarten te verdelen in drie categorieën: makkelijk, gemiddeld en moeilijk. Eerder overwogen we om deze drie stapels apart te houden, elk gekoppeld aan een kleur die het niveau van de uitdaging aangeeft. Echter, ik kwam met het voorstel om alle kaarten samen te voegen tot één stapel, om de spanning te verhogen en spelers niet te laten weten welke kaart ze zouden trekken.

Om het spel wat complexer te maken, hebben we besloten om een "vrijstelling" toe te voegen. We bedachten dat spelers geld konden inzetten als ze een uitdaging niet wilden uitvoeren. We hebben bedragen aan elke kaart toegekend, waarbij het bedrag afhankelijk was van de moeilijkheidsgraad van de uitdaging. Zo ontstond ons uitdagende "Truth or Dare"-bordspel, genaamd "Master of Embarrassment".

"Master of Embarrassment" is een bordspel waarbij spelers uitdagingen moeten aangaan om de finish te bereiken. Het doel is om als eerste de finishlijn te bereiken. Wanneer je aan de beurt bent, moet je een kaart uit het dek pakken. Het dek bevat een uitdaging en informatie over hoeveel stappen je moet zetten en hoeveel geld je verdient. Het verdiende geld kun je gebruiken om een uitdaging over te slaan.

Enquete
Enquete Enquete

Usertest

Tijdens onze usertest hebben we waardevolle feedback verzameld over ons paper prototype. Een docent die ons spel speelde, benadrukte dat we een innovatief spel hebben gecreëerd dat zeer vermakelijk is voor grote groepen mensen. Een van de suggesties die we ontvingen, was om het speelbord groter te maken, wat suggereert dat er een vraag is naar meer ruimte en interactie binnen het spel. Daarnaast hebben we ons spel laten testen door studenten met verschillende achtergronden en interesses, die snel de regels leerden en volledig opgingen in het spelplezier. Dit duidt op een brede aantrekkingskracht en toegankelijkheid van ons concept.

Conclusie

Als team hebben we de uitdaging aangenomen om een bordspel te ontwikkelen, gebaseerd op "Truth or Dare", met als resultaat het intrigerende spel "Master of Embarrassment". Onze creatieve aanpak om een papieren prototype te maken op tafel, met alledaagse materialen, heeft ons geholpen om een dynamisch en uitdagend spelconcept te realiseren.