Ontwerpfase
Inhoud
-
Lo-fi prototype schetsen.
-
Mid-fi prototype schetsen.
-
Visuele stylen
-
Moodboard
-
Keuze in vormgeving
-
Hi-fi prototype schetsen.
Competenties die aan bod komen
Verbeelden en uitwerken
Emphatie
Samenwerken
Proffesionaliseren
Ideevorming
Lo-fi prototype
Nu het onderzoek klaar is en het basisconcept is bedacht ga ik de volgende stap zetten door het maken van de Lo-fi prototype schermen. Rene van der Eijk en Mathijs van Meerkerk waren het hier mee eens. Ze willen graag dat het project zo vlot mogelijk verloopt, zodat er aan het einde genoeg tijd is voor aanpassingen.
​
Binnenkort mag ik mijn concept gaan testen bij de doelgroep. Ik wil mijn concept idee verbeelden, zodat ik het uit kan leggen aan de doelgroep. Daarnaast wil ik feedback vragen aan de werknemers over de manier van vraagstellingen in de cursus.
​
Normaal gesproken maak je eerst schetsen maar door de tijdsdruk (planning van de interviews) maak ik de Lo-fi schetsen in Figma. Op deze manier kan ik mijn prototype beter presenteren. De volgende afspraak met de doelgroep gaat namelijk over het Hi-fi prototype. Het is daarom fijn om alvast feedback te verzamelen van de doelgroep op mijn eerste versie van het prototype.
%20handelen%20in%20situaties%20(visueel%20verhaal%20en%20meerkeuze%20actie.png)
%20handelen%20in%20situaties%20(visueel%20verhaal%20en%20meerkeuze%20actie.png)
%20handelen%20in%20situaties%20(visueel%20verhaal%20en%20meerkeuze%20actie.png)
%20handelen%20in%20situaties%20(visueel%20verhaal%20en%20meerkeuze%20actie.png)
1
2
3
4
Figuur 16: Lo-fi prototype schermen uit Figma, onderwerp seksisme. 1: Meerkeuzevraag met uitgebeelde situatie. 2:Tip hoe je beter met slachtoffers van seksisme kan omgaan. 3:Pagina om vragen te stellen. 4:Ja/ nee vraag pop up.
Bij het ontwerpen van de Lo-fi schermen ben ik begonnen met mijn basisidee. Dat is het uitbeelden van situaties en daarna tips geven over wat diegene beter had kunnen doen (zie figuur 16 hierboven). Als voorbeeld heb ik hierbij het thema seksisme gebruikt. Voor alle schermen heb ik dezelfde opzet aangehouden. Elk scherm heeft onder in dezelfde button, ik pas deze tekst dan telkens aan. Ik wil vooral veel gaan werken met beelden en minder met teksten. Omdat veel werknemers laaggeletterd zijn of slecht kunnen lezen. Bij de ja/ nee vragen let ik op het verschil tussen kleur in de buttons. Dit heb ik geleerd op school tijdens de Interaction design lessen.
​
Verder heb ik gewerkt met verschillende vraagstijlen. Ik heb invulvragen over opmerkingen, vragen en delen waar de werknemers hun mening in kunnen vullen. Ik heb elk vak zo groot gemaakt als de inhoud die erin moet komen.
De opmerking wolkjes zijn bijvoorbeeld kleiner dan de uitleg vlakken. Bij de opmerkingen opdracht leek het mij leuk om geen standaard vak te gebruiken, maar een praatwolkje (zie figuur 17 hieronder). Zo communiceer je doormiddel van beeld wat de bedoeling is van de opdracht.
​
Voor de uitleg wilde ik geen standaard lange teksten gebruiken. Omdat dit lastig is voor de doelgroep om te kunnen lezen en begrijpen. Hier kam mijn idee op voor korte uitleg video’s (zie figuur 17 hieronder). Aan het begin van de cursus (de beginpagina) heb ik een A en B versie gemaakt. Een met een positieve zin, een button om gelijk te beginnen en een met een keuzemogelijkheid, voor een bepaald onderdeel. Waarbij je kan kiezen welk thema je als eerste wilt doornemen (zie figuur 17 hieronder). Al deze schermen ga ik testen met de doelgroep doormiddel van een A/B/C test en kijken welke concept onderdelen passend zijn.
​
Lees hier verder over de A/B/C Lo-fi prototype test.
5
6
7
8
Figuur 17: Lo-fi prototype schermen uit Figma, 5:Uitleg video. 6:Opmerkingen delen. 7:Versie A van beginscherm. 8:Versie B van beginscherm.
Na het maken van het Lo-fi prototype heb ik deze laten beoordelen door Rene van der Eijk en Mathijs van Meerkerk . Het is altijd fijn om feedback te krijgen om erachter te komen wat je nog beter kan doen, om tot een goed prototype te komen. Dit zijn de verbeterpunten die ik te horen kreeg: Ga in de cursus niet in op seksisme en andere heftige onderwerpen. Rene van der Eijk (mede-eigenaar) kwam hiermee omdat wij de cursus verkopen aan de technische bedrijven. We kunnen er niet bij zijn om alles in goed banen te leiden. Alles vindt online plaats en met zulke heftige onderwerpen kunnen er heftige emoties ontstaan.
Maak de teksten zo kort mogelijk. De doelgroep is laaggelettert (kan niet goed lezen). Waardoor de vragen korter moeten en minder lastige woorden kunnen bevatten (zie figuur 18 hieronder). Ik had ook nog een tool beacht waarmee je feedback van je af kon zetten en persoonlijk aan kon trekken (zie figuur 18 hieronder). Dit begrepen Rene van der Eijk en Mathijs van Meerkerk met deze manier van ontwerpen niet. Daarom kan ik deze nog aanpassen (zie Mid-fi prototype hieronder). Zodat de user experience van de app beter wordt.
Resultaat en reflectie
Het was fijn om een eerste uitwerking te maken. Zo kan je zien hoe je idee eruitziet in een design. Ook heb ik over meerdere dingen na kunnen denken, zoals de plaatsing van elementen en het consistent laten terugkomen van teksten/beelden. Er staat nu een mooie basis voor een vervolg prototype. De test zal ook makkelijker verlopen nu ik dingen kan laten zien aan de doelgroep en om hun mening kan vragen.
​
Ik ben erg blij met het resultaat van de lo-fi schermen. Mijn ideeën kwamen hiermee helemaal tot leven en het is een mooi begin om tot een goed eindprototype te komen. Normaal gezien maak je eerst schetsen op papier. Dit zou ik in de toekomst ook eerst doen, als er geen tijdsdruk is. Als je in een bedrijf werkt heb je soms deadlines en moet je flexibel zijn. Dat heb ik hier wel van geleerd.
9
10
Figuur 18: Lo-fi prototype schermen uit Figma, 9: Feedback opdracht, slepen naar werkgerelateerd/ persoonlijk. 10: Uitleg tekst, voorscherm thema.
Bronnen en bijlagen
-
Bekijk hier alle Figma Lo-fi schermen die ik ontworpen heb.
Mid-fi prototype
Naar aanleiding van het Lo-fi prototype, waarop ik veel feedback kreeg, heb ik deze Mid-fi prototype schermen gemaakt. Alle feedback heb ik hierin verwerkt. Na de interviews met de doelgroep is er een duidelijkere richting gekomen naar een soort prototype. Het moet visueel duidelijk zijn, weinig/ geen lastige tekst bevatten en eenvoudig te beantwoorden zijn.
​
Wil je lezen over de A/B/C Lo-fi prototype test klik hier.
​
Mijn taak is om met dit Mid-fi prototype te laten zien, hoe ik denk dat de app eruit moet komen te zien. Omdat het een Mid-fi versie is en geen Hi-fi, heb ik ervoor gekozen om het zwart-wit te laten, maar wel sprekende illustraties toe te voegen. Dit maakt het prototype ten opzichte van het Lo-fi prototype een stuk sprekender. Verder wilde ik graag uittesten hoe ik korte teksten/opdrachten zo duidelijk mogelijk kon vormgeven. Hierbij is voor mij de clean-heid in de vormgeving erg belangrijk.
11
12
13
14
Figuur 19: Mid-fi prototype schermen uit Figma, 11: Beginscherm app. 12: Voorvragen, vooraf aan thema. 13: Selectie vraag. 14: Uitleg video thema.
Het voorgaande prototype heb ik gebruikt om dit (Mid-fi) prototype vorm te geven. Ik kreeg van Rene van der Eijk de opdracht om de verschillende opdracht vormen verder uit te werken, zodat er meer overzicht ontstaat. Ik heb ervoor gekozen om alle opdracht vormen, per scherm naast elkaar te plaatsen. Omdat het een Mid-fi ontwerp is wilde ik een vaste lay-out meegeven aan de schermen. Deze vaste lay-out bestond uit:
-Onderaan een lange button.
-Bovenaan een korte titel (dikgedrukt), zodat het gelijk duidelijk is voor de werknemers die dyslexie hebben of slecht Nederlands kunnen. Kortom zo kort en duidelijk mogelijk communiceren met tekst.
-Bij elke titel/tekst een microfoon icoon, waar je de tekst kan voor laten lezen, om het beter te kunnen begrijpen.
-Voor bij de video’s/illustraties boven de vragen, heb ik een vaste tijdsbalk ontworpen.
-Linkjes naar uitleg, op verschillende schermen heb je zinnen met een underline, als je hier op klikt krijg je extra uitleg.
-Bovenaan aan elk opdrachten scherm zie je bolletjes, die de voortgang aangeven.
Met deze basis lay-out kan ik alle schermen gaan invullen met verschillende opdrachten.
​
Daarnaast ben ik opzoek gegaan naar een illustratie stijl die in zwart/wit toch emoties kan overbrengen. Tijdens het zoeken op internet heb ik deze, Notion illustratie stijl gevonden (Amato, 2022).
Dit geeft heel goed de clean style weer, die ik graag wilde creëren. Mochten Rene en Mathijs deze illustraties tof vinden, kunnen zij deze aankopen. In het Hi-fi ontwerp wil ik deze omzetten in kleur.
Een aantal vraag soorten, zoals invul zinnen (zie figuur 20, scherm 16 hieronder), emotie sliders, feedback slider (zie figuur 20, scherm 17 hieronder) en matrix of importance (zie figuur 20, scherm 18 hieronder)heb ik toegevoegd om te zorgen dat de werknemers beter hun mening of gevoel kunnen uiten tijdens het invullen van de opdrachten. Het is voor de MBO-werknemers erg lastig om vanuit zichzelf dingen te uiten/vertellen. Met de matrix of importance kunnen de werknemers na afloop aangeven wanneer bepaalde dingen speelde (nu of vroeger). Dat is handig om te weten als je het probleem wilt oplossen. Bij de feedback slider kan je feedback van jouw persoonlijk afduwen naar werk gerelateerd.
​
Ook heb ik bedacht om voor elk thema een uitleg video (zie figuur 19, scherm 14 hierboven), voor te schotelen. Zodat de werknemers begrijpen wat ze gaan leren/behandelen in dat onderdeel. Daarnaast wil ik ook doormiddel van illustraties emoties overbrengen/losmaken (zie figuur 19, scherm 13 hierboven). Bijvoorbeeld bij “een vraag” beeld ik twee mensen af die roddelen. Dan vraag ik daarna “hoe zou jij je voelen als dit je overkomt?” (zie figuur 20, scherm 15 hieronder). Hierdoor zorg je dat de werknemers hun emoties kunnen delen.
15
16
17
18
Figuur 20: Mid-fi prototype schermen uit Figma, 15: Emotie vraag over roddelen. 16: Invulvraag. 17: Feedback slider. 18: Matrix of importance.
Het resultaat is een vaste lay-out en samenstelling van opdracht vormen. Er staat nu een goede basis die ik verder vorm kan gaan geven als Hi-fi prototype in kleur. Na het ontwerpen heb ik de tweede versie van het prototype laten beoordelen voor feedback, aan Rene van der Eijk en Mathijs van Meerkerk. Ze waren erg positief over de uitwerking van het Lo-fi prototype. Het uitbeelden van situaties doormiddel van illustraties vonden ze een leuk idee. De illustraties verduidelijken de tekst heel erg. Daarnaast vonden ze de nieuwe uitwerking van de feedback slider en emotie slider goed gevonden. Om een goed overzicht te krijgen van de app, mag ik de thema’s en opdrachten meer gaan ordenen, in het volgende prototype.
Tijdens het maken van het Mid-fi prototype heb ik echt geleerd om meer structuur in mijn ontwerpen toe te voegen. Daarmee bedoel ik het maken van een vaste lay-out. Hier goed over na denken, je moet echt kijken wat de MBO-werknemers kan helpen, om de opdrachten beter te begrijpen. Met de vaste lay-out heb ik mooie schermen kunnen vormgeven, met daarin verschillende opdracht vormen. Door ook over de werking van illustraties na te denken, is het ontwerp meer gaan leven. Al mijn onderzoek en kennis is samengekomen in dit ontwerp. Voortaan zou ik ook nog (mocht hier de tijd voor zijn) schetsen op papier maken. Zodat je vrijer kan denken, maar in dit geval was dit de beste manier van vormgeven.
Bronnen en bijlagen
-
Amato, M. (2022). Beautiful Notion-style illustrations. notioly.com. Retrieved December 21, 2022, from https://notioly.com
-
Klik hier voor inspiratie opdracht vormen/schermen Irene.
-
Klik hier om alle prototype schermen te bekijken, uit Figma.
3 Visuele stylen
Tijdens het bespreken van de verschillende elementen met Rene en Mathijs (die ik tijdens het eerste gesprek met de doelgroep ging testen), werd er aan mij gevraagd om nog een paar verschillende stijlen te maken. Mocht ik in tijdsnood komen mag ik ook inspiratie voorbeelden gebruiken/testen. Maar omdat ik al inspiratie had opgedaan via Pinterest (zie bijlagen), heb ik zelf 3 visuals gemaakt.
Om de voorkeur voor een bepaalde vormgeving te kunnen testen bij de doelgroep. In totaal heb ik 2 keer 2 afspraken. Zo kan ik bij de tweede afspraak mijn hi-fi prototype laten testen, doormiddel van een user-test.
​
Het is mijn taak om verschillende stylen te presenteren. Hiervoor gebruik ik dezelfde lay-out, zodat er alleen beoordeeld kan worden op de vormgeving. Als je namelijk meerdere dingen aanpast kan de mening van de werknemer gebaseerd zijn op andere factoren dan de vormgeving.
​
Eerder heeft Rene aan mij een voorbeeld website (The 2B collective, 2022) laten zien, die hij een goede inspiratie vond voor de app. Hiervan heb ik een visual gemaakt (zie figuur 27 hieronder). De andere 2 visuals heb ik gebaseerd op mijn kleurenonderzoek (zie bijlagen). Uit dit onderzoek kwam dat de kleur blauw het meest gebruikt wordt, omdat het vertrouwen uitstraalt. Deze kleur is wel degelijk en is niet meer vernieuwend. De kleur groen daarentegen wordt veel gebruikt voor nieuwe, groene en sociale bedrijven.
Figuur 27: 3 style visuals.
Naast de kleuren heb ik gelet op de manier van illustreren afbeelden. De groene visual heb ik een illustratie gegeven van een high five. Om het enthousiasme van het samenwerken uit te beelden. Bij de tweede visual heb ik een afbeelding gebruikt van een jongen en meisje die elkaar een high five geven. Ik wil graag kijken wat beter werkt, beeld of illustratie?
​
Het resultaat zijn 3 goed uitgedachte en vormgegeven visuals. Elke visual zou uitgewerkt kunnen worden tot een mooi app design. Ze zijn allemaal verschillend waardoor de werknemers genoeg keuze hebben.
Naar mijn mening straalt de groene visual positiviteit uit en de kleur past ook goed bij het thema sociale veiligheid. De Visuals heb ik vervolgens getest bij de doelgroep.
Wil je lezen over de visual design test klik hier.
​
Ik heb geleerd dat dingen soms anders lopen dan gepland. 2 dagen voor de test met de doelgroep, werd er mij gevraagd om verschillende visuals te maken. Normaal gezien maak je eerst een moodboard. Maar door de tijdsnood heb ik dit nu omgedraaid.
Bronnen en bijlagen
-
The 2B collective. (2022). Accelerate to a sustainable future through gamification. the2bcollective.com. Retrieved January 3, 2023, from https://www.the2bcollective.com/en/
-
Bekijk hier het kleurenonderzoek.
-
Bekijk hier mijn Pinterest bord.
-
​Lees hier het gespreksverslag over de vormgeving.
Moodboards
Om het Hi-prototype vorm te kunnen geven is er een consistente vormgeving nodig. Hiervoor heb ik inspiratie opgedaan via Pinterest en voorbeeld visuals gemaakt, die ik heb getest bij de doelgroep. Lees hier verder over de 3 visuals.
​
Voor een duidelijkere verbeelding van de verschillende stylen ga ik moodboards maken. Met daarin voorbeelden van buttons, teksten en illustraties. Hiermee kan ik presenteren hoe de vormgeving er in de gehele app eruit komt te zien. Ik wil bij elk moodboard dezelfde opbouw aanhouden, zodat de kleur en style verschillen duidelijker naar voren komen.
Ik begon met het groene moodboard (zie figuur 28 hieronder). Mijn doel voor deze vormgeving was het naar voren laten komen van een positieve sfeer. De kleur groen op zichzelf is al positief en activerend. Hierbij heb ik illustraties gezocht van mensen die samen werken. Er wordt hierin veel line art gebruikt in combinatie met groene vlakken. Verder wilde ik een cleane lay-out aanhouden. Waarin weinig afleidende teksten in voorkomen. Mijn idee is om net als in het moodboard een opvallende grote groene button te gebruiken. Deze valt op en het is een vormt een duidelijke flow door de app. Daarnaast wil ik gebruik maken van korte titels met als ondersteuning illustraties.
Figuur 28: Groene moodboard.
Het blauwe moodboard (zie figuur 29 hieronder) geeft een vlotte, moderne style weer. Door de opvallende blauwe kleurtonen krijgt de gebruiker meer energie om de opdrachten te doorlopen. Ook de illustraties hebben een moderne twist. Het wordt meer een flat design, door de vlak vullende illustraties. Dit zorgt ervoor dat iedere werknemers zich kan herkennen in de beelden. De buttons en sliders die worden gebruikt in het moodboard hebben allemaal dezelfde look maar kunnen gebruikt worden voor verschillende doelen. Dit is een interessante insteek voor de app.
Figuur 29: Blauwe moodboard.
Het derde moodboard (zie figuur 30 hieronder) is geïnspireerd op (The 2B collective, 2022). Op de website van the 2B Collective zie je veel achtergronden waar verschillende tinten groen samenkomen. Als accent kleur wordt voornamelijk geel gebruikt. In het bord zie je ook een aantal iconen terugkomen, dit kan ook mooi geïmplementeerd worden in onze app. In dit moodboard heb ik ervoor gekozen om beelden terug te laten komen van enthousiaste werknemers. Zodat je de gebruikers aanspreekt om de cursus af te ronden, om een fijne werkplek te creëren.
Figuur 30: Groen, gele moodboard, geïnspireerd op (The 2B collective, 2022).
De moodboards heb ik gepresenteerd aan Rene, Erwin (graphic/visual design head) en Mathijs. Ze vonden het mooi dat je op deze manier kan zien wat we bij welke style zouden kunnen toepassen in de app.
Erwin gaf nog wat extra feedback op de groene visual, omdat hij kleuren blind is komen deze kleuren wat donker over. Ik kan nog verder experimenteren naar andere groentinten. De gele accent kleur uit het derde moodboard, vond hij goed om te gebruiken voor bijvoorbeeld meldingen. Rene vulde hierbij aan dat geel ook negatieve betekenissen heeft. Daarom ga ik hiervoor opzoek naar verschillende kleuren combinaties.
De uiteindelijke vormgeving van de app, moet makkelijk aanpasbaar zijn. Omdat deze ook gebruikt gaat worden voor de andere technische MKB-idee app, leren leren.
Door de tijdsdruk heb ik eerst de 3 visuals gemaakt en deze getest bij de doelgroep. Normaal gezien maak je na het opdoen van inspiratie op (bijvoorbeeld Pinterest) een moodboard. Deze verwerk je dan later in een product/scherm. Ik ben trots dat het mij is gelukt om binnen de tijd 3 passende vormgevings stylen samen te stellen. Uiteindelijk is de groene visual gekozen door het overgrote deel van de testpersonen uit de doelgroep. Lees hier verder over de 3 visuals.
Bronnen en bijlagen
-
The 2B collective. (2022). Accelerate to a sustainable future through gamification. the2bcollective.com. Retrieved January 3, 2023, from https://www.the2bcollective.com/en/
-
Dribble. (2022). Explore the world’s leading design portfolios. dribble.com. Retrieved January 6, 2023, from https://dribbble.com
-
Freepik. (2022). All the assets you need, in one place. freepik.com. Retrieved January 6, 2023, from https://www.freepik.com
-
​Lees hier het gespreksverslag over de vormgeving.
Keuze in vormgeving
Na de meeting over de moodboards/verschillende vormgeef stijlen, ben ik begonnen met het combineren met verschillende kleuren en vormen. Hiermee wil ik graag verschillende opties creëren, die ik kan laten zien aan Rene, Erwin en Mathijs. Zodat de uiteindelijke keuze voor een vaste huisstijl soepeler kan verlopen.
​
Bij elk ontwerp gebruik ik dezelfde lay-out schermen. Mijn taak is om met de gekregen feedback (lees het stukje over moodboards hierboven) nieuwe en betere vormgevingen te maken voor de app. Ik ga aan een stuk verschillende stijlen ontwerpen. Doordat je dit consistent doet, zullen er betere versies ontstaan, gedurende het proces.
Hieronder zie je in figuur 31 tm 35 de verschillende stijlen die ik heb uitgeprobeerd. Als ik kijk naar de wensen van de doelgroep, passen de rustige ontwerpen (waarbij een kleur element voorkomt) het beste bij de volgende principes:
-Het ontwerp moet een duidelijke structuur hebben.
-Er moet zo min mogelijk afleiding zijn voor de werknemers in de app.
-De app moet positiviteit uitstralen.
​
Deze ontwerpen heb ik voorgelegd aan Rene, Erwin en Mathijs voor feedback. Ze waren het meest enthousiast over de 2e vormgeef stijl (figuur 32). Deze heeft alle bovenstaande punten in zich. Ook heeft het wat weg van het voorbeeld dat Erwin mij heeft gestuurd (zie gespreksverslag in bijlagen). De eerste stijl (figuur 31) vonden ze te somber, omdat er alleen zwart/wit werd gebruikt. De anderen stijlen vonden ze leuk, maar ze kozen toch voor (figuur 32).
Figuur 31: Uitgewerkte 1e vormgeef stijl.
Figuur 32: Uitgewerkte 2e vormgeef stijl.
Figuur 33: Uitgewerkte 3e vormgeef stijl.
Figuur 34: Uitgewerkte 4e vormgeef stijl.
Figuur 35: Uitgewerkte 5e vormgeef stijl.
De gekozen stijl ben ik verder gaan uitwerken. In mijn Pinterest bord had ik onderstaand voorbeeld (zie figuur 36) opgeslagen. Dit sluit mooi aan bij mijn idee voor de illustraties in de app. Ik heb in Illustrator een illustratie uitgewerkt in deze stijl. Het is een flatdesign met een moderne twist. Deze stijl heb ik later gepresenteerd aan Rene en Erwin voor feedback. Ze vonden het idee voor een flat design goed. Omdat iedereen zich kan herkennen in de illustraties. Wel vond Rene de poppetjes een beetje slordig en gek van vorm.
Voor het zoeken naar flat design illustraties kreeg ik de gegevens van (Envato, 2022). Dit is een beeldbank waar Organiq een abonnement op heeft. Hier heb ik illustraties gevonden die beter aansluiten bij het project (zie figuur 37 onderaan dit stuk).
Figuur 36: (Cardenas, 2022) inspiratie beeld en mijn Figma uitwerkingen (experiment met illustraties). (Zie in bijlagen hoe ik de illustraties heb gemaakt).
Nu de vormgeving en illustraties zijn goedgekeurd, ben ik aan de slag gegaan met het vertalen van de Mid-fi schetsen naar Hi-fi schetsen. Als tussenstap heb ik eerst gekeken op welke manier ik de kleurelementen en illustraties ga gebruiken (zie figuur 37 hieronder). Dit zal de basis vormen tijdens het maken van het gehele Hi-fi prototype.
​
Het resultaat is een passende vormgeving, die ik consistent kan doorvoeren in het Hi-fi prototype. De stijl straalt positiviteit uit en is rustig/clean. Als houvast tijdens het ontwerpen heb ik ook een styleguide gemaakt in Figma (zie bijlagen).
Tijdens de zoektocht naar de juiste vormgeving heb ik veel gehad aan de feedback van Rene en Erwin. Ik kreeg van Rene het compliment dat ik binnen een korte tijd veel verschillende (goed passende) vormgeving stijlen had ontworpen. Dit vond ik een erg mooi compliment. Aan het begin vond ik het spannend, of ik de feedback wel goed genoeg kon vertalen in een ontwerp. Na afloop ben ik erg trots op het uiteindelijke design. Het is origineel en past goed bij het doel van de cursus: “een fijnere en veilige sociale omgeving creëren op de werkvloer”.
Figuur 37: Uitwerkingen van de definitieve vormgeving in schermen.
Bronnen en bijlagen
-
​Cardenas, S. (2022). Meditation Mobile App. dribbble.com. Retrieved January 7, 2023, from https://dribbble.com/shots/11751491-Meditation-Mobile-App
-
Lees hier het gespreksverslag over de vormgeving.
-
Lees hier het gespreksverslag over prototype, vormgeving en illustratie stijl.
-
Bekijk hier de styleguide.
-
Zie hier alle uitgewerkte vormgeving's stijlen.
-
Bekijk hier de vertaling van illustraties in Illustrator.
-
Envato. (2022). The unlimited creative subscription. elements.envato.com. Retrieved January 7, 2023, from https://elements.envato.com
Hi-fi prototype
Na het doen van onderzoek, testen bij de doelgroep en het maken van een concept dat aansluit bij de vraag: “Hoe zorgen we ervoor dat de technische MBO-werknemers zich sociaal veilig voelen op hun werkplek?” ben ik aangekomen bij het maken van een eindontwerp. Het Hi-fi prototype, een design voor de uiteindelijke cursus app.
Mijn taak is om in dit ontwerp rekening te houden met de wensen van de doelgroep en de ontwerprichtlijnen (lees ook stukje over ontwerprichtlijnen). Ik wil een Hi-fi prototype maken waarin een duidelijke structuur zit, waarbij ik ook na wil denken over de verschillende lay-outs. Daarnaast is het belangrijk dat de app positiviteit, vertrouwen en duidelijkheid uitstraalt. Het is mijn doel om de doelgroep te helpen een fijnere en sociaal veilige werkplek te creëren.
20
22
19
21
22
Figuur 28: Hi-fi prototype schermen uit Figma, 19: Beginscherm. 20: Inlogscherm. 21: Extra gegevens. 22: Video uitleg cursus.
Door het maken van het Mid-fi prototype had ik al een goede lay-out basis waar ik op verder kon borduren. Hieraan heb ik allereerst de kleuren uit de styleguide toegevoegd (zie styleguide in bijlagen). Wat mij meteen dwong om na te denken over het aangeven van de verschillende onderdelen/schermen. Ik heb ervoor gekozen om de begin en uitleg schermen altijd een groene achtergrond te gebruiken. Bij alle opdrachten is een witte achtergrond te zien. De buttons krijgen bij de groene achtergronden een witte kleur en bij de witte achtergrond een donkergroene kleur. Dit doe ik voor het contrast en voor een consistente plaatsing van de button, zodat gebruikers altijd de weg weten door de app.
​
Personalisatie
Daarnaast zie je hieronder bij (figuur 28, scherm 24) ook een pop up vlak. Deze manier van afbeelden gebruik ik voor de voorvragen. De antwoorden op deze vragen vormen uiteindelijk de thema’s die jij gaat doorlopen als werknemer. Als jij of je collega nog nooit vervelend zijn behandeld kan het zijn dat dit thema uit de cursus wordt gehaald. Zo wordt de app gepersonaliseerd op jou als werknemer.
Uitlegvideo's
In plaats van teksten heb ik in de app uitlegvideo’s toegevoegd. Omdat veel werknemers last hebben van beperkingen als ADD, Dyslexie of slecht de Nederlandse taal kunnen. Op deze manier hoeven zij niet met heel veel moeite de elle lange teksten door te lezen, maar kunnen ze de video’s bekijken. Hierboven in (figuur 28, scherm 22) zie je een uitlegvideo die gaat over de inhoud van de cursus. Hier zijn Mathijs en ik samen op gekomen omdat de managers van de technische bedrijven en de werknemers zelf, niet wisten wat sociale veiligheid inhield. Omdat hier de cursus hier over gaat, geven we hier aan het begin inzicht in.
​
Privacy
Een belangrijk onderdeel van de cursus is het beschermen van de werknemers. Zij geven in de cursus hun persoonlijke mening. Omdat dit voor hen al spannend is willen we hun antwoorden anoniem versturen naar de managers. Dit kunnen de developers coderen. Voor de managers is het idee om een dashboard te creëren waar zij alle resultaten kunnen bekijken, van hun werknemers. Eerst had ik het idee dat de werknemers hun antwoorden eerst konden bespreken met een vertrouwenspersoon. Maar dit is helaas niet goed realiseerbaar.
24
22
23
25
26
Figuur 28: Hi-fi prototype schermen uit Figma, 23: Cursus overzicht. 24: Voorvraag. 25: Voorpagina thema pesten. 26: Uitleg video thema pesten.
Taalgebruik
Uit mijn literatuuronderzoek en interviews bleek dat mensen met een MBO-1-2-3-4 niveau korte zinnen met eenvoudige woorden kunnen begrijpen (lees ook het stukje over literatuuronderzoek). Daarom heb ik in de app overal korte dikgedrukte uitleg bovenaan de schermen geplaatst (zie bijvoorbeeld figuur 28, scherm 23 hierboven. Daarnaast kunnen de werknemers via de linkjes (zie figuur 29, scherm 27) meer informatie krijgen of een vraag stellen.
​
Voortgang
Om de voorgang van de opdrachten bij te houden is steeds bovenaan een stappen balkje te zien (zie figuur 28, scherm 24 hierboven). Als je een vraag hebt beantwoord of een opdracht hebt gedaan wordt er een streepje ingekleurd. Dit zorgt ervoor dat de werknemers gemotiveerd blijven om door te gaan. Ook zie je in (figuur 28, scherm 23 hierboven) een voortgangsbalk staan, die over de voortgang van de gehele cursus gaat. Dit wordt aangegeven in weken, zodat duidelijker wordt in welke week je bent.
Opdrachtsvormen
Hieronder in (figuur 29) zie je een aantal verschillende opdrachtsvormen. In het eerste scherm (figuur 29, scherm 27) probeer ik doormiddel van een grappige illustratie de opdracht duidelijk te maken. Je ziet een mannetje met gewichten, waaronder staat: “wat zijn de zware momenten van de werkdag”. Dit is een invulvraag, deze vragen zijn fijn voor de werknemers omdat ze niet alle input zelf hoeven te leveren. De basis zin staat al en daar mogen zij hun ervaringen aan toe voegen. Bij (figuur 29, scherm 28) zie je een invulopdracht waarbij je opmerkingen in moet vullen die je hebt gehad. Hierbij heb ik gekozen van praatwolkjes als vorm in plaats van een saai vlak. Dit geeft een visueel ondersteunend beeld, waardoor de werknemers het beter zullen begrijpen. In (figuur 29, scherm 29) zie je een gevoelsopdracht. In de video wordt een situatie getoond, waarop de werknemer kan reageren. Zo creëer je medeleven en het vermogen om aan anderen te denken. Bij de laatste opdracht (figuur 29, scherm 30) kan je doormiddel van een slider aangeven hoe je je voelt. Als je verder naar de verdrietige smiley gaat, voel je je slecht. Het uitbeelden van de emotie maakt het makkelijker voor de gebruiker om de opdracht te begrijpen.
27
28
29
30
Figuur 29: Hi-fi prototype schermen uit Figma, 27: Invulvraag. 28: Opmerkingen vraag. 29: Video fragment, gevoelsvraag. 30: Stressbalk vraag.
Motivatie en beloningen
Het motiveren van de doelgroep is een van de belangrijkste dingen. Zonder motivatie ronden ze de cursus niet af. Om het afronden van de cursus te stimuleren heb ik verschillende motivatie boosters in het ontwerp verwerkt. Een daarvan is het behalen van medailles. Per twee thema’s die je afrondt krijg je een medaille (zie figuur 32, scherm 31 hieronder). Je begint bij brons en eindigt met goud. Dit zorgt voor een winnaars mentaliteit. De werknemers zullen graag alle medailles willen verzamelen, waardoor ze verder komen in de cursus. Aan het eind van elk thema krijgen ze ook een compliment (zie figuur 32, scherm 33). Dit zorgt voor meer zelfvertrouwen bij de doelgroep. In (figuur 32, scherm 34) is de eindbeker te zien. Deze komt gepaard met een certificaat, waarbij je officieel de cursus succesvol hebt afgerond. Dit geeft de werknemers een gevoel van succes en waardering. Al deze motivatie onderdelen heb ik samen met mijn begeleider Mathijs bedacht.
Events
In de cursus worden ook offline events georganiseerd. Waarin de werknemers bijvoorbeeld met het management in gesprek gaan over problemen waar zij tegen aan lopen. Aan het einde van de cursus vindt een teambuildingsactiviteit plaats. Waarbij de werknemers dichter bij elkaar kunnen komen, door samen opdrachten uit te voeren. In (figuur 32, scherm 32) kan je de weergave van zo’n event zien. Daarop staat informatie als tijd, datum en onderwerp van het desbetreffende event.
​
(lees ook het stukje over Hi-fi prototype user-test)
​
Gesprek met developer
Uiteindelijk zal mijn ontwerp gecodeerd gaan worden door de developers van Organiq. Daarom heb ik met hen een meeting gehad over de technische werking van de cursus app (zie bijlagen voor gespreksverslag).
32
22
31
33
34
Figuur 32: Hi-fi prototype schermen uit Figma, 31: behaalde zilveren medaille. 32: Agenda melding voor offline event. 33: Beloning einde thema. 34: Certificaat behaalde cursus.
Ik heb Leander (hoofd developer) mijn prototype laten zien in Figma. In het ontwerp zitten veel verschillende opdrachtsvormen, mijn vraag is of deze tools allemaal programmeerbaar zijn? Van Leander kreeg ik terug dat voor elke slider, invulvraag of sleepvraag een opzet is, deze kunnen dus gemaakt worden. Wel zijn de hoeken van sommige video’s afgerond, hier moet even naar gekeken worden. Ook met het verband dat als een video telkens een ander formaat heeft daar rekening mee gehouden moet worden, tijdens het filmen.
​
Om de app te kunnen bouwen heeft Leander nog de volgende dingen van mij nodig:
-Een duidelijke schermflow.
-Een styleguide met alle componenten en kleuren.
-Een mapje met alle beelden die in het prototype verwerkt zijn.
Deze onderdelen heb ik inmiddels aangeleverd.
Resultaat en reflectie
Het resultaat van mijn project is een goed doordacht prototype dat de doelgroep: MBO-werknemers helpt om een fijnere en sociaal veilige werkplek te creëren voor zichzelf. Er zitten helpende elementen in zoals voorbeeldvideo’s, illustraties en andere beeldende elementen. Beeld helpt de werknemers om de teksten te begrijpen. Daarnaast worden ze door de cursus heen aangemoedigd door: complimenten, medailles en een certificaat.
​
Ik ben erg trots op het eindresultaat. Mijn taak was om de werknemers sociaal veilig te laten voelen op de werkvloer. De cursus heeft alles in zich om dit te kunnen creëren voor de werknemers. Na grondig onderzoek en verschillende testen ben ik tot dit Hi-fi prototype gekomen. Aan het begin vond ik het lastig om dit onderwerp op een subtiele manier te behandelen, ik dacht meteen aan onderwerpen als seksisme en machtsmisbruik op de werkvloer. Toen Rene aangaf dat we deze onderwerpen niet in de cursus wilden verwerken vanwege de heftige lading van de serieuze thema’s, ben ik opzoek gegaan naar een andere oplossing. In de vormgeving heb ik mij helemaal uit mogen leven, waardoor het tot dit Hi-fi ontwerp is gekomen. Ik vond het een erg leuk project om te mogen leiden.