Project 5 - Smart home management system
Dit project ben ik aan de slag gegaan voor WARP, een digital innovation firm die slimme producten en diensten ontwikkelt, ontwerpt en bouwt. Ik heb hierbij gekeken naar hoe het smart home management systeem zo ontwerpen kan worden dat losse applicaties overbodig zijn en alle onderdelen gebruiksvriendelk in te stellen zijn. Ik heb mij gefocust op het onderdeel 'display & navigatie'.
WARP
UI designer
Februari - april 2023
9,2
Opdracht
Ik heb met mijn team de opdracht gekregen van WARP om een smart home management systeem te ontwikkelen die alle functionaliteiten van verschillende slimme technologie apps in je huis, tegelijkertijd kunnen instellen en bedienen. Zo kan je alles vanuit een centrale plek bedienen. Het home management systeem wordt getoond op een tablet aan de muur.
Het home management systeem moet de gebruikers vooral ondersteunen en ontlaste. Daarom speelt gebruiksvriendelijkheid een grote rol. Het is dus belangrijk dat de functionaliteiten van de verschillende onderdelen (thermostaat, verlichting, beveiliging en dashboard/navigatie) op de juiste plek in de interface zijn gepositioneerd. Gebruikers moeten in één oogopslag kunnen zien hoe het huis ervoor staat, maar ook snel en eenvoudig dingen kunnen aanpassen.
De doelgroep waar we ons op hebben gefocust zijn volwassenen tussen de 40 en 60 jaar met kinderen die thuiswonend zijn vanaf 12 jaar.
Resultaat
Ons WASP home management systeem is een efficiënt, gebruiksvriendelijk systeem dat volwassenen tussen de 40 en 60 jaar, met weinig digitale ervaring, de mogelijkheid biedt en het gemak geeft om hun slimme huis te besturen zonder overbodige applicaties.
Het WASP home management systeem geeft de mogelijkheid voor de gebruiker om zo gemakkelijk mogelijk de onderdelen verlichting, thermostaat en beveiliging van zijn/haar huis te besturen vanuit 1 systeem, wat is bevestigd met een tablet aan de muur. Het systeem biedt veel informatie over het huis zelf maar ook over de daarbij horende functies, dit zorgt ervoor dat het tot eigen wens en detail geregeld kan worden. Echter is het systeem wel makkelijk en efficiënt te besturen wat zorgt voor een groot gebruikersgemak.
Ontwerpproceskaart
Mijn proces
Wireframing
Ik ben begonnen met wireframes maken om zo snel tot ideevorming te komen, waarbij ik laat zien uit welke onderdelen het scherm bestaat en hoe de verschillende schermen zich tot elkaar verhouden. Door de annotaties erbij te zetten maak ik duidelijk wat elk onderdeel inhoudt, waar het voor dient of hoe je het gebruikt.
Low fidelity prototype
Ik heb met de lasersnijder een houten frame gemaakt waarmee ik een tabletschermformaat heb nagebootst. Ik heb gebruik gemaakt van papieren knoppen en elementen. Deze heb ik in verschillende groottes uitgeknipt om zo achter te komen hoe, waar en welke onderdelen terug moesten komen in de display. Hierbij heb ik alle design requirements verwerkt. Hiermee kon ik vervolgens snel verschillende tests uitvoeren.
Card sorting
Ik heb card sorting toegepast als methode om er achter te komen hoe de doelgroep de onderdelen van de app zal categoriseren en in welke volgorde. Dit heeft mij geholpen de content van de display op een logische manier te structureren en er achter te komen welke onderdelen als eerst zichtbaar moeten zijn.
Clickable prototype
Ik heb dit prototype gemaakt op basis van de testresultaten uit iteratie 1, door de wireframes digitaal uit te werken. Ik heb hier nog geen kleur toegepast omdat ik echt op de functionaliteit van de app wilde testen.
Usability testing
Door de methode usability test toe te passen is mij door middel van observeren en achteraf vragen te stellen, duidelijk geworden op welke momenten de gebruiker nog niet soepel door het systeem navigeerde. Ook door het think aloud protocol toe te passen, waarbij de tester hardop zegt wat hij/zij denkt en ziet, heb ik een volledig beeld gekregen over de werking van het prototype.
Flowchart
Dit was de derde versie van de flowchart. Door de flowchart constant te verbeteren heb ik constant duidelijk kunnen zien waar in het systeem extra aandacht aan besteed moest worden. Ik heb hierbij voortdurend rekening weten te houden met de gebruikerservaring.
High fidelity prototype
Tijdens het uitwerken van het high fidelity prototype hebben we als team alle onderdelen bij elkaar gevoegd om 1 systeem te vormen. Zo konden we dit in zijn geheel testen om hierna nog de laatste aanpassingen toe te voegen. Ik heb de kleuren uit ons design system doorgevoerd in het systeem om het een geheel te laten vormen.
Expositie
Voor de expositie heb ik een poster ontworpen waarop ons proces is weergegeven. In plaats van eerst onderzoek te doen zijn we gelijk begonnen met maken en testen. Hierdoor hebben we veel tijd kunnen steken in de uitwerking van ons systeem. Tijdens de expositie hebben we dan ook met trots ons teamproject gepresenteerd aan de opdrachtgever en andere belangstellenden.
Mijn rol
In dit project heb ik mij vooral gefocust op UI design en Ix design.
Mijn verantwoordelijkheid lag bij de display & navigatie in het systeem. Het doel waarbij ik naar toe wilde werken was de basis instellingen voor de onderdelen thermostaat, beveiliging en verlichting voorin de app plaatsen, zodat deze eenvoudig te besturen en gebruiken zijn.
Ik heb mij hierbij constant bezig gehouden met de navigatie in het systeem door mijn tests hier op te focussen en door veel te itereren met de flowchart. Ook het UI design gedeelte heb ik mijn focus op gelegd door dit los te testen van het systeem, en dit pas later samen te voegen. Op deze manier heb ik heldere inzichten gekregen voor de vormgeving van het systeem.
Wat ik meeneem als inzicht is het actief feedback vragen. Hierdoor blijf ik mijzelf verbeteren en gaan mij dingen opvallen waar ik eerst niet zag. Dit resulteert tot een beter eindproduct en nieuwe inzichten van het ontwerp. Hierbij wil ik natuurlijk wel altijd de feedback afwegen met elkaar waar welke feedback ik wel en niet meeneem. Ik blijf immers de ontwerper, en moet ik ervoor zorgen dat ik weet waarom ik bepaalde keuzes heb gemaakt en dit kan onderbouwen, zonder het zo maar van een ander klakkeloos over te nemen!
“Het systeem ziet er mooi vormgegeven uit. Je hebt goed nagedacht over de flow binnen de applicatie. Alles is in te stellen met 1 à 2 clicks waardoor het heel gebruiksvriendelijk is voor jullie doelgroep”
Beoordelend docent
CMD - Hogeschool Rotterdam
Uitkomst
Ons concept is waardevol omdat in ons WASP smart home management systeem het gebruikersgemak voorop staat en de drempel om deze app te gebruiken lager is geworden door zijn eenvoud in gebruik.
WASP geeft de mogelijkheid voor de gebruiker om zo gemakkelijk mogelijk de onderdelen verlichting, thermostaat en beveiliging van zijn/haar huis te besturen vanuit 1 systeem, wat is bevestigd met een tablet aan de muur. Het systeem biedt veel informatie over het huis zelf maar ook over de daarbij horende functies, dit zorgt ervoor dat het tot eigen wens en detail geregeld kan worden.
De doelgroep hebben matige ervaring met digitale producten. Het was hierbij dus van belang alle slimme apparaten in hun huis te kunnen besturen vanuit 1 plek. Dit is efficiënt, makkelijk en snel in het gebruik, zodat zij hier niet te veel tijd aan kwijt zijn en hun weg door de app snel kunnen vinden.
De belangrijkste functies zijn duidelijk en groot vormgegeven. Er is rekening gehouden met een duidelijk contrast en font. De indeling van de app is zo ontworpen dat de basisinstellingen en functies binnen 1 a 2 clicks te bereiken zijn. Voor de uitgebreidere instellingen en functies zul je 3 kliks nodig hebben.
