Jorick Michiels

Bru Textiles

Digitale producten voor een internationale stoffenleverancier, van concept tot werkend prototype

Bij Bru Textiles, dat meubel- en gordijnstoffen levert aan bedrijven over de hele wereld, ontwierp ik digitale producten: webshops voor bedrijven en particulieren, gordijnen op maat, een sofa die je bij andere mensen thuis uitprobeert en stoffen die je digitaal in elke kleur toont. Van concept en UX tot prototypes in code, en de opvolging van de bouw.

Bedrijf

  • Concept
  • UX-design
  • Functionele analyse
  • Prototypes in code
  • HTML
  • JavaScript
Opdrachtgever
Bru Textiles
Rol
Digital product designer en analist
Periode
2017 – 2019

De oorspronkelijke prototypes bestaan niet meer. De beelden in dit artikel zijn nagebouwd op basis van screenshots uit die tijd, met nieuwe foto's. Ze tonen hoe de ontwerpen werkten, niet elk detail zoals het toen was. Van More Fabrics, SofaHost en het voorraadsysteem bleef geen beeld over.

In het kort

Vraag
Bru Textiles wilde nieuwe digitale producten: webshops voor bedrijven en particulieren, gordijnen op maat, een merkwebsite en stoffen die je digitaal in elke kleur toont.
Aanpak
Ik werkte concepten uit, ontwierp de gebruikservaring, bouwde werkende prototypes in code en volgde de bouw op in Scrum.
Opgeleverd
Werkende prototypes voor More Curtains en de digitale stoffen, het ontwerp van de nieuwe FibreGuard-website, en specificaties voor de bouw door externe partners.

De context

Bru Textiles is een Belgische leverancier van meubel- en gordijnstoffen, met vooral zakelijke klanten over de hele wereld. Het koopt stoffen in, houdt ze op voorraad in een gigantisch magazijn en levert ze wereldwijd.

Van 2017 tot 2019 werkte ik er, eerst als user experience architect voor de digitale marketingplatformen, die op Sitecore draaiden. In Scrum bedacht en ontwierp ik nieuwe functies, volgde ik de ontwikkeling ervan op en testte ik wat opgeleverd werd. Daarnaast onderzocht ik problemen, schreef ik documentatie en leerde ik de webmasters met het platform werken. Gaandeweg kwam de nadruk op ontwerp, prototypes en product ownership te liggen.

Ik was verantwoordelijk voor het functionele ontwerp van de webshops: voor bedrijven, en voor particulieren, zoals More Fabrics, More Curtains en SofaHost. Ik schreef specificaties, user stories en gedetailleerde mock-ups voor een externe ontwikkelpartner, beheerde samen met de manager de backlog en de sprintplanning, stond in contact met de ontwikkelaars en het testteam, en controleerde opgeleverde functies met acceptatietests.

Ik werkte aan meer projecten dan die hieronder, maar meestal deed ik hetzelfde: het concept uitwerken, de gebruikservaring ontwerpen, een werkend prototype in code bouwen en dat testen met gebruikers, voor er iets ontwikkeld werd.

Stoffen die je niet meer hoeft te fotograferen

Bru werkte aan een groot initiatief om stoffen digitaal te maken: ze als digitale stof renderen, op digitale meubelmodellen leggen en in interieurscènes tonen. Bij zoveel stoffen is dat een enorme onderneming, maar de winst is ook groot: minder echte fotografie, en klanten die hun producten in elke stof, elke kleur en elke omgeving kunnen laten zien. Dit was ruim voor de tijd van AI. De renders maakte een digitaal team in Oekraïne.

Van stof tot beeld: een digitale stof, een digitaal model, een afgewerkte render.

Vanuit het marketingteam in België ontwierp ik de eerste presentatiewebsite voor het initiatief, en bouwde ik ze als prototype: de diensten, de kwaliteit van de renders en een galerij.

De hele site, sectie per sectie.

En een sofa die je met één klik in een andere kleur zet.

Elke stofkleur op elk meubelmodel.

FibreGuard: een website voor vlekbestendige stoffen

FibreGuard is een van de merken van Bru: vlekbestendige meubelstoffen, waar de meeste vlekken uitgaan met water. Het merk had een nieuwe website nodig. Ik ontwierp ze, te beginnen bij de startpagina met beelden uit het echte leven: kinderen, huisdieren, iets dat omvalt.

De startpagina: een slider vol echt leven, en een rustige pagina in pastel.

Daarna de pagina’s over waar de stof zoal gebruikt wordt.

Eén stof, vijf toepassingen: van woonkamer tot terras.

En over onderhoud, met een schoonmaakgids die toont hoe je een vlek weg krijgt.

De belofte van het merk als interactie: een vlek, water, weg.

Een bureau bouwde de site, en ook dat liep in Scrum. Ik zette het werk uit in tickets, testte wat opgeleverd werd en volgde de demo’s van het bureau op, tot de site klaar was.

De website in zijn geheel.

More Fabrics en More Curtains: stoffen en gordijnen voor particulieren

More Fabrics verkocht stof per lopende meter aan particulieren, rechtstreeks uit het magazijn van Bru. Het begon als een proef binnen het bedrijf en draaide enkele jaren goed. Voor die bestaande webshop stelde ik heel wat verbeteringen aan de gebruikservaring voor, en liet ik ze via Scrum bouwen.

More Fabrics wilde ook vernieuwen, en kwam met een nieuw idee: More Curtains, kant-en-klare en op maat gemaakte gordijnen. Het was meteen een toepassing van de digitale stoffen: het gordijn in de configurator is een digitale stof, die in elke kleur in de kamer kan hangen.

Elke kleur, meteen zichtbaar in de kamer.

Ik maakte het concept en het prototype van de webshop. Het hart ervan is een configurator in vier stappen (kleur, voering, stijl en maten), met een prijsoverzicht dat meteen meerekent.

De configurator: van een leeg gordijn tot in het winkelmandje, in vier stappen.

Daarrond: een catalogus met filters, een productpagina met alle details en een bestelproces in vier stappen.

De hele winkel: van startpagina tot bedankpagina.

Bij elke ontwerpkeuze waarover we twijfelden, schreef ik een hypothese en een alternatief uit. Helpt een kop die blijft staan? Hoort de configurator links of rechts van de foto’s? Wat komt eerst op de startpagina? In het prototype kon je elke variant aan- en uitzetten, zodat we ze met gebruikers konden testen.

Links de hypotheses, rechts de site die meeverandert.

SofaHost: de winkel bij mensen thuis

SofaHost draaide de meubelwinkel om. Wie een sofa kocht, kon ze thuis laten uitproberen door andere geïnteresseerden, en kreeg een commissie als die er ook een kochten. Zonder winkel ertussen kwamen de sofa’s rechtstreeks van de producent, en waren ze goedkoper. Ze waren bekleed met FibreGuard, dus vlekken waren geen zorg. Ik werkte mee aan het concept en maakte het oorspronkelijke ontwerp; het project werd nadien door anderen verder opgepakt.

Een voorraadsysteem voor een gigantisch magazijn

Ook achter de schermen werkte ik mee. Voor het interne voorraadsysteem, waarmee het magazijn beheerd werd en dat er inzicht in gaf, deed ik de functionele analyse en het ontwerp.

De rode draad

Over al die projecten heen was mijn rol dezelfde: een idee omzetten in iets wat je kan uitproberen. Ik werkte het concept uit, ontwierp de gebruikservaring, bouwde een prototype in code dat echt werkte en testte het met gebruikers. En daarna bleef ik erbij: ik schreef de specificaties en user stories, volgde de bouw op in Scrum, met een externe ontwikkelpartner of een bureau, en testte wat opgeleverd werd. Zo werd er minder op goed geluk gebouwd, en wist het team al vroeg of een product zou werken voor wie het ging gebruiken.

Tools en technologie

  • Concept
  • UX-design
  • Functionele analyse
  • Prototypes in code
  • HTML
  • JavaScript
  • PHP
  • Three.js
  • Git
  • Scrum
  • Gebruikerstesten
  • Hypotheses
  • User acceptance testing
  • Sitecore
  • E-commerce

Meer werk

  • Bedrijf

    Nobel Biocare

    Planningssoftware voor tandimplantologie: klinische werkwijzen vertaald naar specificaties en ontwerp.

  • EU en overheid

    Europese Commissie

    Analyse en werkende prototypes voor een groot Moodle-leerplatform, op het design system van de Commissie.

  • Kleine organisatie

    Samtati

    Het platform achter een opleidingspraktijk: activiteiten, inschrijven en betalen, cadeaukaarten en cursussen.

Volgende stap