Brouwerij 't Kwartje
Herontwerp en coderen, 1e jaar CMD, 2020
In dit individuele project heb ik gewerkt aan het herontwerpen en coderen van een website voor Brouwerij 't Kwartje, een lokale brouwerij in Den Haag. Gedurende een periode van acht weken heb ik stap voor stap toegewerkt naar een gebruiksvriendelijke en visueel sterke website die aansluit bij de huisstijl en de sfeer van de brouwerij.
Op basis van een toegewezen persona heb ik ontwerpkeuzes gemaakt die aansluiten bij de wensen en behoeften van de doelgroep. Het ontwerpproces bestond uit vooronderzoek, wireframes, visueel ontwerp en een interactief prototype. Voor het ontwerpen heb ik gebruikgemaakt van Adobe XD, waarmee ik de volledige website visueel heb uitgewerkt. Na het ontwerpen heb ik mijn website ook gerealiseerd met HTML en CSS code. Dit gaf me de kans om te oefenen met front-end ontwikkeling en te leren hoe ontwerp en code op elkaar aansluiten.
.png)
Hoe ben ik te werk gegaan?
Om de website te herontwerpen en hierna te coderen kreeg ik wel een stappenplan, deze was als volgt:
-
Debriefing maken.
-
Design principles opstellen.
-
Systeemeisen opstellen (die bestaan uit functionele en niet-functionele eisen).
-
User needs opstellen.
-
Paper prototype ontwerpen.
-
Flowcharts en sitemaps maken.
-
Wireframes ontwerpen.
-
Heuristic evaluation en feedback verwerken.
-
Style guide opstellen.
-
Hi-fi website ontwerpen in Adobe XD.
-
Scenario Based User Testing uitvoeren en de feedback verwerken.
-
Website (niet-responsive) programmeren met HTML en CSS.
-
Code review uitvoeren en de feedback verwerken in mijn geschreven code.
Mijn persona was Nikkie de Jong, een 23-jarige partygirl uit Delft. Ze kiest haar bier op basis van het uiterlijk en draait vooral om plezier maken met vrienden. Nikkie is sportief, let op haar calorie-inname en onderneemt elke maand iets leuks met haar vriendengroep. Wanneer zij aan de beurt is om iets te organiseren, wil ze dat het eenvoudig en betaalbaar blijft.
Paper prototype
Om een paper prototype te ontwerpen heb ik design principles, systeemeisen en user needs opgesteld. De design principles:
-
Visuele beleving: Mooie foto's en etiketten zorgen voor een sfeervol totaalplaatje dat de uitstraling van de brouwerij versterkt.
-
Samen genieten: De website stimuleert samen beleven door eenvoudige aanmeld opties voor evenementen.
-
Voor ieder wat wils: Duidelijke overzichten en categorieën helpen gebruikers snel het perfecte biertje te vinden.
-
Snel en simpel: Efficiëntie staat voorop: bezoekers vinden snel wat ze zoeken, zodat er meer tijd overblijft om te genieten.
De user needs heb ik onderverdeeld in functionele en niet-functionele eisen, wat samen de systeemeisen vormt. Samengevat blijkt dat de website van Brouwerij 't Kwartje bezoekers moet helpen om eenvoudig evenementen te vinden, aan te vragen en reviews te lezen of te schrijven. De doelgroep wil daarnaast snel informatie kunnen vinden over prijzen, calorieën en verkooppunten, ondersteund met aantrekkelijke beelden voor social media. Voor de brouwerij biedt de site mogelijkheden om evenementen te promoten en extra functies toe te voegen, zoals fustenverkoop en barverhuur, om zo de conversie te verhogen.
Dit heb ik uitgewerkt in een paper prototype:
Wireframes
Voordat ik begon met het ontwerpen van de wireframes, heb ik eerst een sitemap en flowcharts opgesteld. Deze vormen de basis voor de structuur en navigatie die terugkomen in de wireframes.
De sitemap geeft een overzicht van alle pagina’s:
Daarnaast heb ik flowcharts gemaakt voor belangrijke gebruikersstromen, zoals het bezoeken van de website met leeftijdscontrole en het plaatsen van een review bij een biertje.
Deze gebruikersstromen heb ik uitgewerkt in wireframes. Door op onderstaande knop te klikken, kun je de wireframes bekijken:
Heuristic Evaluation
Om mijn wireframes te testen, heb ik samen met mijn projectgroep een Heuristic evaluation uitgevoerd. Iedereen werkte aan zijn eigen project en tijdens de sessie gaven we elkaar feedback op basis van Jakob Nielsen’s usability principes. Enkele tips waren dat de navigatie niet overal duidelijk was, sommige elementen inconsistent waren en bepaalde functies nog niet werkten. Positieve punten waren de duidelijke structuur, de goede aansluiting op de persona en het consistente gebruik van grids en patronen.
High-fidelity prototype
Om mijn wireframes om te zetten naar een hi-fi prototype, heb ik eerst een style guide opgesteld. Hiervoor haalde ik inspiratie uit de kleuren van bier, zoals goudgeel, amber en donkerbruin, passend bij de sfeer en huisstijl van Brouwerij 't Kwartje.
De feedback uit de lessen en van mijn peergroep heeft geleid tot waardevolle inzichten en veel verbeterpunten, waardoor mijn ontwerp steeds sterker werd. Door actief feedbackmomenten te benutten en vanuit verschillende invalshoeken naar mijn schermen te kijken, heb ik meerdere iteraties kunnen uitwerken en mijn hi-fi prototype verder kunnen verfijnen.
Het hi-fi prototype bevat een startpagina met snelle toegang tot belangrijke onderdelen zoals bieren, evenementen en reviews, waardoor gebruikers efficiënt kunnen navigeren. De bieren pagina biedt een duidelijk overzicht, inclusief een detailpagina met reviews en de mogelijkheid om zelf een review toe te voegen. Ook heb ik de evenementen pagina’s uitgewerkt, met informatie over het proeflokaal, workshops, een volledige agenda en een aanmeldformulier.
Scenario-Based User Test
Tijdens de Scenario-Based User Test met Marieke Nieuwpoort (via Teams) ontving ik waardevolle feedback. Op basis daarvan heb ik onder andere de navigatiebalk compacter gemaakt, de Google Maps-link duidelijker vormgegeven en de bevestigingspagina aangepast naar een pop-up. Positieve punten waren onder andere het duidelijke overzicht, het opvallende reviewformulier en het gebruik van kleur en Google Maps.
Coderen met HTML/CSS
Na het afronden van mijn high-fidelity ontwerp ben ik gestart met het coderen van de website. Tijdens een code review met medestudenten hebben we elkaar feedback gegeven op structuur, opmaak en toegankelijkheid van de code. Op basis hiervan heb ik o.a. mijn <a>-tags gestroomlijnd, headings beter overwogen voor SEO en structuur, en dubbele CSS samengevoegd. Daarnaast heb ik mijn code geoptimaliseerd met behulp van een validator. Hierdoor heb ik ook nog alt-teksten aan afbeeldingen toegevoegd.
Na deze verbeteringen heb ik de code van de website afgerond, met de focus op de evenementenpagina en het aanmeldproces, zodat persona Nikkie eenvoudig met haar vrienden een activiteit kan plannen. Daarnaast heb ik een startpagina en verder gedeeltes van de andere pagina's gecodeerd om de website completer te maken.
Het was interessant om mijn ontwerp ook echt te coderen. Doordat ik in de designfase vrij had ontworpen zonder beperkingen, ontstond er een creatief en sterk resultaat – dat gelukkig ook goed te bouwen bleek. Coderen bleek leuker dan verwacht, vooral doordat je meteen het effect ziet van je werk.