Dashboard – Rollbaserad upplevelse för Free Grape Society
Final dashboard concept showing role-based navigation and product management.
Bakgrund
Free Grape Society (FGS) är en marknadsplats som kopplar samman europeiska vingårdar med konsumenter, restauranger och vinexperter. En central utmaning i produkten är att samma användarkonto kan representera flera olika roller. Från privat konsument, vinproducent, vin expert och restaurang. Varje roll har olika mål, arbetsuppgifter och digital mognad.
Den tidigare dashboarden blandade innehåll och funktioner från flera roller samtidigt. Det skapade förvirring, hög kognitiv belastning och gjorde det svårare, särskilt för användare med låg IT-vana.
Målet med den nya dashboarden var att:
- Göra upplevelsen enklare och mer lättförståelig
- Endast visa information som är relevant för den aktiva rollen
- Minska kognitiv belastning och navigationsfriktion
- Skapa en skalbar struktur för framtida roller och funktioner
The previous dashboard mixed actions and information from multiple roles, creating confusion and cognitive overload.
Kontext & förutsättningar
Flera profiler / roller
En och samma användare kan agera som:
- Konsument
- Vinproducent
- Restaurang
- Vinexpert
Varje roll har olika behov:
- Vinproducenter: ordrar, produkter, logistik och vingårdsprofil
- Restauranger: inköp, leveranser och orderhistorik
- Vinexperter: rådgivning, förfrågningar och profil/trovärdighet
- Konsumenter: upptäckt, köp och kontohantering
Användarbeteenden & mål
Insikter från intervjuer med användare och interna experter visade att:
- Många användare har låg teknisk trygghet
- Användarna har en stor variation i sin förståelse av engelska.
- Användare går oftast in i dashboarden för att lösa en konkret uppgift snabbt
- Blandat innehåll från flera roller skapade osäkerhet kring vad som var relevant
Detta ledde till en tydlig UX-princip:
Dashboarden ska endast visa information som är relevant för den roll användaren just nu agerar som.
Metod
Personas & användarinsikter
Rollbaserade personas baserade på:
- Intervjuer med vinproducenter
- Intervjuer med sakkunniga på FGS
- Feedback från tidiga användare
- Kartläggning av mål, frustrationer och digital mognad per roll
Benchmarking & mönsteranalys
- Jämförelse av navigationsstruktur, rollseparering och dashboard-logik mot etablerade e-handelsplattformar som: Amazon, IKEA och andra större marknadsplatser
- Analys av hur dessa plattformar separerar köpare och säljare, hanterar kontobyten och minskar kognitiv belastning
- Användes som argumentation gentemot stakeholders för val av struktur, navigation och copy
Informationsarkitektur & UX
- Rollbaserad informationsarkitektur
- Prioritering utifrån uppgiftsfrekvens per roll
- Navigationsstruktur och länkordning
- Progressive disclosure: visa endast det som är relevant i rätt kontext
UX Copy & tone of voice
- Framtagning av UX copy-principer anpassade till FGS tone of voice
- Iterationer kring:
- Menynamn
- Knapptexter
- Tomma lägen (empty states)
- Microcopy
- Hover-copy
- Fokus på tydlighet, handlingsorienterat språk och minskad tolkningsosäkerhet för internationella och icke-tekniska användare
Prototyp & validering
- Interaktiva prototyper i Figma
- Variabler och komponentvarianter för att simulera:
- Rollbyte
- Dynamiskt innehåll
- Färgkodning per roll
- Validering med interna stakeholders
Process & iterationer
Vision vs implementation (mvp)
Tidiga iterationer och wireframes representerar en vision för framtida dashboard. Den slutliga versionen som implementeras har anpassats efter:
- Befintlig länkstruktur
- Tekniska begränsningar
- Existerande produktarkitektur
Detta resulterade i två parallella spår:
- Iteration / vision – långsiktig UX-riktning
- Implementerad version – pragmatisk lösning som kan lanseras nu
Detta arbetssätt möjliggjorde förbättrad UX utan att kräva en fullständig teknisk ombyggnad.
Rollbaserad navigation & “Switch account”
Användaren väljer aktiv roll via “Switch account”. När rollen ändras uppdateras:
- Navigation
- Innehåll
- Namn
- Logo/avatar
- Färgtema
Detta stödjer en tydlig mental modell: ”Just nu agerar jag som vinproducent.”
Hover-lägen & fördröjd microcopy (1000 ms)
Navigationslänkar använder progressiv guidning:
- Vid hover mörknar bakgrunden för att visa fokus
- Efter 1000 ms visas kort microcopy med beskrivande text vad länken innebär.
Fördröjningen är medveten: - Om användaren vilar på en länk signalerar det osäkerhet eller behov av bekräftelse
- Microcopy visas bara när det behövs, vilket minskar visuellt brus
- Stödjer inlärning utan att störa vana användare
- Hjälper internationella och osäkra användare att förstå vad varje länk innebär
Detta skapar balans mellan ett rent gränssnitt och kontextuell hjälp.
Länkordning & namngivning
- Länkar är sorterade efter uppgiftsfrekvens och vikt per roll
- Personliga länkar grupperas under “My …”
- Support placeras längre ner i strukturen men är alltid tillgänglig
- Namngivning inspirerad av etablerade e-handelsmönster för lägre inlärningströskel
Visuell rollmarkering
Roller särskiljs visuellt med:
- Färgkodning
- Logo/avatar
- Rollnamn i header
Detta stödjer igenkänning framför minne och gör det lättare att hålla koll på vilken kontext man befinner sig i.
Designprinciper
- Relevans före fullständighet
- Igenkänning före minne
- Progressive disclosure
- Konsekvens mellan roller
- Tillgänglig UX copy för internationella användare
Resultat
Den nya dashboard-strukturen:
- Minskar kognitiv belastning genom tydlig rollseparering
- Gör det enklare att förstå vilka handlingar som är relevanta
- Förbättrar onboarding för användare med låg IT-vana
- Skapar en skalbar grund för framtida roller och funktioner
- Harmoniserar navigation och UX copy med etablerade e-handelsmönster
Min roll
Ux designer
- UX-strategi & koncept
- Personas & användarinsikter
- Benchmarking (Amazon, IKEA m.fl.)
- Informationsarkitektur
- UX copy & tone of voice
- Prototyping i Figma
- Iterativ design med stakeholders
- UI