Terug

Araflora

Araflora

UX/UI designer

UX/UI design

Tijdens mijn stage bij Brickzero heb ik gewerkt aan het herontwerp van de website van Araflora, een specialist in bijzondere en exotische planten voor binnen en buiten. De webshop was verouderd, draaide op een oud systeem en bood onvoldoende ondersteuning voor mobiele en internationale bezoekers. 

Mijn rol was het volledig ontwerpen van de UX/UI, inclusief de opzet van een modulaire structuur, styleguide, wireframes en bricks, zodat de site flexibel en toekomstbestendig zou worden.

De uitdaging

De bestaande website kon de groei en complexiteit van Araflora niet meer bijbenen. Intern leidde dit tot omslachtige processen: bestellingen, voorraadbeheer en uitzonderingen waren moeilijk te overzien en te verwerken. Tegelijkertijd sloot het visuele ontwerp niet meer aan bij de professionaliteit en ambities van het merk.

De uitdaging was duidelijk:

Een moderne, flexibele en toekomstbestendige webshop creëren die zowel klanten als interne gebruikers ondersteunt én de merkbeleving versterkt.

Mijn aanpak

De bestaande website kon de groei en complexiteit van Araflora niet meer bijbenen. Intern leidde dit tot omslachtige processen: bestellingen, voorraadbeheer en uitzonderingen waren moeilijk te overzien en te verwerken. Tegelijkertijd sloot het visuele ontwerp niet meer aan bij de professionaliteit en ambities van het merk.

De uitdaging was duidelijk: een moderne, flexibele en toekomstbestendige webshop creëren die zowel klanten als interne gebruikers ondersteunt én de merkbeleving versterkt.

De bestaande website kon de groei en complexiteit van Araflora niet meer bijbenen. Intern leidde dit tot omslachtige processen: bestellingen, voorraadbeheer en uitzonderingen waren moeilijk te overzien en te verwerken. Tegelijkertijd sloot het visuele ontwerp niet meer aan bij de professionaliteit en ambities van het merk.

De uitdaging was duidelijk: een moderne, flexibele en toekomstbestendige webshop creëren die zowel klanten als interne gebruikers ondersteunt én de merkbeleving versterkt.

Het ontwerpproces startte met het uitwerken van wireframes per pagina, waarin de structuur en plaatsing van de bricks werd bepaald. Tijdens het uitwerken van de hi-fi ontwerpen is parallel een styleguide opgezet, waarin kleuren, typografie, iconen en knoppen zijn vastgelegd. Door wireframes, visueel ontwerp en styleguide gelijktijdig te ontwikkelen, kon het ontwerp vanaf het begin modulair en consistent worden opgebouwd.

Wireframes

Gebaseerd op ‘bricks’

Het ontwerpproces startte met het uitwerken van wireframes per pagina, waarin de structuur en plaatsing van de bricks werd bepaald. Tijdens het uitwerken van de hi-fi ontwerpen is parallel een styleguide opgezet.


Door wireframes, visueel ontwerp en styleguide gelijktijdig te ontwikkelen, kon het ontwerp vanaf het begin modulair en consistent worden opgebouwd.

Prototype

Wireframe vertalen naar een hi-fi ontwerp

Het ontwerpproces startte met het uitwerken van wireframes per pagina, waarin de structuur en plaatsing van de bricks werd bepaald. Tijdens het uitwerken van de hi-fi ontwerpen is parallel een styleguide opgezet, waarin kleuren, typografie, iconen en knoppen zijn vastgelegd. Door wireframes, visueel ontwerp en styleguide gelijktijdig te ontwikkelen, kon het ontwerp vanaf het begin modulair en consistent worden opgebouwd.

Het ontwerpproces startte met het uitwerken van wireframes per pagina, waarin de structuur en plaatsing van de bricks werd bepaald. Tijdens het uitwerken van de hi-fi ontwerpen is parallel een styleguide opgezet, waarin kleuren, typografie, iconen en knoppen zijn vastgelegd. Door wireframes, visueel ontwerp en styleguide gelijktijdig te ontwikkelen, kon het ontwerp vanaf het begin modulair en consistent worden opgebouwd.

Het ontwerpproces startte met het uitwerken van wireframes per pagina, waarin de structuur en plaatsing van de bricks werd bepaald. Tijdens het uitwerken van de hi-fi ontwerpen is parallel een styleguide opgezet, waarin kleuren, typografie, iconen en knoppen zijn vastgelegd. Door wireframes, visueel ontwerp en styleguide gelijktijdig te ontwikkelen, kon het ontwerp vanaf het begin modulair en consistent worden opgebouwd.

Valideren en itereren

Feedback aanpassingen en opleveren

UX- en UI-keuzes

Het UX-ontwerp is gericht op een duidelijke en voorspelbare gebruikersflow, van oriëntatie tot aankoop. De structuur en navigatie zijn zo ingericht dat bezoekers intuïtief door het aanbod kunnen navigeren, producten kunnen ontdekken en zonder onnodige stappen richting checkout worden geleid. Hierbij is bewust gebruikgemaakt van herkenbare webshop-patronen, zodat de interface vertrouwd aanvoelt.


De UI-keuzes ondersteunen deze flow door rust, consistentie en duidelijke hiërarchie. De bestaande huisstijl van Araflora is behouden en consequent doorvertaald naar alle bricks, met aandacht voor typografie, kleurgebruik en call-to-actions. CTA’s zijn visueel geprioriteerd om gebruikers subtiel te sturen richting conversie, zonder het ontwerp te overheersen.


De website is volledig responsive ontworpen. Elke brick is afzonderlijk geoptimaliseerd voor mobiel en desktop, zodat de gebruikerservaring op kleinere schermen net zo logisch en gebruiksvriendelijk blijft. Content en beeldmateriaal zijn zorgvuldig geplaatst om zowel productbeleving als merkcommunicatie te versterken.

Het UX-ontwerp is gericht op een duidelijke en voorspelbare gebruikersflow, van oriëntatie tot aankoop. De structuur en navigatie zijn zo ingericht dat bezoekers intuïtief door het aanbod kunnen navigeren, producten kunnen ontdekken en zonder onnodige stappen richting checkout worden geleid. Hierbij is bewust gebruikgemaakt van herkenbare webshop-patronen, zodat de interface vertrouwd aanvoelt.


De UI-keuzes ondersteunen deze flow door rust, consistentie en duidelijke hiërarchie. De bestaande huisstijl van Araflora is behouden en consequent doorvertaald naar alle bricks, met aandacht voor typografie, kleurgebruik en call-to-actions. CTA’s zijn visueel geprioriteerd om gebruikers subtiel te sturen richting conversie, zonder het ontwerp te overheersen.


De website is volledig responsive ontworpen. Elke brick is afzonderlijk geoptimaliseerd voor mobiel en desktop, zodat de gebruikerservaring op kleinere schermen net zo logisch en gebruiksvriendelijk blijft. Content en beeldmateriaal zijn zorgvuldig geplaatst om zowel productbeleving als merkcommunicatie te versterken.

Reflectie

Dit project was een van mijn eerste grotere webdesignopdrachten en markeerde een belangrijk moment in mijn ontwikkeling als UX/UI designer. Het werken met een modulaire opzet op basis van bouwblokken liet zien hoe effectief wireframes kunnen zijn wanneer je denkt in herbruikbare componenten; dit versnelde het ontwerpproces aanzienlijk en bracht direct structuur in het ontwerp.

Daarnaast heb ik in dit project veel ervaring opgedaan met samenwerken met opdrachtgevers. Door regelmatig feedbackmomenten en iteraties heb ik geleerd hoe je ontwerpkeuzes onderbouwt en stakeholders meeneemt in het loslaten van bestaande, verouderde stijlelementen.


Dit project bevestigde voor mij dat sterke UX niet draait om het opnieuw uitvinden van patronen, maar om het maken van doordachte keuzes die logisch, herkenbaar en gebruiksvriendelijk aanvoelen voor de eindgebruiker.

Terug

Terug

Terug

Terug

Terug