01 — Project
Crafted by Hanna
Creative DirectionBrandingE-commerceAI
Mijn eigen creatieve merk waarin design, technologie en gepersonaliseerde producten samenkomen.
Bekijk projectPortfolio · 2026
Creative Designer · UX/UI · AI · E-commerce
Ik vertaal ideeën naar digitale ervaringen die er sterk uitzien, intuïtief werken en resultaat opleveren.
Ik ben Hanna Bachtiar, een creative designer met 15+ jaar ervaring in UX/UI, e-commerce, Shopify en digital product design. Ik combineer creatief denken, visueel design, UX en AI om digitale ervaringen en commerciële concepten te ontwikkelen die merken verbinden met hun doelgroep.
15+
jaar ervaring
27+
e-commerceprojecten
70+
digitale projecten
Geselecteerd werk
Projecten waar creativiteit, strategie en technologie samenkomen.
02 — Project
Melodie Voor Altijd
BrandingUX/UIWebdesignStorytelling
Een digitale ervaring waarin herinneringen, persoonlijke verhalen en emotie centraal staan.
Bekijk project
03 — Project
Mangohoutonline
E-commerceShopifyUX/UICRO
Een e-commerce ervaring waarin gebruiksgemak, visueel design en commerciële doelstellingen samenkomen.
Bekijk projectAI × Creative Design
Creatiever denken. Sneller experimenteren.
AI is een belangrijk onderdeel geworden van mijn creatieve workflow. Ik gebruik AI om visuele richtingen te onderzoeken, concepten te ontwikkelen, beelden te genereren en sneller van idee naar uitvoering te gaan.
Voor mij vervangt AI creativiteit niet. Het vergroot wat er creatief mogelijk is.
AI
Van visuele richting tot creatieve uitvoering.
AI-casestudy matcher
Wat is jouw ontwerpuitdaging?
Beschrijf kort waar je tegenaan loopt. AI zoekt de casestudy's en tools uit mijn werk die het best aansluiten.
Expertise
Wat ik doe
Creative Design
Visuele concepten, campagnes, branding, art direction en creatieve content.
UX/UI
Intuïtieve interfaces, gebruikersflows, design systems en digitale producten.
E-commerce
Shopify, conversiegerichte ervaringen, CRO en customer journeys.
AI
AI-assisted creative workflows, image generation, conceptontwikkeling en experimenten.
Webdesign
Responsive websites en digitale ervaringen met een sterke balans tussen vorm, functie en gebruiksvriendelijkheid.
Over mij
15+ jaar digitale creativiteit
In de afgelopen 15+ jaar heb ik gewerkt aan projecten binnen e-commerce, digitale producten, branding, SaaS en online experiences.
Mijn aanpak combineert creativiteit met strategisch denken.
Begrijpen
Ontdekken
Creëren
Testen
Verbeteren
Ik krijg energie van het vertalen van complexe ideeën naar eenvoudige, aantrekkelijke en effectieve digitale ervaringen. Tegelijkertijd blijf ik mezelf ontwikkelen en experimenteren met nieuwe technologieën, tools en creatieve mogelijkheden.
CV & LinkedIn
Ervaring & vakmanschap
Ervaring
Jan 2020 – Heden
Lead UX/UI Designer
Shopifix — Shopify Select Partner, Rijswijk
Leiding over UX/UI voor Shopify- en Shopify Plus-webshops: van strategie en informatiearchitectuur tot visual design, design systems en CRO. Verantwoordelijk voor 27+ Shopify-projecten voor merken als Mangohoutonline, Livehelfi en Zugu.
Naast Shopifix
Creative Designer & Eigenaar
Crafted by Hanna
Eigen creatieve studio aan het snijvlak van branding, e-commerce en AI. Creative direction, webdesign en digitale ervaringen — van concept tot livegang.
15+ jaar ervaring
UX/UI & Digital Designer
Diverse merken en bureaus
Meer dan 70 projecten binnen e-commerce, digitale producten, branding en SaaS — van eerste schets tot getest en verbeterd eindresultaat.
Skills
Creative Direction UX/UI Design Visual Design E-commerce & Shopify Branding & Storytelling Design Systems Prototyping & Animatie Conversieoptimalisatie (CRO) Bruikbaarheidstesten AI-gestuurde workflows Informatiearchitectuur Webdesign
Tools
FigmaFigJamShopifyShopify PlusGoogle AnalyticsHotjarKlaviyoChannableRechargeNotionMondayMollieChatGPTClaudeSunoLovableInVideo
Pagina 02 — Over het project
Over Mangohoutonline
Mangohoutonline is een toonaangevende Nederlandse meubelwinkel voor massief mangohouten meubels. Dit project werd uitgevoerd vanuit Shopifix — het Shopify Select Partner bureau waar ik als Lead UX/UI Designer werk.
Mijn rol
Lead UX/UI Designer
Klant
Mangohoutonline.nl
Bureau
Shopifix, Rijswijk
Platform
Shopify
Wat is Mangohoutonline?
Mangohoutonline is een toonaangevende Nederlandse meubelwinkel gespecialiseerd in massief mangohouten meubels. Met een breed assortiment van tafels, kasten en zitmeubels bedient het merk woninginrichters door heel Nederland.
Projectdoel
De volledige Shopify-winkel herontwerpen om de conversieratio te verhogen, de navigatie te vereenvoudigen en het vertrouwen bij aankoop van grote meubelstukken te versterken — met behoud van het warme, ambachtelijke merkgevoel van Mangohoutonline.
Doelgroep
Woninginrichters (30–55 jaar) die op zoek zijn naar duurzame, sfeervolle meubels met karakter — vaak middenin een verbouwing of interieurproject en bereid te investeren in kwaliteit.
Zakelijke uitdaging
Stijgend verkeer maar achterblijvende conversie. Gebruikers twijfelden bij hoogwaardige, prijzige meubelstukken — onzeker over afmetingen, materiaal en levertijd — en haakten af vóór de checkout.
Mijn verantwoordelijkheden
Informatiearchitectuur
Wireframing
Interactieontwerp
Visual UI Design
Design System Creation
Prototyping & Animation
Bruikbaarheidstesten
CRO Strategy
Overdracht aan ontwikkelaars
A/B Test Design
Pagina 03 — De uitdaging
Waar we tegenaan liepen
Mangohoutonline groeide snel met een uitbreidend assortiment, maar de winkelervaring kon het tempo niet bijhouden. Gebruikers raakten verdwaald, twijfelden en vertrokken — zonder te kopen.
Kernmetrieken — Vóór herontwerp
Conversieratio1.4%
Checkout-verlating72%
Mobile Bounce Rate68%
Taakvoltooiing29%
Onoverzichtelijk assortiment
Honderden meubelstukken zonder duidelijke categorisering per kamer of stijl. Gebruikers wisten niet waar te beginnen en verlieten de winkel zonder iets te kopen.
Lage conversieratio
Slechts 1,4% van de sessies resulteerde in een aankoop — ruim onder de 2,8% norm voor meubel- en interieur-e-commerce.
Onduidelijke productinformatie
Afmetingen, houtsoort en afwerking waren moeilijk terug te vinden. Gebruikers misten context om te bepalen of een meubel écht in hun ruimte zou passen.
Lange checkout-flow
Het afrekenproces telde 6 stappen met verplichte accountaanmaak, waardoor 72% afhakte vóór voltooiing van de aankoop.
Zwakke mobiele ervaring
Mobiel was goed voor 61% van het verkeer, maar productfoto's waren slecht leesbaar en detailinformatie moeilijk te raadplegen.
Gebrek aan vertrouwen
Weinig zichtbare reviews, geen duidelijke levertijden en geen zichtbaar retourbeleid — waardoor twijfelende kopers afhaken bij een grote aankoop.
Geen stijl- of ruimtefiltering
Gebruikers zochten op kamer of interieurstijl (landelijk, industrieel, strak) maar vonden alleen productcategorieën — een fundamentele mismatch met de mentale kaart.
Pagina 05 — Ontwerpproces
Hoe we daar kwamen
Een gestructureerd dubbeldiamantproces aangepast voor e-commerce — onderzoeksintensief aan de voorkant, leveringsgericht aan de achterkant.
Ontdekken
Weken 1–2
Diepe onderdompeling in de probleemruimte — stakeholderinterviews, analytische audits, heuristische evaluaties en concurrentiebenchmarking om een gedeeld begrip van uitdagingen op te bouwen.
Deliverables
Heuristische auditrapport
Analytics-uitsplitsing
Concurrentiematrix
Stakeholderkaart
Pagina 06 — Gebruikersflow
Kernafrekenstroom
We brachten elke stap van de primaire gebruikersreis in kaart en optimaliseerden deze — van eerste indruk tot orderbevestiging.
Homepage
Ontdekken & bladeren
Categorie
Filteren & sorteren
Product
Evalueren & beslissen
Winkelwagen
Bestelling controleren
Afrekenen
Veilig betalen
Bevestiging
Bestelling geplaatst
Homepage
Ontdekken & bladeren
Categorie
Filteren & sorteren
Product
Evalueren & beslissen
Winkelwagen
Bestelling controleren
Afrekenen
Veilig betalen
Bevestiging
Bestelling geplaatst
Ontdekkingslaag
1
Binnenkomst via organisch/betaald2
Homepage hero verkennen3
Uitgelichte categorieën verkennen4
Trending producten bekijkenEvaluatielaag
1
Filteren op categorie/prijs2
Productdetails bekijken3
Recensies lezen4
Maatgids controleren5
Opslaan in verlanglijstConversielaag
1
Aan winkelwagen toevoegen2
Winkelwagenoverzicht controleren3
Verzendgegevens invoeren4
Betaalmethode kiezen5
Bestelling bevestigenPagina 07 — Wireframes
Lage-getrouwheid wireframes
Structurele verkenning vóór visueel ontwerp — lay-outbeslissingen valideren met stakeholders en gebruikers vóór we pixels vastleggen.
Homepage — Desktop
Homepage — Mobiel
Productpagina
Winkelwagen
Afrekenen
Verzending
Betaling
Overzicht
Pagina 08 — Eindontwerp
Meer geselecteerd werk
Eigen creatieve projecten en 27+ e-commerce-ervaringen — van branding en storytelling tot UX/UI en CRO.
Shopify Select Partner
26+ live winkels
★ Uitgelicht✦ Eigen projectEigen merk
craftedbyhanna.com
1 / 26 — Casestudy
Crafted by Hanna
Mijn eigen creatieve merk waarin design, technologie en gepersonaliseerde producten samenkomen. Van concept en branding tot digitale ervaring en e-commerce.
PlatformReact / Vite · Shopify
TypeCreative direction · branding · e-commerce · AI
RolCreative Designer
Gebruikte tools
FigmaShopifyClaudeLovableChatGPT
1 / 26
Pagina 09 — Ontwerpsysteem
Mangohoutonline Ontwerpsysteem
Een schaalbaar, token-gebaseerd ontwerpsysteem gebouwd voor Mangohoutonline — visuele consistentie op elk contactpunt, van productpagina tot checkout.
Kleurenpalet
base.css — CSS custom properties
CTA / Actie
CTA Terracotta
#C4632E
--terracotta-cta
CTA Hover
#A34E22
--cta-hover
Houtpalet
Wood 0 (licht)
#F4E9DA
--wood-0
Wood 1
#D9B98C
--wood-1
Wood 2 (primair)
#A9784B
--wood-2
Wood 3
#7A5230
--wood-3
Wood 4 (donker)
#4A311D
--wood-4
Salie palet
Sage 0 (licht)
#F1F3EC
--sage-0
Sage 1
#C3CBB0
--sage-1
Sage 3
#7E8A64
--sage-3
Sage 6 (donker)
#4B5439
--sage-6
Neutraal
White
#FFFFFF
--white
Sand 0
#FAF7F2
--sand-0
Sand 3
#A69C8D
--sand-3
Sand 6 (donker bruin)
#3A2F26
--sand-6
Typografie
font-family: Lato, "Helvetica"
Display — 900
Tijdloos mangohout
H1 — Bold
Meubels met karakter
H2 — Bold
Jouw interieur centraal
Body — Regular
Massief hout, met de hand afgewerkt
Caption — 300
Gratis bezorgd · Binnen 2 weken in huis
Knoppen
Bezig…
Badges & Labels
NieuwOp voorraadBijna opUitverkochtBestsellerSale
Schaduw
Geen
Subtiel
Kaart
Modal
Ruimtesysteem (8pt)
--space-1
8px
XS--space-2
16px
SM--space-4
32px
MD--space-6
48px
LG--space-8
64px
XL--space-12
96px
2XLToegankelijkheid (WCAG AA)
Aa
Wit op CTA terracotta
Ratio 4.5:1
AA
Aa
Wit op salie
Ratio 4.6:1
AA
Aa
Wit op hout
Ratio 6.1:1
AA
Aa
Donker op zand-0
Ratio 18.0:1
AA
Aa
Donkersalie op licht
Ratio 7.3:1
AA
Pagina 10 — CRO-verbeteringen
Voor vs Na
Elke ontwerpbeslissing werd gestuurd door conversiedata en gedragsanalytics. Dit is wat er veranderde en waarom.
Visuele hiërarchie
+34% CTA clicks
Vóór
Meerdere concurrerende CTA's, slecht typografisch contrast, onduidelijk focuspunt
Na
Één primaire CTA met sterk contrast, duidelijke typografieschaal, strategische witruimte
Productpagina's
+41% Add to Cart
Vóór
Kleine afbeeldingen, verborgen afmetingen, begraven recensies, onduidelijke levertijd
Na
Volledige afbeeldingen, prominente maattabel, recensies boven de vouw, transparante levertijd
Vertrouwenssignalen
-22% Abandonment
Vóór
Geen zichtbaar retourbeleid, geen vertrouwensbadges, bezorgkosten pas zichtbaar bij afrekenen
Na
Vertrouwensbadges boven de vouw, gratis retourbeleid prominent, bezorgkosten op productpagina
Afrekenproces
+58% Completion
Vóór
7-staps afrekenen met accountaanmaakpoort, verwarrende formulierlabels, geen voortgangsindicator
Na
3-staps afrekenen, gastafrekenen als standaard, inline validatie, duidelijke voortgangsindicator
Mobiele ervaring
+67% Mobile CVR
Vóór
72px aanraakdoelen, gebroken lay-outs op 375px, horizontaal scrollen, verborgen navigatie
Na
48pt minimale aanraakdoelen, vloeiende lay-out, onderste navigatiebalk, geoptimaliseerde duimzones
Sociaal bewijs
+29% Trust score
Vóór
Geen recensies zichtbaar, geen beoordelingen, geen gebruikersgegenereerde inhoud, verborgen getuigenissen
Na
Sterbeoordelingen op productkaarten, recensies met foto's, geverifieerde aankoopbadges
Pagina 11 — Responsief ontwerp
Elk scherm, elk apparaat
Mobiel-eerst ontwerpfilosofie — gebouwd voor 68% mobiel verkeer zonder de desktopervaring te compromitteren.
Desktop
1440px
12-kolomsraster, volledige navigatie, zijbalkfilters, 3–4 productkolommen
Laptop
1024px
12-kolomsraster, compacte nav, 3 productkolommen, compacte zijbalk
Tablet
768px
4-kolomsraster, hamburgermenu, 2 productkolommen, onderste filterblad
Mobile
375px
Enkele kolom, onderste navigatie, 1–2 productkolommen, duimzone CTA's
Live Breakpoint Preview
Desktop 1440px
Tablet 768px
Mobile 375px
Pagina 12 — Impact
Resultaten die tellen
Resultaten voor Mangohoutonline — gemeten in de eerste 4 maanden na lancering van het herontwerp.
+121%
Conversieratio
Sessies → aankoop
1,4%
3,1%
-29%
Checkout-verlating
Gebruikers die afhaken
72%
51%
+75%
Gem. sessieduur
Betrokkenheid per bezoek
1m 42s
2m 58s
+87%
Afreken-voltooiing
Bezoeker → betaald
31%
58%
+156%
Mobiele conversie
Smartphone-gebruikers
0,9%
2,3%
+28%
Klanttevredenheid
Na-lancering enquête
3,6 / 5
4,6 / 5
Conversieratio — Mangohoutonline — 4 maanden na herontwerp (%)
Pagina 13 — Ontwerpprincipes
Hoe ik ontwerp benader
Principes die elke beslissing sturen — van de breedste strategie tot het kleinste interactiedetail.
Mensgerichte ontwerp
Elke beslissing begint en eindigt bij de gebruiker. Echte inzichten van echte mensen sturen het ontwerp, niet aannames of trends.
Helderheid boven slimheid
De beste interface is er een die verdwijnt. Eenvoud bereik je niet wanneer niets meer kan worden toegevoegd, maar wanneer niets meer kan worden weggehaald.
Consistentie op schaal
Voorspelbare patronen verminderen cognitieve belasting. Een sterk ontwerpsysteem zorgt ervoor dat elk component zich gedraagt zoals gebruikers verwachten.
Prestaties zijn UX
Een snelle ervaring is een betere ervaring. Elke ontwerpbeslissing houdt rekening met de impact op laadtijd, interactievertraging en perceptie.
Toegankelijkheid eerst
Inclusief ontwerp creëert betere producten voor iedereen. WCAG AA minimum, toetsenbordnavigatie, schermlezers standaard ondersteund.
Ontwerp voor schaal
Systemen boven schermen. Componenten, tokens en patronen gebouwd om elegant te evolueren naarmate het product groeit en vereisten veranderen.
Pagina 14 — Mijn rol
Waar ik verantwoordelijk voor was
Als hoofdontwerper was ik bij elke fase betrokken — van eerste stakeholder-afstemming tot optimalisatie na lancering.
UX-onderzoek
Bruikbaarheidstests, heuristische evaluaties, analytics-diepteduiken
Informatiearchitectuur
Sitemapherontwerp, kaartsortering, boomtests, navigatietaxonomie
Interactieontwerp
Micro-interacties, statusovergangen, gebaardesign, animatieprincipes
UI-ontwerp
Hoge-getrouwheid schermen, componentontwerp, visuele hiërarchie, merkafstemming
Ontwerpsysteem
Tokenarchitectuur, componentenbibliotheek, documentatie, bijdragerichtlijnen
Prototyping
Interactieve Figma-prototypes, flowdemonstraties, stakeholderpresentaties
Overdracht aan ontwikkelaars
Geannoteerde specificaties, componentdocumentatie, Zeplin-integratie, QA-ondersteuning
Bruikbaarheidstesten
Begeleide sessies, onbegeleide Maze-flows, synthese en prioritering
Conversie-optimalisatie
A/B-testdesign, heatmapanalyse, funneloptimalisatie, tekst testen
Pagina 15 — Toolkit
Gereedschap van het vak
Een zorgvuldig samengestelde toolkit — gekozen voor vakmanschap, samenwerking en nauwkeurigheid.
F
Figma
UI-ontwerp
FJ
FigJam
Workshops
Sh
Shopify
E-commerce Platform
S+
Shopify Plus
Enterprise
GA
Google Analytics
Analytics
HJ
Hotjar
Heatmaps & CRO
Kv
Klaviyo
Email Marketing
Ch
Channable
Feed Management
Rc
Recharge
Subscriptions
N
Notion
Documentation
M
Monday
Agile Tracker
Mo
Mollie
Payments
AI
ChatGPT
AI Tools
Cl
Claude
AI Tools
Su
Suno
AI Muziek
Lv
Lovable
AI Webdesign & Dev
IV
InVideo
AI Video
Pagina 17 — Contact
Laten we digitale producten maken waar mensen van houden.
Open voor Creative Designer-functies en projecten op het snijvlak van visual design, UX/UI, AI en e-commerce. Gevestigd in Europa — wereldwijd beschikbaar.
© 2026 Hanna Bachtiar — Creative Designer · UX/UI · AI · E-commerce