Innhold
- Hva førte til redesignet?
- Hva var din designtilnærming til prosjektet?
- Hvordan kom du på konseptet for destinasjonssiden?
- Hva brukte du til å bygge nettstedet?
- 05. Hva var det mest utfordrende ved prosjektet?
Social jukebox Rdio er en online musikktjeneste, med over 20 millioner sanger tilgjengelig for brukere. I et behov for oppdatering gjennomgikk selskapets nettstedsdesign en minimal og elegant makeover, som bruker forskjellige albumillustrasjoner i en ny, iøynefallende destinasjonsside. Vi snakket med visuell designleder på prosjektet Geoff Koops, UX-designer Mike Towber og frontendingeniør Jason Norris for å finne ut mer ...
Hva førte til redesignet?
Geoff Koops: På tvers av Rdios design- og ingeniørarbeid er det et konsekvent ønske om reduksjon og forenkling - for å forbedre brukernes opplevelse, for å redusere vedlikehold og tekniske kostnader, for å kommunisere vakkert og økonomisk. Så da vi fant riktig tidsvindu for dette redesignprosjektet, ble den samme tilnærmingen brakt på nettstedet.
Det føltes som vi kunne redusere og forenkle vår markedsføring på nettet dramatisk: færre ord, færre sider, færre bildelåsinger av telefoner og nettbrett med skjermer. En mindre omfattende, alt-men-kjøkken-vask beskrivelse av produktet, mindre overtalelse om produktet, og en mer direkte vei inn.
I tillegg trengte Rdio.com bare en oppdatering. Den forrige versjonen av nettstedet var elegant og ganske effektiv, og det hadde tjent oss godt i et par år, men det begynte å vise sin alder, følte seg ut av synkronisering med noen store oppdateringer på nett og mobil produktdesign som hadde rullet ut i flere måneder og med økende frekvens.
I tillegg til et utdatert utseende, inneholdt nettstedet faktisk litt utdatert informasjon. Det var nok innhold til at det var tungt, spesielt for et slankt, for det meste produktfokusert designteam, for å holde alle kopier og produktskjermene oppdatert. Vi ønsket å begrense mengden innhold delvis, slik at vi ikke ville ha det veldig mye innholdsvedlikehold.
Hva var din designtilnærming til prosjektet?
GK: For oss gjør en radikalt enkel markedsføringsside jobben på en side. Og ikke en enorm langrullende, 20 minutter å lese-alt-siden. Snarere en kort side (med litt rulling tillatt) som fikk den nødvendige informasjonen over. Vi holdt det som en praktisk retningslinje da vi nærmet oss prosjektet. Men kortfattetheten i vår tilnærming var ikke bare et vilkårlig mål.
Rdio er sitt eget beste markedsføringsnettsted. Det er gratis å registrere seg og bruke, og vi tror brukerne vil bli glade når de begynner å lytte til og oppdage musikk. Vi tror på produktet lidenskapelig. Så å få folk til å bruke mye tid på de utloggede sidene på nettstedet vårt er selvfølgelig ikke vårt mål - vi vil at folk skal bruke tid på produktet.
Når vi nærmet oss dette prosjektet, ønsket vi å forenkle proposisjonen på destinasjonssiden. Vi prioriterte å lage et raskt, åpenbart inngangspunkt i appen for besøkende som allerede hadde bestemt seg - å plassere et stort Facebook / e-postmeldingsalternativ foran og i midten - og eliminere mindre viktige oppfordringer til handling og ikke-nødvendig kopi.
Rdio er sitt eget beste markedsføringsnettsted. Vi tror på produktet lidenskapelig
Når vi erkjenner at det vil være folk som trenger mer informasjon før de tar en beslutning, ga vi en kortfattet forklaring på abonnementsalternativene og et par "søyle" -funksjoner, men skjulte det bare "under folden" på sidelast, uansett hvilken besøkendes nettleser vindusstørrelse.
Faktisk begynte vi å tenke mer på å redesigne markedsføringssiden som å bare redesigne den første skjermen til produktet for brukere som ikke har logget på ennå - og selvfølgelig optimaliserte vi de besøkende som aldri har logget på.
Vi ønsket et nettsted for utloggede brukere og nye besøkende som følte at det hørte hjemme i samme designfamilie, og ble designet av de samme hendene som de som designet Rdio-appen, mens de ikke lånte så direkte fra produktdesignet som å forvirre besøkende om hvor grensene var.
Gjennom det hele forankret et par grunnleggende prioriteringer våre utforskninger: å gi vedvarende registreringstilgang og massivt forenkle meldinger.
Hvordan kom du på konseptet for destinasjonssiden?
Vi visste at destinasjonssiden måtte være en rik opplevelse, men ikke en lang, krevende eller til og med for oppslukende opplevelse, for mens vi ønsket å fange oppmerksomhet, ønsket vi ikke å avspore våre nye brukere.
På Rdio gjør vi vårt beste for å komme oss ut av veien og la musikken være stjernen, og vi prøver å gjøre opplevelsen av å lytte til og oppdage musikk så herlig og elegant som mulig. En måte vi prøver å oppnå disse tingene på, er å behandle albumkunstverket med mye respekt og bruke det som den viktigste ingrediensen på paletten vår.
Når vi utforsket konsepter for destinasjonssiden, så vi på alternativer som involverte å spille innebygd musikk eller video, eller lage originalfotografering eller bringe inn eksisterende musikkorientert og livsstilsfotografering. Bilder og video som skildrer effekten eller livsstilen rundt musikk kan være stemningsfulle og til og med bevegende, men de risikerer også å føle seg litt manipulerende og "reklame-y".
Til slutt valgte vi konseptet som mest eksplisitt demonstrerte at respekt for albumkunstverk og posisjonerte album som det viktigste visuelle elementet i de forskjellige tilstandene på siden. For oss var visuell sammenslåing av musikken og budskapet mest tro mot produktet og vår kultur på Rdio.
Albumkunst blir bokstaver innebygd i de fire overskriftsordene i den animerte åpningssekvensen. Og i sidens løste tilstand er mer albumgrafikk lagdelt bak et halvt gjennomsiktig Rdio-blått fargefelt, slik at du får et glimt rett gjennom de utslåtte bokstavene i tagline ("Music evolved. Play and discover free") til kunstverket under - et forgrunns- / bakgrunnsspill som nikker til den endeløse strømmen av musikk som venter inne i Rdio.
Hva brukte du til å bygge nettstedet?
Jason Norris: UX og visuell design skjedde for det meste i Illustrator og Photoshop, med den improviserte tavlen eller blyantskissene som fanget spontane tanker hele tiden. Prototyping av bevegelse og rulling ble gjort i After Effects og Keynote.
Når det gjelder å bygge nettstedet, hadde det forrige markedsføringsstedet vært et eget, statisk nettsted, som forhindret oss i å kunne dele stiler og biter av funksjonalitet vi hadde utviklet for Rdio-appen. Ingeniørene våre bygde den nye destinasjonssiden ved hjelp av det samme komponentbaserte Javascript-rammeverket som vi bruker til å bygge Rdio-appen, som er bygget på toppen av Backbone.js-rammeverket.
Vi brukte HTML5-lerretelementet tungt for å dynamisk gjengi den uskarpe albumgrafikken og teksten "cut-outs". Rullingen styres av noe finjustert, tilpasset Javascript.
05. Hva var det mest utfordrende ved prosjektet?
Mike Towber: Å slippe sekundære og tertiære nivåer av informasjon, eliminere 'side-door' innganger, og redusere handlingene som besøkende på nettstedet kan ta, er et sprang i troen.
Visst, du kan starte eller teste flere scenarier for å minimere overraskelser, og gjenta det du lærer, men forenkle nettstedet vårt at mye alltid ville ta mye nerve på et tidspunkt, samt gjentatte påminnelser om originalen mål og prioriteringer, for at vi bare skal gå for det.
Hva synes du om Rdio redesign? Gi oss beskjed i kommentarene.
