Back

Back

Dashboard-redesign

Dashboard för freegrapesociety.com, översiktsvy

Bakgrund

Free Grape Society är en startup som utvecklar en webbplattform för vinintresserade, restauranger, vinproducenter och vinexperter. Plattformen möjliggör för vinproducenter att marknadsföra sina vingårdar och sälja sina produkter, samtidigt som restauranger kan upptäcka och köpa viner som tidigare inte varit tillgängliga för dem. Dessutom kan vinexperter och vinproducenter arrangera vinprovningar. För vinintresserade finns även ett community där de kan utbyta kunskap och erfarenheter. 

 Med en så bred målgrupp krävs ett genomarbetat och flexibelt gränssnitt för att hantera användarnas personliga aktiviteter och kontoinställningar. Systemet måste också stödja att en användare kan tillhöra flera roller samtidigt, exempelvis kan en restaurang även vara en vinexpert eller en konsument (B2C). Dessutom varierar priser och innehåll beroende på användarens roll (B2B/B2C).

Free Grape Society’s ursprungliga dashboard var tänkt som en samlad plats för alla användartyper: vinmakare, restauranger, vinexperter och konsumenter. I praktiken innebar det att alla möttes av samma vy – fylld med val och funktioner som inte alltid var relevanta. Resultatet blev en överbelastad användarupplevelse och onödigt många steg för att utföra enkla uppgifter.

Utmaning

Dashboarden behövde bli mer fokuserad och tydlig. De olika användartyperna – Winery, Restaurant, Wine Expert och Consumer – har helt olika behov. Att samla alla i samma vy skapade förvirring, dubbelarbete och onödiga klick.

De största problemen som identifierades var:

  • För många menyval som inte var relevanta för alla.
  • Oklart vem som kunde beställa, rekommendera eller publicera viner.
  • Svårt att växla mellan flera restauranger eller vingårdar.
  • Låg känsla av kontroll över ordrar och favoriter.
Den tidigare dashboarden före redesignen

Research & Insikter

För att förstå problemet analyserades användarbeteenden, feedback och flöden i systemet.

Metoder:

  • Heuristisk utvärdering
  • Intervjuer med vinproducenter och restauranger
  • Flowchart-analys
  • Testsessioner med FGS interna användare

Insikter:

  • De flesta användare använder bara 3–4 funktioner.
  • Många konton är kopplade till flera företag (ex. flera restauranger).
  • Det fanns stort behov av att kunna växla roll snabbt.
Flödesschema över användarflödet i dashboarden

Designprocess

Mål:

Att skapa en intuitiv och flexibel dashboard som anpassar sig efter användarens roll och behov.

Steg:

  1. Kartläggning av roller — definiera vilka funktioner varje användartyp faktiskt behöver.
  2. Inspirationsanalys — studera hur plattformar som Netflix, Viaplay och Airbnb hanterar användarväxling.
  3. Prototyper & mockups — designa dedikerade vyer för Winery och Restauran .
  4. Testning & iteration — testa nya flöden med riktiga användare.
Flödesschema över användarflödet i dashboarden Inspirationsbilder för dashboardens designriktning Exempel på referensgränssnitt för dashboarden

Lösningen

Den nya dashboarden identifierar användarrollen direkt vid inloggning. Baserat på det laddas en relevant vy:

För vinproducenter (Winery):

  • Fokus på produkter, lager och orderstatus
  • Möjlighet att klona produkter och hantera flera vingårdar

För restauranger (Restaurant):

  • Fokus på vinlistor, återbeställningar och favoritviner
  • Tydlig översikt över ordrar och vinimport

För vinexperter:

  • Fokus på rekommendationer, certifikat och profil (kommande modul)
Wireframe för dashboard-layouten, skiss 1 Wireframe för dashboard-layouten, skiss 2 Wireframe för dashboard-layouten, skiss 3

Resultat

Den nya dashboarden identifierar användarrollen direkt vid inloggning. Baserat på det laddas en relevant vy:

Effekter av redesignen:

  • Antalet val i huvudmenyn minskade från 12 till 6 per roll
  • Navigeringstiden till centrala uppgifter minskade med ca 40 %
  • Användarna upplevde en tydligare struktur och bättre kontroll

Citat från test:

“Nu ser jag bara det som rör mitt företag – det känns mycket mer fokuserat.” “Att växla mellan våra restauranger går snabbt och smidigt.”

Wireframe för dashboard-layouten, skiss 1 Wireframe för dashboard-layouten, skiss 2 Wireframe för dashboard-layouten, skiss 3

Nästa steg

  • Implementera vinexpert-dashboard
  • Bygga in notifieringar och aktivitetshistorik
  • Introducera personliga genvägar och “most used actions”
Wireframe för dashboard-layouten, skiss 1 Wireframe för dashboard-layouten, skiss 2 Wireframe för dashboard-layouten, skiss 3