Kort om prosjektet

Spoverlay er en offentlig OBS-plugin som lar streamere vise gjeldende Spotify-låt direkte på streamen ved hjelp av en nettleserkilde. Kunden tok kontakt med meg for å redesigne sitt eksisterende AI-genererte overlay, som hadde store begrensninger i både visuell klarhet og tilpasningsmuligheter.

Målene var å:

• Rydde opp i visuelt hierarki og problemer med størrelser

• Fjerne Spotify-logoen for å unngå plattformproblemer

• Skape et rent, moderne design som var både estetisk tiltalende og praktisk for live bruk

• Tilby flere layoutvariasjoner for ulike bruksområder
  
  

Prosess

1. Evaluering og utforskning

Jeg gikk gjennom det AI-genererte designet og identifiserte svakhetene: dårlig tekststørrelse, inkonsekvent luft (padding), begrenset skalerbarhet og uklar merkevarebygging. Etter å ha diskutert kundens behov, fokuserte jeg på å omarbeide overlayet med brukerfokusert klarhet og fleksibilitet for streameren i tankene.

2. Idéutvikling og retning

Jeg skisset tre layoutkonsepter i Figma:

• En oppryddet versjon av det originale

• En kompakt, minimalistisk pilleformet layout

• En stor, oppslukende layout for musikkfokuserte streamer

Jeg introduserte også et enkelt designsystem med skalerbare størrelser, modulære layouter og dynamiske fargeregler basert på albumcoveret.

3. Visuell iterering

Jeg utforsket:

• Egendefinerte fargetemaer som automatisk tilpasser seg albumcoveret

• En frostet glass-effekt for overlays som plasseres direkte oppå live spilling

• Bruk av symbolske separatorer (som en firetagget stjerne) for å appellere til et yngre, designbevisst publikum

• Forbedret lesbarhet gjennom finjustert typografi og luft (padding)
  
  

Endelige design

Deres gamle design

Mine design

#1 - Originalt design gjenskapt

Først gjenskapte jeg det opprinnelige designet i et skalerbart format med bedre tekststørrelse for økt lesbarhet. Jeg økte størrelsen på albumcoveret for å skape mer symmetri i designet og la kunsten skille seg mer ut. Jeg forbedret også det visuelle hierarkiet ved å tilpasse avstander, skriftstørrelse og fargebruk.

#2 - Pille-design

Deretter ønsket jeg å skape et design som passet bedre til produktets bruksområde. Siden dette er et overlay-element for strømming, innså jeg at selve streamen bør forbli hovedfokuset. Derfor ønsket jeg å lage et mindre design som støttet dette.

Jeg brukte et nytt fargeskjema (brukere kan tilpasse disse fargene som de vil, og fargen tilpasser seg albumcoveret som standard) for å matche albumet, og laget en tonings-effekt (fade-out) mellom albumcoveret og tekstelementene for å få det til å se renere ut. Jeg brukte også det firetaggede stjernesymbolet som en separator, noe som er populært blant den yngre målgruppen som bruker et slikt produkt, og som gjør at det skiller seg ut som mer kreativt og unikt.

Jeg laget også en versjon av dette med en frostet glass-effekt, der bakgrunnen vil tilpasse seg og bli uskarp basert på bildet bak.

Uten bakgrunn

Med bakgrunn

#3 - Stor visning

Til slutt laget jeg en større variasjon for tilfeller der den som strømmer ønsker at overlayet skal være et av hovedelementene i streamen. For eksempel hvis streameren lytter til et album live på streamen og gjør en reaksjon/anmeldelse av det. Denne har også en frostet glass-effekt, og tekstfargen tilpasser seg basert på albumcoveret.

Uten bakgrunn

Med bakgrunn

Sluttresultat

Kunden elsket de endelige resultatene og planlegger å implementere alle de tre overlayene som valgbare stiler i Spoverlay.

Dette er hva de sa om arbeidet mitt:
«Connor leverte akkurat det vi trengte for vår integrasjon av musikk-overlay. Han designet et intuitivt og responsivt grensesnitt som passet perfekt med produktet vårt, noe som forbedret brukeropplevelsen betydelig. Hans UI/UX-designferdigheter er utmerkede, og han var vennlig og pålitelig gjennom hele samarbeidet vårt. Jeg vil definitivt jobbe med ham igjen på fremtidige designprosjekter.»