Nilalaman
- Ano ang nag-udyok sa muling pagdisenyo?
- Ano ang iyong diskarte sa disenyo sa proyekto?
- Paano mo naisip ang konsepto para sa landing page?
- Ano ang ginamit mo upang mabuo ang site?
- 05. Ano ang pinaka-mapaghamong aspeto ng proyekto?
Ang social jukebox Rdio ay isang serbisyo sa online na musika, na may higit sa 20 milyong mga kanta na magagamit sa pagtatapon ng mga gumagamit. Sa isang pangangailangan ng pag-refresh, ang disenyo ng website ng kumpanya ay sumailalim sa isang minimal at matikas na makeover, na gumagamit ng iba't ibang mga likhang sining sa isang bagong, nakakaakit na landing page. Pinag-usapan namin ang lead ng visual na disenyo sa proyekto na Geoff Koops, taga-disenyo ng UX na si Mike Towber at engineer ng front end na si Jason Norris upang malaman ang higit pa ...
Ano ang nag-udyok sa muling pagdisenyo?
Geoff Koops: Sa buong pagsisikap sa disenyo at engineering sa Rdio, mayroong isang pare-parehong pagnanais para sa pagbawas at pagpapadali - upang mapabuti ang karanasan ng aming mga gumagamit, upang mabawasan ang mga gastos sa pagpapanatili at panteknikal, upang makipag-usap nang maganda at matipid. Kaya nang nahanap namin ang tamang window ng oras para sa muling pagdidisenyong proyekto, ang parehong diskarte na iyon ay dinala sa website.
Naramdaman naming maaari naming mabawasan nang malaki at gawing simple ang aming pagkakaroon ng web marketing: mas kaunting mga salita, mas kaunting mga pahina, mas kaunting mga lock-up ng imahe ng mga telepono at tablet na may mga screen. Isang hindi gaanong komprehensibong, lahat-ngunit-ang-kusina-lababo na paglalarawan ng produkto, hindi gaanong panghihimok tungkol sa produkto, at isang mas direktang paraan sa.
Bilang karagdagan, kailangan lamang ng Rdio.com ng isang pag-refresh. Ang nakaraang bersyon ng site ay matikas at medyo epektibo, at mahusay kaming nagsilbi sa loob ng ilang taon, ngunit nagsisimula itong ipakita ang edad nito, pakiramdam ng hindi naka-sync sa ilang mga pangunahing pag-update sa disenyo ng produkto ng web at mobile na inilunsad para sa buwan at sa pagtaas ng dalas.
Bilang karagdagan sa isang hindi napapanahong hitsura-at-pakiramdam, ang website ay talagang naglalaman ng ilang hindi napapanahong impormasyon. Mayroong sapat na nilalaman na ito ay mabigat, lalo na para sa isang payat, karamihan sa koponan ng disenyo na nakatuon sa produkto, upang panatilihing kasalukuyan ang lahat ng mga kopya at mga screen ng produkto. Nais naming limitahan ang dami ng nilalaman sa bahagi nang sa gayon ay hindi kami ma-bogged ng maraming pagpapanatili ng nilalaman sa linya.
Ano ang iyong diskarte sa disenyo sa proyekto?
GK: Sa amin, isang radikal na simpleng website sa marketing ang gumagawa ng trabaho sa isang pahina. At hindi isang napakalaking mahabang pag-scroll, 20-minuto-na-basahin-itong-lahat ng pahina. Sa halip, isang maikling pahina (na may pinapayagan ang pag-scroll) na nakuha ang kinakailangang impormasyon. Iningatan namin iyon bilang isang praktikal na patnubay sa paglapit namin sa proyekto. Ngunit ang pagiging maikli sa aming diskarte ay hindi lamang isang di-makatwirang layunin.
Ang Rdio ay ang sarili nitong pinakamahusay na site sa marketing. Libre itong mag-sign up at gamitin, at sa palagay namin ay matutuwa ang mga gumagamit sa sandaling magsimula silang makinig at matuklasan ang musika. Masigasig kaming naniniwala sa produkto. Kaya, ang paggugol sa mga tao ng maraming oras sa mga naka-log out na pahina ng aming site, siyempre, hindi aming layunin - nais naming gumugol ng oras ang mga tao sa produkto.
Sa pag-iisip na iyon, sa paglapit namin sa proyektong ito nais naming gawing simple ang panukala sa landing page. Binigyan namin ng priyoridad ang paglikha ng isang mabilis, halatang entry point sa app para sa mga bisita na nais na - ang paglalagay ng isang malaking pagpipilian sa pag-sign up sa Facebook / email sa harap at gitna - at tinanggal ang hindi gaanong mahalagang mga tawag sa pagkilos at hindi mahalagang kopya.
Ang Rdio ay ang sarili nitong pinakamahusay na site sa marketing. Masigasig kaming naniniwala sa produkto
Kinikilala na magkakaroon ng mga tao na nangangailangan ng karagdagang impormasyon bago magpasya, nagbigay kami ng isang maigsi na paliwanag tungkol sa aming mga pagpipilian sa subscription at isang tampok na "haligi" ng pares, ngunit itinago lamang ito sa "ibaba ng kulungan" sa pag-load ng pahina kahit na ang browser ng bisita laki ng bintana.
Sa katunayan, nagsimula kaming mag-isip nang higit pa tungkol sa muling pagdidisenyo ng site sa marketing bilang simpleng pagdidisenyo muli ng unang screen ng produkto para sa mga gumagamit na hindi pa naka-log in - at, syempre, sinusulit namin ang mga bisitang hindi pa nag-log in.
Nais namin ang isang website para sa mga naka-log out na gumagamit at bagong mga bisita na pakiramdam na kabilang ito sa parehong pamilya ng disenyo, at dinisenyo ng parehong mga kamay tulad ng mga nagdisenyo ng Rdio app, habang hindi nanghihiram nang direkta mula sa disenyo ng produkto upang lituhin ang mga bisita tungkol sa kung nasaan ang mga hangganan.
Sa pamamagitan ng lahat ng ito, isang pares na pangunahing priyoridad ang nakaangkla sa aming mga pagsisiyasat: pagbibigay ng paulit-ulit na pag-sign up sa pag-sign, at napakasimple ng aming pagmemensahe.
Paano mo naisip ang konsepto para sa landing page?
Alam namin na ang landing page ay kailangang maging isang mayamang karanasan ngunit hindi isang napakahaba, hinihingi, o kahit na sobrang nakakaengganyong karanasan, dahil habang nais naming makuha ang pansin, hindi namin nais na madiskaril ang aming mga bagong gumagamit.
Sa Rdio, ginagawa namin ang aming makakaya upang makaiwas sa daan at hayaan ang musika na maging bituin, at sinubukan naming gawin ang karanasan sa pakikinig at pagtuklas ng musika bilang kaaya-aya at matikas hangga't maaari. Ang isang paraan na susubukan naming makamit ang mga bagay na iyon ay sa pamamagitan ng paggamot sa likhang sining ng album nang may paggalang, gamit ito bilang pangunahing sangkap sa aming paleta.
Sa pagtuklas ng mga konsepto para sa landing page, tiningnan namin ang mga pagpipilian na kasangkot sa pag-play ng naka-embed na musika o video, o paglikha ng orihinal na potograpiya o pagdadala ng umiiral na music-oriented at lifestyle photography. Ang mga larawan at video na naglalarawan ng mga epekto o lifestyle sa paligid ng musika ay maaaring makapukaw at kahit na gumagalaw, ngunit may panganib din silang makaramdam ng kaunting pagmamanipula at "advertising-y."
Sa huli, pinili namin ang konsepto na higit na malinaw na ipinakita ang paggalang sa likhang sining ng album at mga nakaposisyon na album bilang pangunahing elemento ng visual sa iba't ibang mga estado ng pahina. Para sa amin, ang visual na pagsasama ng musika at ang mensahe ay totoong totoo sa produkto at sa aming kultura sa Rdio.
Ang album art ay nagiging mga titik na naka-embed sa apat na mga headline na salita sa animated na pagkakasunud-sunod ng pambungad. At sa nalutas na estado ng pahina, mas maraming likhang sining ang inilalagay sa likuran ng isang semi-transparent na kulay na asul na kulay ng Rdio, na nagpapahintulot sa isang sulyap sa pamamagitan ng mga na-knockout na titik ng tagline ("Ang musika ay umunlad. Magpatugtog at tuklasin ang libre") sa likhang sining sa ilalim - isang pag-play sa harapan / background na tumango sa walang katapusang stream ng musika na naghihintay sa loob ng Rdio.
Ano ang ginamit mo upang mabuo ang site?
Jason Norris: Ang UX at visual na disenyo ay nangyari halos sa Illustrator at Photoshop, na may walang lakad na whiteboard o mga sketch ng lapis na nakakakuha ng kusang mga saloobin sa buong lugar. Ang prototyping ng paggalaw at pag-scroll ay ginawa sa After Effects at Keynote.
Sa mga tuntunin ng pagbuo ng site, ang dating site ng marketing ay isang hiwalay, static na site, na pumigil sa amin na makapagbahagi ng mga istilo at piraso ng pagpapaandar na binuo namin para sa Rdio app. Ang aming mga inhinyero ay nagtayo ng bagong landing page gamit ang parehong framework na batay sa sangkap na Javascript na ginagamit namin upang mabuo ang Rdio app, na itinayo sa tuktok ng balangkas ng Backbone.js.
Ginawa naming mabigat ang paggamit ng elemento ng canvas ng HTML5 upang mapalakas na maibigay ang malabo na album art at teksto na "cut-outs." Ang pag-scroll ay kinokontrol ng ilang makinis na naiayos, pasadyang Javascript.
05. Ano ang pinaka-mapaghamong aspeto ng proyekto?
Mike Towber: Ang pagpapaalam sa sekundaryo at tersiyaryo na mga antas ng impormasyon, inaalis ang mga pasukan sa ‘tabi-tabi’, at binabawasan ang mga pagkilos na maaaring gawin ng mga bisita sa site ay isang lakad ng pananampalataya.
Oo naman, maaari kang mag-soft-launch o subukan ang maraming mga sitwasyon upang mabawasan ang mga sorpresa, at umulit batay sa iyong natutunan, ngunit pinapasimple ang aming site na palaging tumatagal ng maraming nerbiyos sa ilang mga punto, pati na rin ang paulit-ulit na mga paalala ng orihinal mga layunin at priyoridad, para sa amin na lang itong hanapin.
Ano ang palagay mo tungkol sa muling pagdidisenyo ng Rdio? Ipaalam sa amin sa mga komento.
