KibbleCare - De app voor een automatische kattenvoerbak dat ook de gebruiker op afstand geruststelt

De opdracht

Een app ontwerpen dat samenwerkt met een automatische voerbak voor katten. Het ging hier om een fictieve merk. Met deze app moest de eigenaar hun kat op afstand eten kunnen geven en ook een oogje op hun kat kunnen werpen. Hierdoor zou de eigenaar worden gerustgesteld. We waren een team van 5 en de volgende onderdelen werden onder ons verdeeld.

  • Dashboard en navigatie
  • Instellen voedingsschema
  • Extra maaltijd, live feed en spraakopnames
  • Terugkijken opgeslagen video’s
  • Profielen en toegang delen

Mijn onderdeel was: het instellen een voedingsschema.

Eindresultaat

Een voedingsschema toevoegen

Mock up voedingsschema toevoegen
Mock up voedingsschema toevoegen
Mock up voedingsschema toevoegen

Bestaande voedingsschema's activeren,aanpassen of verwijderen

Mockup 4
Mockup 5
Mockup 6

Een voedingsmoment direct wijzigen of verwijderen

Mockup 4
Mockup 5
Mockup 6

Een video-opname instellen en daarna activeren

Mockup 7
Mockup 8

Eerst aan de slag met paper prototypes

Ik begon eerst met het maken van een flowchart en wireframes. Dit deed ik op papier en ging door vele versies heen. Hetzelfde geldt voor het maken van de paper prototype. Mijn doel voor het testen was om uit te zoeken of de stappen logisch en goed te volgen waren, ik ging daarom een usability test uitvoeren. Ook tekende ik hier een scenario voor.

Wat voor de meeste verwarring zorgde was de pop-up dat vroeg of je het huidige aanpassingen van het schema ook wou meenemen naar een andere dag. Dit zou ik meenemen naar de volgende iteratie met alle andere punten. Ook had ik moodboards meegenomen naar het testen; een natuurlijke stijl (groen en bruine tinten) en een wat speelse stijl (paars en blauw). De natuurlijke stijl (groene met bruine tinten) werd beter ontvangen dan de speelse variant (paarse), omdat deze een rustgevend gevoel gaf en niet voor teveel prikkels zorgde.

Eerste A/B test

Ter voorbereiding van de A/B test heb ik eerst mijn flowchart en de wireframes aangepast. Deze heb ik nu digitaal gemaakt omdat ik merkte dat het dan wat makkelijker is om aan te passen. Verder heb ik ook het prototype klikbaar gemaakt, hier heb ik Figma voor gebruikt. Met de A/B test wilde ik erachter komen welke kleuren iemand het meeste aansprak en waarom. Ook wilde ik testen of men liever gebruik maakte van een thuis-knopje of het hamburgermenu als navigatie.

Uit de test bleek dat de meeste voorkeur hadden voor het hamburgermenu, dit was voor hun overzichtelijker. Ook kozen de meeste voor de beige versie omdat deze rustgevend was, wat ook onderdeel van ons ontwerpdoel is. Er was wel iemand die voorkeur had voor de groene variant, maar hierbij zei ze dat deze versie gewoon leuker en vrolijker vond. Omdat onze ontwerpvraag gericht was om katteneigenaars rust aan te bieden hebben we ervoor gekozen om verder te gaan met de beige versie.

Hamburgermenu of navigatiebalk?

Tijdens deze iteratie gingen we ook meer samenwerken als team, onze onderdelen moesten nu echt nauw aansluiten op elkaar zodat het één geheel zou worden. Op dit moment dacht ik eerlijk gezegd dat we door zouden gaan met het hamburgermenu, omdat iedereen van mijn vorige test aangaf dat dit prettig was. Dus toen een teamgenoot als suggestie gaf om een navigatiebalk te gebruiken snapte ik dit even niet, waarom verder zoeken? Maar eenmaal dat ik hier wat in ging verdiepen en ook na feedback van mijn docent zag ik dat veel apps hier gebruik van maken en dat dit best makkelijk in gebruik is. We besloten om nu nogmaals een A/B test uit te voeren, om te zien wat de doelgroep hier van vond. Daarnaast begonnen we ook gebruik te maken van grids, en hadden we een style tile gemaakt, zodat onze lay-outs en de groottes van de letters en iconen op elkaar aansloten.

Conclusie & Reflectie

  • Opdrachtgever was tevreden met ons ontwerp en gaf complimenten over hoe netjes en duidelijk het was
  • Ik had wel meer rekening kunnen houden met huishoudens met meerdere katten
  • Ik was eerst eerder geneigd me alleen op mijn eigen onderdeel te focussen, maar later zocht ik actief naar manieren om echt samen te werken in Figma

Laten we kennismaken

Ik sta open voor stages, projecten of gewoon een goed gesprek!