
De klantvraag:
Creëer een inspirerende tool die bezoekers helpt om ons assortiment te verkennen en te ervaren hoe onze producten hun interieur kunnen verrijken – door ze direct in hun eigen ruimte te visualiseren.
De Uitdagingen
- De producten die op onze webshop beschikbaar zijn moeten binnen de tool zichtbaar zijn zodat de bezoeker deze kan bekijken en bestellen.
- Vergroot de beleving van de bezoeker zodat ze een verlangen krijgen naar de producten.
- Hoe maak je een goed prototype waarmee alle gebruikersflows inzichtelijk worden.
- Bezoekers eenvoudig hun eigen ruimte laten visualiseren met de producten
- Duidelijke instructies en ondersteuning bieden zodat iedereen de tool intuïtief kan gebruiken
- Een visueel aantrekkelijke interface ontwerpen die zowel inspirerend als overzichtelijk is
- Realistische productweergaven en sfeerbeelden integreren zonder dat de interface rommelig wordt
Specifieke Rol
Conceptontwikkeling
Interaction Design
User Experience
User Interface Design
Prototyping met variabelen
De ideeën en de oplossing
De webapplicatie YourStyle biedt gebruikers een intuïtief platform om hun eigen ruimtes in te richten met producten uit het beschikbare assortiment. Door producten visueel in hun woonruimte te ervaren, groeit de betrokkenheid én het verlangen naar de items. Het ontdekken, selecteren en toepassen van producten staat hierbij centraal.
Gebruikers richten hun persoonlijke ruimtes in door per kamer een project aan te maken. Binnen elk project kunnen zij producten opzoeken in de catalogus en direct toevoegen aan hun ontwerp. Deze producten worden vervolgens visueel gepresenteerd in de gekozen ruimte, waardoor een realistische indruk ontstaat.
De interface van YourStyle is ontworpen met focus op gebruiksgemak: het aanmaken van projecten en het gericht zoeken en filteren binnen de productcatalogus verlopen soepel en overzichtelijk.
PROJECT AANMAKEN
De gebruiker start op het dashboard van YourStyle, waar alle bestaande projecten overzichtelijk worden weergegeven in een Bentogrid. Via de eerste tegel aan de linkerkant kan eenvoudig een nieuw project worden aangemaakt. Deze tegel bevat micro-interacties om de gebruikerservaring te vergroten.
Na een klik op de tegel wordt de gebruiker naar een nieuwe pagina geleid. Hier kan hij een afbeelding uploaden, een introductietekst invoeren, de vorm van de ruimte selecteren en de kleuren selecteren voor de muur en de vloer. Deze laatste selecties worden direct weergegeven in de preview afbeelding die rechts wordt weergegeven. Zodat de gebruiker direct een indruk krijgt van zijn projectruimte. Na het aanmaken van het nieuwe project worden deze gegevens gebruikt in de projectruimte om een zo realistisch mogelijk beeld te geven.
PRODUCTCATALOGUS EN FILTER
Via het dashboard navigeert de gebruiker naar de projectruimte, waar hij de productcatalogus kan openen. In deze catalogus kan worden gescrold om alle beschikbare producten te bekijken. Daarnaast is er een filterfunctie beschikbaar om gericht te zoeken op productcategorie. Door het filter te activeren en tags te selecteren, toont YourStyle alleen de producten die binnen de gekozen categorieën vallen. De gebruiker sluit het filter door op de knop “Toon producten” te klikken, waarna de gefilterde resultaten zichtbaar worden.
PRODUCTEN SELECTEREN
Binnen de productcatalogus kan de gebruiker producttegels activeren. Dit is zichtbaar doordat de kleur van een tegel verandert wanneer de gebruiker er met de muis overheen hovert. Bij een klik op de tegel verandert de kleur opnieuw, zodat duidelijk wordt dat het product is geselecteerd.
De gebruiker kan ook productcategorieën aan- en uitzetten. Dankzij het gebruik van variabelen worden de eerder geactiveerde categorieën onthouden, waardoor de gebruiker eenvoudig kan zoeken en filteren tussen de verschillende producten.
PRODUCTEN IN DE RUIMTE
De producten die de gebruiker selecteert in de productcatalogus, worden direct in de projectruimte geplaatst. Elk product heeft een bijbehorende prijs, en de totaalwaarde van alle geplaatste producten wordt automatisch opgeteld. Zo krijgt de gebruiker een duidelijk financieel overzicht van de inrichting van de projectruimte.
Daarnaast heeft elk product een informatiebutton die gegevens toont over afmetingen en prijs. Deze informatie wordt rechtstreeks uit de catalogus gehaald, waardoor de gebruiker deze details direct kan bekijken zonder terug te hoeven naar de catalogus. De informatie wordt zichtbaar wanneer de gebruiker over het product hovert.
Producten verwijderen kan alleen via de productcatalogus zelf. Dit is een bewuste keuze om de projectruimte overzichtelijk en gebruiksvriendelijk te houden.
TERUG NAAR DASHBOARD
De gebruiker kan vanuit de projectruimte terugkeren naar het dashboard. Hierbij verschijnt een pop-up waarin gevraagd wordt of hij direct wil teruggaan, of eerst het project wil opslaan.
OPSLAAN EN PRODUCTEN TOEVOEGEN
Omdat projecten opgeslagen kunnen worden, kan de gebruiker later eenvoudig verdergaan waar hij gebleven is. Hij kan opnieuw de productcatalogus gebruiken om nieuwe producten toe te voegen en het project opslaan. Tijdens het opslaan verschijnt een pop-up met systeeminformatie die de voortgang van het proces weergeeft.