In de periode van 29 januari tot en met 14 juni loop ik stage als Visual Designer bij Jacobs Douwe Egberts. “De rijke geschiedenis van Douwe Egberts begint meer dan 270 jaar geleden. In 1753 openen Egbert Douwes en zijn vrouw Akke Thijsses hun kruidenierswinkel ‘De Witte Os’ in Joure, een klein dorpje in Friesland. Zo leggen ze de basis voor het Douwe Egberts van nu.” (Douwe Egberts, z.d.) Tegenwoordig heeft Douwe Egberts wereldwijd koffiebranderijen en is het uitgegroeid tot een wereldwijd bekend bedrijf, alleen in Nederland werken er al ruim 2100 collega’s. JDE is onderverdeeld in het professional team en het Retail team. Ik loop stage bij het professional team en dat houd in dat wij op B2B gericht zijn, wij werken samen met kleine, medium en grote bedrijven. Mijn afdeling richt zich hoofdzakelijk op het beheren van content en assets (media) op de JDEP-webshop. Naast deze taken ontwerpt de afdeling ook de verschillende webpagina’s voor de webshop. Ik ga aan de slag als Visual Design stagair, hierbij houd ik me bezig met verschillende onderdelen zoals: het online beheren van producten en campagnes en mijn creativiteit gebruiken om de website te optimaliseren (imagery & UX/UI), kortom, een veelzijdige stage, waarin ik in overleg mag aangeven waar ik graag aan wil meewerken.
Beroepsproducten: webpagina ontwerp Douwe Egberts & Pickwick
Binnen JDEP wordt er hard gewerkt aan het vernieuwen en replatformen van onze oude webshop. Daarvoor zijn er nog een aantal pagina's die aandacht behoeven zoals de merkenpagina's van Douwe Egberts en Pickwick. Aan mij de taak om deze twee pagina's te herontwerpen en te bouwen.
Hiernaast zie je het resultaat van de oude pagina's versus de nieuwe door mij ontworpen pagina's. Door de pagina's naast elkaar te zetten zie je goed de aanpassingen die ik heb gedaan. Verder op deze pagina ga ik in op het proces van één van de twee pagina's om een indruk te geven van hoe ik deze opdracht heb aangepakt.
De pagina's staan nu live, neem een kijkje!
Design Thinking: het ontwerpproces van de Pickwick pagina
Tijdens het uitvoeren van dit project pas ik de Design Thinking methode toe, dit is voor mij een waardevolle methode, omdat het innovatie en creativiteit stimuleert. Het stelt mij in staat om diepgaand inzicht the krijgen in de behoeften van de doelgroep, wat leidt tot meer klantgerichte oplossingen. Door de verschillende fases van empathize tot testing door te lopen, kan ik effectieve en relevante veranderingen aanbrengen die de merkervaring van de merken van JDE zullen verbeteren.
Fase 1: Empathize
In deze fase streef ik ernaar om een begrip te ontwikkelen van de behoeften van alle stakeholders die bij de opdracht betrokken zijn.
De doelgroep waar JDEP zich op focust is te splitsen in twee segmenten: je hebt de MKB-sector, maar ook de zogehete sector BIC: grote bedrijven, institutions en commercial. Denk hier bijvoorbeeld aan: drukwerkdeal, Hogeschool van Arnhem en Nijmegen, maar ook je lokale kapper.
De doelgroep bezoekt de website veelal met een specifiek doel: producten bestellen, JDEP biedt de klant een breed scala aan assortiment: “van professionele koffiemachines en verse koffiebonen tot aan herbruikbare koffiebekers en thee.” Op De Koffie Bij: Samenwerken met JDE Professional | Zakelijke Douwe Egberts Koffie, z.d
Expert Interview
Ik besluit een expert interview te doen met Bram (online specialist), omdat hij al veel ervaring heeft met de doelgroep. Samen met Bram heb ik besproken wie de specifieke doelgroep is van het merk Pickwick: “de webshop en de mensen wie aankopen doen is vooral gericht op MKB, maar door juist over het verhaal van pickwick te vertellen hebben we op meer doelgroepen effect. Grote bedrijven kijken bijvoorbeeld naar het verhaal van een bepaald merk als ze opzoek zijn naar een nieuwe partner. Zo is er voor veel bedrijven een groot commercieel belang voor het hebben van een partner die veel bezig is met duurzaamheid. Duurzame thee is bijvoorbeeld belangrijk vanwege de duurzaamheid missies van hun eigen bedrijf, door dit te tonen op de merkenpagina kunnen we de ‘whats in it for them’ bereiken.” Bram Moolenaar
Fase 2: Define
In de define-fase evalueer ik de verzamelde gegevens om het hoofdprobleem vast te stellen. Op basis hiervan formuleer ik een gerichte ontwerpvraag.
Probleemstelling: De huidige merkenpagina’s zijn verouderd en sluiten niet aan bij onze nieuwe huisstijl. Bovendien is de inhoud niet meer actueel en weerspiegelt deze niet langer de boodschap die we aan de klant willen overbrengen.
Ontwerpvraag: Hoe kan ik de merkenpagina’s vernieuwen met de nieuwe huisstijl, terwijl ik de essentie van het merk intact laat?
Google Analytics
Het eerste onderzoek wat ik uitvoer in deze fase is het analyseren van de Google Analytics, ik ben namelijk benieuwd naar hoe de pagina nu presteerd en waar plek is voor verbetering. Hieruit blijk dat de pagina middelmatig presteerd, het totaal aantal pagina weergaven in 2023 ligt op 2810 weergaven, dat is 0,12% van de gehele site, dit percentage ligt erg laag, wat zonde is omdat Pickwick wel een bekend merk is van JDEP.
Design Patterns
“Een webdesign patroon kan worden gedefinieerd als een standaardoplossing die wordt toegepast op terugkerende problemen of uitdagingen tijdens het ontwerpproces van een website.” They Make Design, 2023. Hier onderzoek ik meerdere design patterns die ik gevonden heb in de bestaande JDEP pagina’s of via bronnen online, deze patterns neem ik mee in mijn nieuwe ontwerpen. Ook kan ik mijn nieuwe ontwerpen later controleren op deze patterns, als een soort checklist dus. Door deze patterns te onderzoeken geef ik mezelf een handige tool die ik kan gebruiken tijdens mijn ontwerpproces.
Huidige pagina analyse
Ik besluit om de huidige pagina te analyseren, hierdoor kan ik kijken wat er al staat, wat ik eventueel kan meenemen in mijn ontwerp en wat er vernieuwd en aangepast moet worden. Op basis van deze analyse stel ik een lijst met vereisten op, gebaseerd op de nieuwe inzichten en de analyse van de huidige pagina. Deze lijst zal dienen als leidraad om te zorgen dat het ontwerp aan alle eisen voldoet en zal als plannings-tool en checklist fungeren, die gedurende het project aangevuld kan worden.De vereisten omvatten:
- Het creëren van nieuwe teksten over actuele onderwerpen.
- Het omzetten van alle content naar de nieuwe huisstijl en deze vereenvoudigen.
- Een hero image: een banner met een sfeerbeeld of kleurvlak.
- Het onderverdelen van content in blokken (kaartindeling).
- Het aanpassen van de volgorde van de pagina-inhoud om door te scrollen te stimuleren.
- Het omzetten van alle content naar de nieuwe huisstijl en deze vereenvoudigen.
- Een hero image: een banner met een sfeerbeeld of kleurvlak.
- Het onderverdelen van content in blokken (kaartindeling).
- Het aanpassen van de volgorde van de pagina-inhoud om door te scrollen te stimuleren.
Fase 3: Ideate
Het doel van de ideate fase is leuk: zo veel mogelijk ideeën genereren. Hier gebruik ik de CMD-methode Sketching voor, deze methode kies ik omdat het voor mij een goede manier is om verschillende ideeën op papier te zetten en om te kunnen experimenteren met verschillende ontwerpen.
Als opwarmer ga ik eerst de crazy 8 methode doen, hier schets je heel snel 8 verschillende ideeën, om zo inspiratie op te doen en tot nieuwe ideeën te komen. Hier probeer ik verschillende dingen uit met de lay-out van de pagina.
Na het maken van de crazy 8, maak ik drie ontwerpen die verschillende lay-out opties voor de webpagina-elementen tonen. Deze ontwerpen zijn ‘mobile-first’ gemaakt, wat inhoudt dat ze eerst voor mobiele apparaten worden geoptimaliseerd. Dit is een strategische keuze, aangezien 38% van de websitebezoekers mobiel navigeert, en het eenvoudiger is om content op te schalen naar grotere schermen dan andersom.
Fase 4: Prototype
In de prototype fase ga ik mijn schetsen verder uitwerken om feedback te verzamelen en mijn ontwerpen te verbeteren.
Mid-fidelity prototype
In de mid-fidelity wireframes in Figma, heb ik de elementen uit de drie initiële schetsen samengevoegd tot twee vernieuwde wireframes. Daarnaast heb ik een desktopversie ontworpen, aangezien de meerderheid van de gebruikers de webshop via een desktop bezoekt. Wireframing is de gekozen methode omdat, het een effectieve manier is om concepten te visualiseren en te delen met stakeholders, wat het verkrijgen van feedback makkelijker maakt. Door constant om feedback te vragen blijf ik mijn ontwerp verbeteren, met het mid-fidelity prototype loop ik een aantal iteraties door, voordat ik overga op high-fidelity.
High-fidelity prototype
In de vernieuwde high-fidelity versie zijn nieuwe copy en levendige afbeeldingen geïntegreerd, met de kleur groen en aardetinten die de JDEP huisstijl kenmerken. Deze pagina is ontworpen om de bezoeker het gevoel te geven van een ontspannen moment voor jezelf, gesymboliseerd door een bannerbeeld van een vrouw die geniet van haar Pickwick thee. De Tea Master Selection krijgt prominente aandacht, aangezien dit product de verkoopprioriteit heeft en daarom bovenaan staat. Direct daaronder wordt het assortiment van TMS en Pickwick Professional getoond, waardoor de beschikbare producten direct zichtbaar zijn. Verder wordt de Professional lijn belicht en de unieke kwaliteiten van deze theeën. Aan het einde van de pagina heb ik een aanpassing gedaan; er is nu een doorverwijzing naar andere merken van JDE, zoals Douwe Egberts, wat de gebruiker uitnodigt om ons brede aanbod te ontdekken. Dit bevordert niet alleen de interactie maar versterkt ook het bewustzijn van onze merkfamilie.
In de vernieuwde high-fidelity versie zijn nieuwe copy en levendige afbeeldingen geïntegreerd, met de kleur groen en aardetinten die de JDEP huisstijl kenmerken. Deze pagina is ontworpen om de bezoeker het gevoel te geven van een ontspannen moment voor jezelf, gesymboliseerd door een bannerbeeld van een vrouw die geniet van haar Pickwick thee. De Tea Master Selection krijgt prominente aandacht, aangezien dit product de verkoopprioriteit heeft en daarom bovenaan staat. Direct daaronder wordt het assortiment van TMS en Pickwick Professional getoond, waardoor de beschikbare producten direct zichtbaar zijn. Verder wordt de Professional lijn belicht en de unieke kwaliteiten van deze theeën. Aan het einde van de pagina heb ik een aanpassing gedaan; er is nu een doorverwijzing naar andere merken van JDE, zoals Douwe Egberts, wat de gebruiker uitnodigt om ons brede aanbod te ontdekken. Dit bevordert niet alleen de interactie maar versterkt ook het bewustzijn van onze merkfamilie.
