The dutch store
Orginele website
The Dutch Store verkoopt typische Nederlandse producten zoals stroopwafels, drop, kaas, hagelslag, koekjes en andere Hollandse boodschappen die je in het buitenland vaak niet kunt vinden. Hun klanten zijn vooral Nederlanders die in het buitenland wonen en de smaak van thuis missen, maar ook Amerikanen en andere nieuwsgierigen die Nederlandse producten willen proberen.
About project
Probleem
De originele website had een rommelige structuur, onduidelijke navigatie en een zwakke visuele hiërarchie. Hierdoor was het voor gebruikers lastig om producten te vinden en de winkelervaring voelde onoverzichtelijk.
Opdracht
Maak een gebruiksvriendelijker en visueel sterker ontwerp voor The Dutch Store, met gebruik van bewezen design patterns uit Designing Interfaces van Jenifer Tidwell.
Onderzoek
We startten met een analyse van de originele website en ontdekten dat producten versnipperd waren ingedeeld, de gebruikersflow onduidelijk was en de visuele hiërarchie inconsistent oogde.
Op basis van deze inzichten herstructureerden we de categorieën, kozen we voor duidelijke interface-patronen voor navigatie en filters, en ontwikkelden we een visueel framework om meer consistentie en overzicht te creëren.
Wireframes
We ontwikkelden een nieuwe, gebruiksvriendelijke indeling voor de productcategorieën met minder categorieën, helderere namen en een logische hiërarchie. Vanuit de wireframes bouwden we een visueel framework op, met een strak grid voor balans en consistentie.
We kozen voor herkenbare design patterns: cards voor duidelijke productweergave en filters aan de linkerkant, zodat gebruikers sneller kunnen zoeken en vinden.
Style guide
We ontwikkelden een interactieve style guide om volledige consistentie in de interface te waarborgen. De bestaande huisstijlkleuren bleven behouden voor herkenbaarheid, aangevuld met neutrale grijstinten en veel witruimte voor rust. De typografie kreeg een duidelijke hiërarchie met een modern lettertype voor headings en een goed leesbaar font voor bodytekst.
Buttons kregen een primaire en secundaire variant met sterk kleurcontrast en duidelijke hover-states. Ook formulieren en inputvelden werden gestroomlijnd met consistente stijlen voor labels, foutmeldingen en interacties.
© 2025 designedbyM