Zawartość
- Co skłoniło do przeprojektowania?
- Jakie było Twoje podejście projektowe do projektu?
- Jak wymyśliłeś koncepcję strony docelowej?
- Czego użyłeś do zbudowania witryny?
- 05. Jaki był najtrudniejszy aspekt projektu?
Social jukebox Rdio to internetowa usługa muzyczna, w której do dyspozycji użytkowników jest ponad 20 milionów utworów. Aby odświeżyć, projekt strony internetowej firmy przeszedł minimalistyczną i elegancką metamorfozę, która wykorzystuje różne okładki albumów na nowej, przyciągającej wzrok stronie docelowej. Rozmawialiśmy z kierownikiem projektu wizualnego w projekcie Geoff Koops, projektantem UX Mike'iem Towber i inżynierem front-end Jasonem Norrisem, aby dowiedzieć się więcej ...
Co skłoniło do przeprojektowania?
Geoff Koops: We wszystkich działaniach projektowych i inżynieryjnych Rdio istnieje stałe dążenie do redukcji i uproszczenia - aby poprawić doświadczenia naszych użytkowników, zmniejszyć koszty konserwacji i koszty techniczne, komunikować się pięknie i ekonomicznie. Kiedy więc znaleźliśmy odpowiednie okno czasowe na ten projekt przeprojektowania, to samo podejście zostało zastosowane na stronie internetowej.
Wydawało się, że możemy radykalnie zmniejszyć i uprościć naszą obecność w marketingu internetowym: mniej słów, mniej stron, mniej blokad obrazów na telefonach i tabletach z ekranami. Mniej obszerny opis produktu obejmujący wszystko oprócz zlewu kuchennego, mniej perswazji na temat produktu i bardziej bezpośrednie wejście.
Dodatkowo Rdio.com po prostu wymagało odświeżenia. Poprzednia wersja strony była elegancka i dość skuteczna, i dobrze nam służyła przez kilka lat, ale zaczynała pokazywać swój wiek, czując się nie zsynchronizowana z niektórymi głównymi aktualizacjami projektów produktów internetowych i mobilnych, które były wprowadzane od miesięcy i coraz częściej.
Oprócz przestarzałego wyglądu i sposobu działania witryna zawierała w rzeczywistości nieaktualne informacje. Było wystarczająco dużo treści, aby utrzymywanie aktualności wszystkich kopii i ekranów produktów było uciążliwe, zwłaszcza dla szczupłego zespołu projektowego skoncentrowanego głównie na produktach. Chcieliśmy ściśle ograniczyć ilość treści w części, aby nie zostać ugrzęźniętym w ciągłej konserwacji treści.
Jakie było Twoje podejście projektowe do projektu?
GK: Dla nas radykalnie prosta witryna marketingowa działa na jednej stronie. I ani jednej ogromnej strony przewijanej, trwającej 20 minut do przeczytania wszystkiego. Raczej jedna krótka strona (z dozwolonym przewijaniem), która zawierała niezbędne informacje. Zachowaliśmy to jako praktyczną wskazówkę, gdy zbliżaliśmy się do projektu. Ale zwięzłość w naszym podejściu nie była tylko arbitralnym celem.
Rdio jest własną najlepszą witryną marketingową. Rejestracja i korzystanie z niej jest bezpłatne. Uważamy, że użytkownicy będą zachwyceni, gdy zaczną słuchać i odkrywać muzykę. Z pasją wierzymy w produkt. Tak więc, aby ludzie spędzali dużo czasu na wylogowanych stronach naszej witryny, oczywiście nie jest naszym celem - chcemy, aby ludzie spędzali czas w produkcie.
Mając to na uwadze, przystępując do tego projektu, chcieliśmy uprościć propozycję na stronie docelowej. Naszym priorytetem było stworzenie szybkiego, oczywistego punktu wejścia do aplikacji dla odwiedzających, którzy już zdecydowali - umieszczenie dużej opcji rejestracji na Facebooku / e-mailu z przodu i na środku - oraz wyeliminowanie mniej ważnych wezwań do działania i nieistotnych kopii.
Rdio jest własną najlepszą witryną marketingową. Z pasją wierzymy w produkt
Zdając sobie sprawę, że będą ludzie, którzy będą potrzebować więcej informacji przed podjęciem decyzji, przedstawiliśmy zwięzłe wyjaśnienie naszych opcji subskrypcji i kilku „filarowych” funkcji, ale ukryliśmy je tuż „pod częścią strony” podczas ładowania strony, niezależnie od przeglądarki użytkownika. rozmiar okna.
W rzeczywistości zaczęliśmy bardziej myśleć o przeprojektowaniu witryny marketingowej jako prostym przeprojektowaniu pierwszego ekranu produktu dla użytkowników, którzy jeszcze się nie zalogowali - i oczywiście optymalizowaliśmy dla tych odwiedzających, którzy nigdy się nie logowali.
Chcieliśmy mieć witrynę internetową dla wylogowanych użytkowników i nowych odwiedzających, która wydawałaby się należeć do tej samej rodziny projektów i została zaprojektowana przez te same ręce, co osoby, które zaprojektowały aplikację Rdio, nie zapożyczając jednak bezpośrednio z projektu produktu, aby zmylić odwiedzających o tym, gdzie były granice.
Przez to wszystko kilka podstawowych priorytetów zakotwiczyło nasze poszukiwania: zapewnienie stałego dostępu do rejestracji i znaczne uproszczenie naszych wiadomości.
Jak wymyśliłeś koncepcję strony docelowej?
Wiedzieliśmy, że strona docelowa musi być bogatym doświadczeniem, ale nie długim, wymagającym ani nawet zbyt wciągającym doświadczeniem, ponieważ chociaż chcieliśmy przyciągnąć uwagę, nie chcieliśmy wykoleić naszych nowych użytkowników.
W Rdio dokładamy wszelkich starań, aby zejść z drogi i pozwolić muzyce być gwiazdą, i staramy się, aby doświadczenie słuchania i odkrywania muzyki było tak zachwycające i eleganckie, jak to tylko możliwe. Jednym ze sposobów, w jaki staramy się to osiągnąć, jest traktowanie okładki albumu z dużym szacunkiem i używanie jej jako podstawowego składnika w naszej palecie.
Badając koncepcje strony docelowej, przyjrzeliśmy się opcjom związanym z odtwarzaniem osadzonej muzyki lub wideo, tworzeniem oryginalnej fotografii lub wprowadzaniem istniejącej fotografii zorientowanej na muzykę i styl życia. Zdjęcia i filmy przedstawiające efekty lub styl życia związany z muzyką mogą być sugestywne, a nawet poruszające, ale niosą ze sobą również ryzyko uczucia manipulacji i „reklamy”.
Ostatecznie wybraliśmy koncepcję, która najdobitniej pokazała szacunek dla okładki albumów i umieściła albumy jako kluczowy element wizualny w różnych stanach strony. Dla nas wizualne połączenie muzyki i przekazu było najbardziej zgodne z produktem i naszą kulturą w Rdio.
Okładka albumu staje się literami osadzonymi w czterech tytułowych słowach animowanej sekwencji otwierającej. W stanie rozwiązanym strony, więcej okładek albumów jest ułożonych za półprzezroczystym niebieskim polem Rdio, co pozwala na wgląd przez wyłamane litery sloganu („Muzyka ewoluowała. Graj i odkrywaj za darmo”) do grafiki poniżej - odtwarzanie pierwszego planu / tła, które jest ukłonem w stronę niekończącego się strumienia muzyki, który czeka w Rdio.
Czego użyłeś do zbudowania witryny?
Jason Norris: UX i projektowanie wizualne zdarzały się głównie w programach Illustrator i Photoshop, a zaimprowizowane szkice na tablicy lub ołówku uchwyciły spontaniczne myśli. Prototypowanie ruchu i przewijania zostało wykonane w After Effects i Keynote.
Jeśli chodzi o tworzenie witryny, poprzednia witryna marketingowa była oddzielną, statyczną witryną, co uniemożliwiało nam udostępnianie stylów i elementów funkcjonalności, które opracowaliśmy dla aplikacji Rdio. Nasi inżynierowie zbudowali nową stronę docelową przy użyciu tej samej opartej na komponentach struktury Javascript, której używamy do tworzenia aplikacji Rdio, która jest oparta na frameworku Backbone.js.
W dużym stopniu wykorzystaliśmy element płótna HTML5, aby dynamicznie renderować niewyraźną okładkę albumu i „wycięcia” w tekście. Przewijanie jest kontrolowane przez dopracowany, niestandardowy kod JavaScript.
05. Jaki był najtrudniejszy aspekt projektu?
Mike Towber: Pozbycie się drugorzędnych i trzeciorzędnych poziomów informacji, wyeliminowanie wejść „bocznymi drzwiami” i ograniczenie działań, które mogą podejmować odwiedzający witrynę, to skok wiary.
Jasne, możesz uruchomić miękko lub przetestować wiele scenariuszy, aby zminimalizować niespodzianki, i iterować w oparciu o to, czego się dowiesz, ale uproszczenie naszej witryny zawsze wymagało dużo nerwów w pewnym momencie, a także powtarzających się przypomnień o oryginale cele i priorytety, abyśmy po prostu do tego dążyli.
Co myślisz o przeprojektowaniu Rdio? Dajcie nam znać w komentarzach.
