Fágun á upplifun Vindome

Vindome Case Study

Hápunktar ferlisins

Í tíu vikna spretti rýndum við í fjárfestingarferli Vindome. Með því að fækka núningapunktum í nýliðun og skýra framsetningu gagna, tókst okkur að skapa traustvekjandi upplifun sem hvetur notendur til að taka fyrsta skrefið í vínfjárfestingum.

Áskorunin

Vindome átti í erfiðleikum með að virkja skráða notendur. Appið var flókið fyrir byrjendur og upplýsingagjöf óljós, sem skapaði óvissu hjá mögulegum fjárfestum.

Tækifæri

Að brúa bilið á milli flókins vínmarkaðar og áhugafólks með því að bjóða upp á skýrari leiðsögn og dýpri innsýn í eignasafnið.

Mitt hlutverk

Notendarannsóknir · UX Hönnun · UI Hönnun · Framsetning

Geiri

Eðalvín · Fjármál

Tól

Figma · Adobe CC

Tímarammi

10 vikur

Bakgrunnur verkefnis

Fágun á upplifun eðalvína

Fjögurra manna teymi okkar tók höndum saman við Vindome, fjárfestingarvettvang fyrir eðalvín, í tíu vikna verkefni sem skiptist í tvo fasa: notendarannsóknir og frumgerðasmíði. Vindome vildi betrumbæta notendaupplifun sína til að laða að nýja fjárfesta og gera appið auðveldari í notkun.

Vindome App Overview
Sýnishorn af lokafrumgerð okkar

Áskorunin

Fjárfestingar í eðalvínum eru sérhæfður markaður, og Vindome appið átti við notagildisvandamál að stríða sem gerði nýjum notendum erfitt fyrir að byrja. Helstu vandamál voru:

  • Ruglingslegt nýliðaferli (onboarding) sem skildi notendur eftir óvissa um næstu skref.
  • Óskipulagt leiðakerfi, með dreifðu efni og biluðum hlekkjum.
  • Skortur á skýrum fjárfestingarupplýsingum, sem gerði ákvarðanatöku erfiða.

Markmið okkar var að gera appið skýrara, meira grípandi og betur til þess fallið að skila viðskiptum.

Vindome Challenge
Hönnunaráskorunin

Ferlið

Notendarannsóknir

Þar sem ekkert okkar var sérfræðingur í vínfjárfestingum byrjuðum við á heimildavinnu til að kynnast greininni. Þó Vindome hafi útvegað notendahópa (personas), brúuðum við bilið með því að hafa samband við raunverulega fjárfesta.

  • Rýndum í appið og vefsíðuna til að greina helstu núningapunkta.
  • Tókum viðtöl við sérfræðinga í greininni og virka Vindome notendur í gegnum LinkedIn.
  • Framkvæmdum notendaprófanir með fimm nýjum fjárfestum.

Við notuðum skýringarmyndir af upplýsingaarkitektúr og forgangsröðunarfylki (priority matrix) til að ákveða hvaða lagfæringar myndu hafa mest áhrif.

Vindome Design Process
Hönnunarferlið okkar

Frumgerðir og lausnir

1. Gáfulegra nýliðaferli (Onboarding)

Við kynntum þriggja prófíla innskráningarkerfi, sem gerir notendum kleift að velja sitt reynslustig og fá aðgang að viðeigandi eiginleikum strax.

Endurhannað ferðalag notanda
Endurhannað ferðalag notanda

2. Skilvirkara leiðakerfi

Endurhönnuðum aðalvalmyndina fyrir betra skipulag og bættum mælaborðið til að gera helstu aðgerðir auðveldari að finna.

Upplýsingaarkitektúr
Upplýsingaarkitektúr

3. Yfirhalning á markaðsviðmóti (Live Market)

Bættum við útfellanlegum útskýringum fyrir byrjendur og endurbættum vínsíður með dýpri fjárfestingarupplýsingum.

Umbætur á Live Market
Umbætur á Live Market

4. Endurskipulagning eignasafns (Portfolio)

Endurhugsuðum eignasafnið sem sýndarvínkjallara, sem tengir stafræna upplifun við líkamlega ástríðu vínsafnara.

Endurhönnun eignasafns
Endurhönnun á upplifun eignasafns

5. Betri síun fyrir söfn

Notendur geta nú síað eftir verðbili og fjárfestingartíma, stutt af gagnlegum útskýringum í gegnum allt flæðið.

Bætt síun
Bætt síunarflæði

Niðurstaða og áhrif

Endurgjöf notenda lagði áherslu á markverðar umbætur á kjarnaupplifun vörunnar:

  • Mýkra nýliðaferli – Notendur fundu fyrir meiri leiðbeiningu og öryggi frá upphafi.
  • Áreynslulaust leiðakerfi – Minni ruglingur leiddi til meiri þátttöku.
  • Innsæisdrifið eignasafn – Passaði betur við hugarlíkön raunverulegra fjárfesta.
Vindome Outcome Summary
Samantekt á niðurstöðum og áhrifum
Yfirferð um verkefnið

Aftur í hönnunarsafn

← Aftur á forsíðu

Næsta verkefni

Ericsson →
const prevBtn = document.querySelector('.lightbox-prev'); const nextBtn = document.querySelector('.lightbox-next'); const links = document.querySelectorAll('.lightbox-link'); let currentIndex = 0; links.forEach((link, index) => { link.addEventListener('click', e => { e.preventDefault(); currentIndex = index; lightboxImg.src = link.href; lightbox.classList.add('active'); document.body.style.overflow = 'hidden'; }); }); closeBtn.addEventListener('click', () => { lightbox.classList.remove('active'); document.body.style.overflow = ''; }); lightbox.addEventListener('click', e => { if (e.target !== lightboxImg && e.target !== prevBtn && e.target !== nextBtn) { lightbox.classList.remove('active'); document.body.style.overflow = ''; } }); prevBtn.addEventListener('click', e => { e.stopPropagation(); currentIndex = (currentIndex - 1 + links.length) % links.length; lightboxImg.src = links[currentIndex].href; }); nextBtn.addEventListener('click', e => { e.stopPropagation(); currentIndex = (currentIndex + 1) % links.length; lightboxImg.src = links[currentIndex].href; }); document.addEventListener('keydown', e => { if (!lightbox.classList.contains('active')) return; if (e.key === 'Escape') { lightbox.classList.remove('active'); document.body.style.overflow = ''; } else if (e.key === 'ArrowLeft') { currentIndex = (currentIndex - 1 + links.length) % links.length; lightboxImg.src = links[currentIndex].href; } else if (e.key === 'ArrowRight') { currentIndex = (currentIndex + 1) % links.length; lightboxImg.src = links[currentIndex].href; } }); // Animated grid background (function () { const container = document.getElementById('hero-grid-bg'); if (!container) return; const width = 40, height = 40, numSquares = 50, maxOpacity = 0.5, durationMs = 4000; const svgNS = "http://www.w3.org/2000/svg"; const svg = document.createElementNS(svgNS, "svg"); svg.setAttribute("width", "100%"); svg.setAttribute("height", "100%"); svg.style.fill = "transparent"; svg.style.stroke = "var(--border-color, rgba(156, 163, 175, 0.1))"; const defs = document.createElementNS(svgNS, "defs"); const pattern = document.createElementNS(svgNS, "pattern"); const patternId = "grid-" + Math.random().toString(36).substr(2, 9); pattern.setAttribute("id", patternId); pattern.setAttribute("width", width); pattern.setAttribute("height", height); pattern.setAttribute("patternUnits", "userSpaceOnUse"); pattern.setAttribute("x", "-1"); pattern.setAttribute("y", "-1"); const path = document.createElementNS(svgNS, "path"); path.setAttribute("d", `M.5 ${height}V.5H${width}`); path.setAttribute("fill", "none"); pattern.appendChild(path); defs.appendChild(pattern); svg.appendChild(defs); const bgRect = document.createElementNS(svgNS, "rect"); bgRect.setAttribute("width", "100%"); bgRect.setAttribute("height", "100%"); bgRect.setAttribute("fill", `url(#${patternId})`); bgRect.style.opacity = "0.5"; svg.appendChild(bgRect); const squaresGroup = document.createElementNS(svgNS, "svg"); squaresGroup.setAttribute("x", "-1"); squaresGroup.setAttribute("y", "-1"); squaresGroup.style.overflow = "visible"; svg.appendChild(squaresGroup); container.appendChild(svg); let cW = container.clientWidth || window.innerWidth, cH = container.clientHeight || 500; new ResizeObserver(e => { cW = e[0].contentRect.width; cH = e[0].contentRect.height; }).observe(container); function animate(el) { const cx = Math.floor(Math.random() * cW / width); const cy = Math.floor(Math.random() * cH / height); // Center within the 40x40 block (40 * 0.25 = 10 offset for a 20x20 logo) el.setAttribute("x", cx * width + (width * 0.25)); el.setAttribute("y", cy * height + (height * 0.25)); // Since the logo is white, we use sepia + saturate to give it color before rotating the hue el.style.filter = `sepia(1) saturate(1000%) hue-rotate(${Math.floor(Math.random() * 360)}deg) brightness(0.8)`; let start = null, phase = 'in'; function step(ts) { if (!start) start = ts; const elapsed = ts - start; if (phase === 'in') { el.style.opacity = Math.min(elapsed / 800 * maxOpacity, maxOpacity); if (elapsed >= 800) { start = ts; phase = 'hold'; } } else if (phase === 'hold') { if (elapsed >= durationMs) { start = ts; phase = 'out'; } } else { el.style.opacity = Math.max(maxOpacity - elapsed / 800 * maxOpacity, 0); if (elapsed >= 800) { animate(el); return; } } requestAnimationFrame(step); } requestAnimationFrame(step); } for (let i = 0; i < numSquares; i++) { const logo = document.createElementNS(svgNS, "image"); logo.setAttribute("href", "../assets/vindome/vindome_logo.svg"); logo.setAttribute("width", width * 0.5); logo.setAttribute("height", height * 0.5); logo.style.opacity = "0"; squaresGroup.appendChild(logo); setTimeout(() => animate(logo), Math.random() * durationMs); } })();