Case study / Datavisualisering
Streamly
Ett dashboard som gör film- och seriedata från streamingtjänster överskådligt och enkelt att utforska.
Problem & bakgrund
Att hitta det bästa i ett växande utbud
Utbudet av filmer och serier växer ständigt, och det blir allt svårare att sålla bland alla rekommendationer för att hitta något värt att titta på. Syftet med projektet var att skapa en tjänst som gör det enkelt och inspirerande att upptäcka nya filmer och serier – genom att tydliggöra vad som faktiskt är populärt och högt rankat just nu.
Uppdraget blev att bygga en hemsida där användare kan jämföra populära filmer och serier mellan olika länder, se topplistor och sortera efter genre. Tjänsten riktar sig till personer som är intresserade av film och serier, och skulle upplevas ren och lättöverskådlig snarare än rörig.
Samarbete
Där design möter data
Projektet genomfördes i samarbete med en klass som läste Data Engineering (DE). DE-klassen ansvarade för att ta fram och bearbeta datan – hämtad från Netflix Tudum, IMDb och YouTube – som låg till grund för topplistorna, betygen och jämförelserna mellan länder.
Vår designgrupp ansvarade för research, intervjuer och användartester, samt det visuella – hur tjänsten skulle se ut och kännas. Beslut som till exempel att byta 'Monthly Nordic rank' mot ett tydligare 'performance score', och att visa antal visningar per vecka istället för per månad i ett stapeldiagram, togs gemensamt mellan grupperna utifrån användarnas behov.
Agil process
Från idé till beslut
Gruppen använde agila metoder genom hela projektet, bland annat Crazy 8s för att snabbt generera flera designidéer för olika element. Varje gruppmedlem fick sedan rösta fram de idéer de tyckte fungerade bäst, vilket gav ett demokratiskt underlag för beslut kring exempelvis hur statistik och rankningar skulle visualiseras.
1 / 2 — Planering av arbetssätt och metoder på whiteboard
Visuell design
Ett varmt, filmiskt designspråk
Med utgångspunkt i en tydlig färgpalett och typografi utformades diagram och datavisualiseringar för att vara lättlästa och snabba att tolka, med inspiration från hur streamingtjänster som Netflix balanserar redaktionellt innehåll med funktionell UI.
Identitet 1 / 2
Färgpalett
En varm, filmisk känsla i mörka toner. Basfärgerna är svart och mörkbrun, kompletterade med amber och orange som accentfärger för knappar, grafer och logotyp – framtagna med en WCAG 2.1-kontrastanalys för god läsbarhet.
Från system till skärmar
Med färger, typografi och komponenter på plats kunde vi bygga appens tre vyer konsekvent – även när flera personer designade samtidigt.
Skärmar 1 / 3
Nordic Charts
Filtren ligger samlade ovanför diagrammen så att användaren alltid ser vad som styr datan. Amber och orange skiljer filmer från serier i både stapel- och donutdiagrammet.
Resultat & lärdomar
Resultatet
En klickbar prototyp där användaren kan filtrera Nordens topplistor efter land, år och genre, och jämföra två titlar sida vid sida. Designen byggdes på riktig data som Data Engineering-studenterna tog fram.
Lärdomar
Reflektion
"Det som överraskade mig mest var hur mycket datan styr designen. En graf måste fungera med de siffror som finns, inte bara se bra ut."