• Sera Meijer

Infotainment systeem voor ouders

Bijgewerkt op: 23 mei

Digital agency 'wearereasonablepeople' heeft ons de opdracht gegeven een infotainment systeem te ontwerpen waarin geen fysieke knoppen aanwezig zijn. Het ontwerpproces verdelen we in 3 iteraties. Ik werk in een team van 3 studenten, waarin ik het onderdeel Media Player op me neem en we na 10 weken de ontwerpvraag hebben beantwoord.


Onze opdrachtgever is het bureau “wearereasonablepeople”. Zij zijn een digital agency die digi- tale producten en diensten ontwikkelen. Ze werken voor verschillende soorten opdrachtgevers. Denk hier bijvoorbeeld aan: Gemeente Rotterdam, Philips, Lightyear en de RET.


Onze uitdaging is om zo efficiënt mogelijk de knoppen in het infotainment systeem te verwerken. De ontwerpvraag luidt: “Hoe kunnen we het infotainment system zo ontwerpen dat fysieke knoppen overbodig worden en de bestuurder alle functies op één plek kan bereiken, zonder dat er wordt ingeleverd op gebruikersvriendelijkheid?”.



Iteratie 1

We gingen van start met het bedenken van de homescreen en de vaste layout van ons infotainment systeem. Zo maakten we een lijst van alle elementen die in het beginscherm aanwezig moesten zijn. Deze elementen hebben we individueel in een wireframe gezet en samengevoegd.

Nu we een idee hadden hoe het vaste lay-out in ons scherm eruit kwam te zien, zijn we indivi- dueel verder gegaan aan ons eigen onderdeel. Dit betekende voor mij: tijd voor de mediaplayer. Als eerste stap in dit proces moest ik weten welke onderdelen ik in de media player verwerkt moest hebben. Deze elementen heb ik toen gelijk in een flowchart verwerkt.


Het waren in totaal 8 schermen die ik moest vormgeven. Deze heb ik eerst op papier uitgewerkt in 8 wireframes met annotaties. Hoe meer informatie op het scherm, hoe meer dat de gebruiker zou afleiden tijdens het rijden. Ik hield dat ik mijn achterhoofd bij het tekenen van de wireframes.


Deze wireframes gebruikte als prototype die ik vervolgens moest testen bij de doelgroep. In deze test wou ik erachter komen of dat de gebruiker direct doelgericht door mijn systeem kon navigeren en daarbij geen extra handelingen of features mistte. Ik maakte hiervoor een uitgebreid testplan.


Voor het testen gebruikte ik de methode usability testing: de ‘hardopdenkmethode’. Dit houdt in dat je tijdens of na het uitvoeren van de test de gebruiker vraagt om hardop zijn gedachten uit te spreken.


Uit mijn test bleek dat de doelgroep in het vaste lay-out graag een volume icoon bij de volume button wou hebben. Ook zien ze daar graag een nummer aanduiding bij en willen ze het mid- denstreepje van dik naar dun weergegeven zien. Ook vroegen we ze welke snelkoppelingen ze graag altijd in beeld wouden hebben. Hier waren de meningen over verdeeld maar enkele sprongen eruit: Graden, Instellingen, Ventilatie , Navigatie , Telefoon, Blackscreen. In het lipje bovenaan zien ze liever geen datum, maar wel de graden. Ik analyseerde deze resultaten en schreef ze op voor iteratie 2.


Iteratie 2

Ik verwerkte de resultaten van iteratie 1 in flowchart 2.0. Toch liep ik er continu tegenaan dat de doelgroep een aparte app in het systeem zou willen zien wat speciaal bedoeld was voor kinderen. Na overleg met een docent besloot ik me 100% te focussen op dit onderdeel: kids play. Ik wou weten hoe de lay-out er bij muziek apps voor kinderen uit ziet, wat voor opties ze bieden in zo'n app en wat voor rol ouderen hierin spelen. Ik verza- melde eerst wat screenshots en bekeek een website met top 8 muziek apps voor kinderen.


Ook deze resultaten voegde ik toe aan aan een nieuwe flowchart.





Ik ben toen opnieuw gaan schetsen om een idee te krijgen hoe ik de schermen wou vormgeven. Ik gebruikte elementen zoals het vaste lay-out, het afspeelscherm en de submenu’s van het vorige onderzoek uit iteratie 1. Ik schreef bij de schetsen van de schermen pijlen zodat ik ongeveer wist hoe het uiteindelijk genavigeerd zou worden.




Ik ben toen doorgegaan naar het uitwerken van de schetsen in verschillende wireframes. Omdat ik deze al op papier had staan, zou het mij meer overzicht geven om deze te digitaliseren met de annotaties erbij. Dit deed ik in Illustrator met mijn tekentablet. Zo kreeg ik een mooi overzicht van het product.

Het moest een low-fid prototype worden waarbij het er echt om ging of er geen features miste en kinderen centraal zouden staan. Ik heb me dus niet bezig gehouden met de vormgeving. In het prototype zouden alle schermen die ik in de wireframe gemaakt verwerkt worden. Zie hieronder het prototype.



Dit prototype heb ik vervolgens getest bij verschillende respondenten uit de doelgroep. In het prototype had ik kindersloten verwerkt maar die bleken later overbodig te zijn. Ik vond dat best opmerkelijk omdat de apps die ik heb onderzocht had eerder in die week dit allemaal wel hadden. Ook moet er een standaard afspeelbalk toegevoegd worden voor als de media player wordt afgesloten en zal ik titels bij de afspeellijsten toevoegen. Verder was het systeem dus vrij duidelijk en wist de gebruiker goed waar hij zich bevond dus daar hoef ik verder niks aan te veranderen. Deze punten kon ik meenemen naar iteratie 3.


Iteratie 3

In overleg besluiten we dat ieder teamlid een eigen versie maakt van het beginscherm van het infotainment systeem, en deze vervolgens ook test bij de doelgroep. Uit deze resultaten zal blijken welk beginscherm het prettigst ervaart wordt, en wat eventueel veranderd moet worden. We besloten verder te gaan op mijn beginscherm omdat deze overzichtelijk maar toch vrolijk eruit ziet. Wel waren er nog een aantal veranderingen.

De flowchart wordt nogmaals aangepast naar Flowchart 3.0, en ik maak ook een 3e versie van de wireframes met de actiepunten van iteratie 2 er in verwerkt. Dit resulteerde op een mooi overzicht van alle schermen als voorbereiding om dit later uit te werken in figma.


En dit prototype test ik bij 4 respondenten. Hieruit bleek:

- Na het submenu met daarin de keuze: muziek, verhalen, slaapliedjes, was hetzelfde menu wat verwarring kan geven. - Sommige knoppen werken nog niet helemaal. - Afspeelbalk boven het media player icoon. - Afspeellijsten duidelijker in beeld.

Deze punten heb ik aangepast in het prototype, en toen heb ik deze opdracht ingeleverd.



Conclusie

Ik ben super trots op dit project. Het is het eerste project waarbij ik in aanraking kwam met Figma, en dat heeft me zeker nieuwsgierig gemaakt om meer over dit programma te ontdekken. Het was een project waarbij ik zelfstandig aan de slag kon gaan wat mij de vrijheid gaf om de planning, ingezette methodes en uitwerking zelf in te vullen. En ondanks dat ik hiervoor nog maar 2 projecten gedaan had, verliep dat zeer goed.


Ik heb mijn prototype met het bijbehorende ontwerpverslag ingeleverd en er een mooie 7,8 voor gehad.




30 weergaven

Recente blogposts

Alles weergeven
IMG_4578.jpg

Sera Hier!

Leuk dat je kijkt naar mijn projecten die ik gemaakt heb voor verschillende opdrachtgevers! 

De projecten zijn altijd in teamverband geweest, maar de ontwerpen en afbeeldingen die je in deze post ziet zijn door mij gemaakt. Zo heeft iedereen toch een eigen oplevering :)

Veel leesplezier!