Grillen met Weber
Barbecues klaar... grillen maar. Mijn eerste weken bij MediaMonks begonnen direct intensief. De conclusie “dit is beslist geen koffie stage”, kon daardoor snel getrokken worden. Samen met Bas Strien (mijn begeleider) mocht ik aan de slag voor Weber-Stephen Products, simpelweg Weber. Deze organisatie ontwikkelt hoogstaande barbecues voor consumenten verspreid over de hele wereld en zit gevestigd in Chicago.
De gemiddelde consument met interesse in Weber producten wordt vaak omschreven als die van de hogere klasse. Zij hebben vaak meer geld over voor extra opties en betalen voor merk. Weber komt hen tegemoet met een selectie aan producten en overige accessoires die net wat extra gril opties bieden ten opzichte van de concurrent.
VGA Sign Up scherm
Welk probleem gaan we oplossen?
Om de concurrent voor te blijven, is het bedrijf Weber veel bezig met innovatie en verbetering. Momenteel handelt het bedrijf voornamelijk in zijn eigen fysieke producten, maar begint het langzaam ook de digitale wereld te betreden (nu al) met zijn iGrill app en groeiende online communities. Hoewel een Weber barbecue bij aanschaf de consument direct de mogelijkheid geeft uitbundig aan de slag te gaan als griller, geeft het je niet de kennis en het kunnen om jezelf direct als “grillmaster” te profileren.
Dit resulteerde in de volgende probleemstelling “Hoe zorgt men ervoor dat de consument zichzelf schoolt en beter wordt in het bereiden en grillen van vlees en andere gerechten. Ongeacht welke Weber barbecue hij/zij gebruikt?” Weber en MediaMonks stonden gezamenlijk bij dit probleem stil. Er werd gekeken naar een oplossing waarmee dit probleem zo goed mogelijk kon worden verholpen.
Maak kennis met de “The Virtual Grill Academy”. Met deze dienst is het de bedoeling dat de consument voorzien word van een soort lynda.com/Netfix achtig platform waarmee hij/zij zogenaamde digitale classes kan volgen. Dit is een reeks video’s bestaande uit verschillende hoofdstukken en afleveringen. De video’s binnen zo’n class kunnen afzonderlijk van elkaar en achter elkaar bekeken worden.
Wat het concept ietwat complexer maakt, is de mogelijkheid tot het maken van keuzes tussen de video’s in. Het verloop van een hoofdstuk verandert namelijk door zo’n keuzemoment. Het kan bijvoorbeeld zijn dat de hoeveelheid video’s en thematiek anders is voor een griller die grilt op kool of een griller die zijn vlees bereid op gas. De selectie van kool of gas is een voorbeeld van zo’n keuzemoment.
VGA Dashboard
MediaMonks en Weber waren al begonnen met dit project voordat mijn stageperiode überhaupt begonnen was. In eerste instantie is het concept in grote lijnen en uitgewerkt en daarna heeft een UX Designer een functioneel wireframe ontworpen. Twee visual design ontwerpers zijn vervolgens aan de slag gegaan met het neerzetten van een bijpassende stijl. Zij hebben een landing page opgeleverd waarin de stijl gedefinieerd staat. Pas na deze fase kwam ik in beeld. In mijn eerste stageweek functioneerde ik als een soort support voor Bas, die aan kleine modules en graphics mocht werken. Anderhalve week later begon het grote werk voor mij. Ik heb hele design gedeeltes over mogen nemen en verschillende pagina’s volledig zelf visueel en functioneel uit mogen werken.
Tijdens dit eerste grote project kreeg ik te maken met verschillende samenwerkingen. Bijvoorbeeld die met Priscilla. Zij was verantwoordelijk voor een aantal toevoegingen en aanpassingen aan het functionele design (wireframe). Deze was in eerste instantie opgezet door MediaMonks New York. Priscilla is UX Designer en kijkt vooral heel technisch naar de manier waarop de communicatie tussen gebruiker en platform plaatsvindt. De visuele stijl is opgezet door Axel en Bas. Twee visual designers. Bas is tevens mijn stagebegeleider en heeft mij bij het project betrokken. Elk project heeft zijn “project manager” om alles goed via het spoor te laten lopen. Binnen deze case was de project manager Edward Davies. Een relatief jonge Monk afkomstig uit Londen, Engeland.
Het proces
In de eerste weken heb ik kennis mogen maken met Weber en het project. Als support voor Bas ben ik begonnen met het ontwerpen en omzetten van een groot aantal icons. Deze communiceren informatie op een visuele manier, zonder dat de gebruiker constant labels van knoppen hoeft te lezen. Ik heb ze als een soort stijlkaart in elkaar gezet. Hierdoor is het voor front-end developer makkelijk te herkennen welke icons hij waar moet gebruiken. Vervolgens heb ik een grote hoeveelheid graphics van hun achtergrond ontdaan. Opnieuw om het de developer zo makkelijk mogelijk te maken.
Na deze kleine maar fijne werkzaamheden werd ik klaargestoomd voor het echte werk. Zowel Axel als Bas werden langzamerhand van het project afgehaald en kreeg ik de touwtjes in mijn handen geschoven. Ik was verantwoordelijk voor alle overige componenten en pagina’s die nog ontworpen moesten worden. In theorie leek de uitdaging vooral te liggen bij het neerzetten, uitbreiden en gelijk trekken van een goede visuele stijl.
VGA Shopping Basket
Het resultaat
Het resultaat is een groot aantal pagina’s volledig ontworpen door mij op basis van de neergezette stijl door Axel en Bas. Ik heb zowel de sign-up/log in flow, payment systeem als het dashboard opgeleverd. Bas en Axel hebben de stijl ontworpen rondom de bestaande Weber huisstijl. Hierin worden vooral veel texturen en graphics (skeuomorphic design) gebruikt. Het tegenovergestelde van minimalistisch dus. Dit heb ik zelf ook al tijden niet meer op deze manier gedaan. De omschakeling was even wennen.
Het dashboard vond ik één van de leukere onderdelen om aan te werken. Dit moest een overzicht van gepersonaliseerde data worden. Gebruikers konden hier hun aangeschafte classes checken, noties bekijken en hun voortgangsstatus bijhouden. Opnieuw heb ik getracht zoveel mogelijk gebruik te maken van herkenbare stijlelementen die de gebruiker al eerder is tegengekomen. Het dashboard bestaat uit een dynamische header waarin het weerbericht wordt afgebeeld. Met als doel de gebruiker over te halen die desbetreffende dag nog classes te volgen of juist tijd de besteden aan het barbecuen zelf. Het dashboard heeft in totaal ronduit twintig iteraties nodig gehad.
