Redesign portalu Playmobile.pl Case study
Tło projektu 2
Klient Operator telefonii komórkowej PLAY oferuje usługi abonamentowe dla klientów indywidualnych i biznesowych oraz usługi bezabonamentowe typu prepaid. W 2010 roku PLAY jako pierwszy w Polsce wprowadził bezpłatne rozmowy wewnątrz sieci (Stan Darmowy) w ofercie na abonament i na kartę. Działania Operatora w 2011 roku skupiają się na poszerzeniu portfolia smartfonów oraz wprowadzeniu nowej oferty abonamentowej - All Inclusive. Obecnie z usług Sieci korzysta blisko 5 milionów klientów, co daje 10% rynku w Polsce. Aż 7 na 10 osób przenoszących numer do innego operatora decyduje się na ofertę PLAY.
Projekt Playmobile.pl to oficjalny portal operatora telefonii komórkowej Play, prezentujący ofertę dla klienta indywidualnego i biznesowego oraz Sklep Internetowy. Obsługą serwisu od początku zajmuje się agencja interaktywna K2 Internet. Niniejsza prezentacja jest dokumentacją prac nad nową odsłoną portalu, prowadzonych intensywnie od stycznia do października 2010 roku i nadal kontynuowanych. Zakres prac obejmuje przygotowanie nowej koncepcji architektury informacji, opracowanie struktury, projektów graficznych i kodowanie. Obecnie do portalu wprowadzane są kolejne zmiany i funkcjonalności związane z usprawnieniem procesu sprzedażowego. Portal playmobile.pl w 2010 roku 4
Współpraca K2 i PLAY Współpraca K2 Internet i PLAY rozpoczęła się na początku 2006 roku, a więc od momentu wejścia tej marki na polski rynek telefonii komórkowej. W ciągu 5 lat przygotowano m.in. 4 odsłony portalu konsumenckiego, część biznesową i korporacyjną oraz szereg miniserwisów promocyjnych. K2 zajmuje się stałą obsługą portalu playmobile.pl oraz kampaniami promocyjnymi. W styczniu 2009 roku Agencja ponownie wygrała przetarg na obsługę marki w ramach działań interactive. Wybrane nagrody Kampania dla marki Play nagroda Effie brązowa 2010 www.zajacmroku.pl nagroda Kreatura 2009 www.playmobile.pl wyróżnienie Webstar 2008
Ewolucja portalu Play.pl Portal w 2011 roku 6
Początki portalu
Start projektu Punktem wyjścia prac nad portalem było wprowadzenie nowej oferty telefonii stacjonarnej (Play Domowy) oraz potrzeba jej zaprezentowania na playmobile.pl. Zespoły K2 i Play już w grudniu 2009 roku spotkały się na wstępnych warsztatach, podczas których zastanawiały się jak pokazać ofertę w portalu. Ustalono, że kosmetyczne zmiany w projektach funkcjonalnych i graficznych są niewystarczające. Zadaniem Agencji była więc kompleksowa rewizja struktury, architektury informacji i szaty graficznej portalu. I tak rozpoczął się największy - trwający od stycznia do października 2010 - redesign w historii portalu 8
Zmiana pozycjonowania marki PLAY Dodatkowym katalizatorem zmian na portalu było wdrożenie nowej strategii komunikacyjnej na początku 2010 roku, koncentrującej się wokół idei wolności kontaktu bez ograniczeń. Kampanie wizerunkowe PLAY 2010 i 201 na billboardach Po raz pierwszy komunikacja marki PLAY w ATLu w tak dużym stopniu zaczęła opierać się na postaciach ludzkich. Zadaniem Agencji było wypracowanie rozwiązań projektowych, które pozwolą na przeniesienie tej komunikacji do portalu playmobile.pl. Kampania nowych abonamentów 201 na billboardach
Warsztaty o rynku mobilnym w Krynicy Zdroju W styczniu 2010 roku odbyły się wspólne warsztaty K2 i PLAY poświęcone trendom w telefonii komórkowej i strategii sprzedażowej Operatora. Ich celem było przybliżenie Agencji specyfiki rynku mobilnego wyjaśnienie mechaniki ofert, sprzedaży, segmentacji klientów. Podczas dwudniowych sesji mogliśmy szczegółowo zapoznać się z planami i strategią PLAY na rok 2010 oraz podyskutować o kierunku kolejnego redesignu portalu. Warsztaty pozwoliły nam jeszcze lepiej przeanalizować potrzeby i wymagania biznesowe PLAY, co było szczególnie pomocne we wstępnym (koncepcyjnym) etapie prac nad portalem. 10
Eye-tracking dotychczasowego portalu Aby lepiej zrozumieć potrzeby i wymagania użytkowników portalu zorganizowaliśmy na prośbę PLAY - badania eye-trackingowe obecnego serwisu. Naszym celem było spojrzenie na portal oczami użytkowników i zidentyfikowanie jego najsilniejszych oraz najsłabszych elementów. Badanie opierało się na serii kilku zadań jakie najczęściej wykonuje się w portalach telefonii komórkowej oraz wolnym przeglądaniu kluczowych stron playmobile.pl i portali konkurencji. Wyniki pokazały, że poruszanie się po serwisie generalnie nie sprawiało użytkownikom większych trudności, jednak pewne problemy pojawiły się podczas korzystania ze Sklepu Internetowego. To zainspirowało nas do intensywnych prac nad poprawą procesu zakupowego w nowym portalu. 11
Założenia portalu PLAY Klient określił następujące wymagania wobec nowego portalu: 1. Przebudowa architektury informacji portalu tak, by jeszcze lepiej dostosować ją do dynamicznie zmieniającej się oferty. 2. Wzrost konwersji w procesie zakupowym. 3. Komunikowanie nowego wizerunku PLAY. 4. Promowanie na portalu różnych kanałów zakupu: internet, salony, infolinia. 5. Pozyskiwanie nowych klientów oraz obsługa obecnych klientów. 12
Użytkownicy portalu Portal playmobile.pl skierowany jest do czterech grup użytkowników: Potencjalni klienci telefonii komórkowej szukają informacji o ofercie i telefonach w PLAY Klienci innych operatorów obecnie obsługiwani przez innych operatorów komórkowych, poszukują informacji o możliwościach przeniesienia numeru do PLAY Obecni klienci chcą przedłużyć umowę z PLAY lub dokupić dodatkową ofertę na preferencyjnych warunkach Klienci biznesowi szukają informacji o ofercie i telefonach dla firm 13
Metodyka projektowa Projekt realizowany był zgodnie z założeniami projektowania zorientowanego na użytkownika (User-Centered Design) metodyki wykorzystywanej w projektach K2 User Experience. Zaplanowanie procesu projektowego Analiza wymagań Ewaluacja rozwiązań projektowych Analiza kontekstu użycia Sukces! Projekt spełnia wymagania biznesowe i użytkowników Projektowanie 14
Realizacja
Projektowanie Prace projektowe obejmowały wypracowanie koncepcji nowego portalu, zaplanowanie struktury treści oraz zaprojektowanie interfejsu użytkownika w formie prototypu nowego serwisu. Następnym krokiem było projektowanie graficzne na bazie architektury informacji wypracowanej dzięki konsultacjom z Klientem i testom użyteczności z udziałem użytkowników. Wreszcie projekty graficzne zostały dodatkowo zweryfikowane na badaniach eye-trackingowych. 16
Prototyp serwisu W ramach prac nad architekturą informacji przygotowano interaktywny prototyp portalu klikalny, szczegółowy (hi-fidelity), zapewniający symulację ścieżki zakupowej użytkownika. Prace prowadzono w cyklu iteracyjnym: kolejne zmiany i ulepszenia były wprowadzane do projektu funkcjonalnego na podstawie badań, analizy eksperckiej oraz uwag klienta. Dzięki takiemu podejściu mogliśmy stale monitorować postępy prac projektowych i weryfikować zgodność projektu z wymaganiami Klienta i użytkowników. Do przygotowania prototypu wykorzystano program MS Visio 2010 wraz z dodatkiem VisDynamica opracowanym przez Tomasza Seroczyńskiego z K2 Internet. http://www.visdynamica.com 17
Projekty funkcjonalne i graficzne Wstępny projekt architektury informacji portalu Finalny projekt graficzny strony głównej portalu 18
Nowa nawigacja Pogrupowanie podobnych kategorii tematycznych w większe całości pozwoliło zredukować ilość pozycji w menu nawigacyjnym z 9 do 4, choć zakres treści się nie zmniejszył. Poprzednie menu Nowe menu
Nowe ścieżki użytkowników Ułatwieniem w poruszaniu się po portalu są wyraźnie wydzielone ścieżki nawigacyjne dla różnych grup użytkowników obecnych i potencjalnych: Ścieżki zbudowano w oparciu o segmentację klientów PLAY i potrzeby, z jakimi przychodzą na portal.
Nowy proces zakupowy Jedną z istotniejszych zmian w portalu było przeorganizowanie procesu zakupowego od strony użytkownika. Zakupy można rozpocząć z dowolnego miejsca w serwisie od strony oferty, telefonów czy promocji. Nowy projekt zakłada większą niż dotychczas integrację sklepu internetowego (dawniej e-shop) z portalem. Użytkownik, korzystając z wygodnych konfiguratorów, może w prosty i intuicyjny sposób dobrać i zakupić odpowiednią dla siebie ofertę wraz z telefonem. Dotychczas za pośrednictwem portalu mógł kupić jedynie wybrane oferty. Niezależnie od miejsca, z którego użytkownik rozpoczyna proces zakupowy, ścieżki nawigacyjne w serwisie dostosowywane są do scenariusza jego wizyty. 21
Wyszukiwanie dynamiczne Nową funkcjonalnością portalu jest wyszukiwarka z funkcją wyszukiwania dynamicznego ( search-as-you-type ). Mechanizm ten pozwala szybciej przeszukiwać treści portalu ponieważ użytkownik otrzymuje wstępne wyniki wyszukiwania już w trakcie wpisywania hasła. Dodatkowo wyniki podzielone są na kategorie tematyczne odpowiadające głównym działom portalu. W ten sposób użytkownik może z łatwością zorientować się w zakresie informacji. 22
Nowa stopka Badania z użytkownikami portalu pokazały, że stopka jest szczególnie często wykorzystywanym elementem nawigacyjnym portalu. Projektując nowy serwis poświęciliśmy jej zatem sporo uwagi. Poprzednia wersja stopki Zawartość stopki została przebudowana zgodnie z nową strukturą treści. Zredukowano ilość linków do najpotrzebniejszych tak, by ułatwić jej przeglądanie. Nowa wersja stopki Dzięki zastosowaniu białego tła w projekcie graficznym linki stały się bardziej kontrastowe i czytelne.
Współpraca przy projekcie Model współpracy pomiędzy Agencją a Klientem obejmował organizację cyklicznych warsztatów projektowych - minimum 1 raz w tygodniu, a w końcowej fazie projektu jeszcze częściej. Tematem warsztatów była początkowo architektura informacji, a na dalszym etapie prac także projekty graficzne. 24
Warsztaty user experience W Laboratorium Badawczym K2 User Experience zorganizowaliśmy dla Klienta specjalną sesję warsztatową poświęconą zagadnieniu user experience oraz architektury informacji. W spotkaniu wzięli udział przedstawiciele działów ofertowych PLAY, którzy mogli dowiedzieć się więcej o tworzeniu serwisów internetowych oraz mieli możliwość zaprojektowania swojej wersji portalu PLAY. Projekty funkcjonalne strony głównej playmobile.pl przygotowane przez zespół Oferty PLAY
Warsztaty dotyczące architektury informacji Początkowo spotkania poświęcone były zebraniu wymagań biznesowych poszczególnych business unitów PLAY do nowego portalu. Następnie służyły dyskusjom nad przygotowanymi w Agencji rozwiązaniami projektowymi. Podczas dyskusji posługiwaliśmy się wstępnymi szkicami interfejsów, które następnie były przenoszone na projekty funkcjonalne i testowane z użytkownikami podczas sesji badawczych. 26
Warsztaty graficzne Celem spotkań było opiniowanie projektów przygotowanych w studiu graficznym K2. Drobne zmiany i sugestie były nanoszone na projekty bezpośrednio w trakcie spotkań. Dzięki temu mogliśmy szybko sprawdzić różne rozwiązania projektowe, zaś graficy mieli okazję szczegółowo wyjaśnić Klientowi swoje propozycje projektowe. 27
Warsztaty z Klientem były przełomowym momentem w pracy nad portalem. Dzięki ich formule, zakładającej bezpośrednie wprowadzanie zmian do projektów, udało się szybko i sprawnie zaakceptować wszystkie materiały graficzne oraz wypracować satysfakcjonujący dla obu stron rezultat. Marcin Strzałkowski, Art Director 28
Projekty graficzne K2 zaproponowało cztery linie graficzne nowego portalu. Wszystkie zostały poddane badaniom eye-trackingowym i ocenie Klienta. Zespół Portal Solutions PLAY wyłonił dwie z nich, zaś do wyboru wersji finalnej zaangażowano użytkowników portalu Playmobile.pl Na stronie wybory.playmobile.pl użytkownicy mogli oddawać głosy na wybrany projekt. Zwycięska linia graficzna była dalej rozwijana.
Linia graficzna 1 30
Linia graficzna 2 31
Linia graficzna 3 32
Linia graficzna 4 33
Zwycięski projekt wybrany przez użytkowników
Nowa linia graficzna portalu
Finalny projekt graficzny Wersja dla klientów biznesowych Wersja dla klientów indywidualnych
Obszerna zawartość portalu playmobile.pl wymagała stworzenia wielu szablonów dla treści różnego typu. Wyzwaniem było zachowanie spójności graficznej w obrębie całego serwisu oraz pogodzenie wizji dwóch projektantów. Przeprowadziliśmy długie spotkania wewnętrzne i wielokrotne korekty projektów graficznych, co pozwoliło nam wypracować obecny wygląd serwisu. Arek Sobczyk, Senior Graphics Designer 37
Założenia nowej linii graficznej Kolorystyka Czcionka Tahoma Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 38
Siatka projektowa Siatka jest podziałem układu strony, który zapewnia porządek, logikę i nadaje interfejsowi strukturę. Nowa siatka portalu została zaprojektowana przy uwzględnieniu popularnej rozdzielczości ekranów monitorów 1024x768. Bazuje na 4 kolumnach i stosowana jest konsekwentnie na wszystkich podstronach playmobile.pl 39
Przykłady zastosowania siatki 40
Headery W nawiązaniu do nowego pozycjonowania marki wszystkie headery w portalu oparte są na zdjęciach. Przyjęliśmy jednak kilka wariantów, w zależności od sekcji portalu, w której aktualnie znajduje się użytkownik. Header z wewnętrzną nawigacją Header na liście promocji i stronach ofertowych Header na stronie promocji 41
Ikonografia Ikony serwisu zaprojektował uznany ilustrator Paweł Jońca.
Strona główna sekcji Telefony i modemy
Lista telefonów Strona telefonu
Strona główna sekcji Oferta
Pierwsza wersja stron ofertowych Obecna wersja strony ofertowej (abonament)
Pierwsza wersja konfiguratora oferty Obecna wersja konfiguratora oferty
Strona główna sekcji Promocje
Lista promocji Strona promocji
Strona główna sekcji Obsługa Klienta
Strona tekstowa Mapa zasięgu
Badania z użytkownikami
Badania nowego portalu W trakcie projektu przeprowadzono 1 serię testów użyteczności z użytkownikami oraz 3 serie badań eye-trackingowych. Testy użyteczności sprawdzenie projektu funkcjonalnego nowego portalu wspólnie z użytkownikami dopracowanie prototypu i poprawienie błędów Badania eye-trackingowe badania aktualnego portalu (wprowadzenie szybkich zmian przed wystartowaniem ostatecznego portalu) oraz badania nowego portalu (sprawdzenie nowych projektów graficznych w celu ich optymalizacji) Badania pilotażowe testy z udziałem pracowników PLAY zweryfikowanie, na ile projekt funkcjonalny spełnia określone na początku wymagania biznesowe 53
Badaniom eyetrackingowym poddano 4 wersje projektów graficznych strony głównej playmobile.pl:
Badania użyteczności nowego portalu Celem przeprowadzonego badania było przetestowanie użyteczności prototypu nowego portalu playmobile.pl oraz optymalizacja zastosowanych rozwiązań projektowych. W badaniu wykorzystano prototyp z symulacją procesu zakupowego (specjalnie napisany na te potrzeby skrypt koszyku zakupowego). Przebadano główne ścieżki użycia serwisu: Zapoznanie się z ofertą - abonamenty, promocje, przenoszenie numeru, telefony Obsługa klienta logowanie, znalezienie salonu, doładowanie konta Proces zakupowy z dwóch punktów startowych - od telefonu i od abonamentu 55
Wnioski z badań użyteczności Pod wpływem obserwacji i wniosków z badań do prototypu i projektów graficznych wprowadzono następujące zmiany: Ogólne: Mocniejsze wyeksponowanie linków w pomocniczej nawigacji Strona główna: Zadbanie o widoczność boksu Przejdź do Play oraz hasła Przenieś numer w projekcie graficznym Telefony i modemy: Przebudowa strony głównej działu Telefony i modemy tak, by jeszcze lepiej podkreślić przejście do listy telefonów, przebudowa listy telefonów Oferta: Przebudowa konfiguratora ofertowego z uwagi na wątpliwości badanych co do jego działania Abonamenty: Wybór strony z konfiguratorem abonamentów zamiast pojedynczej strony każdego abonamentu 56
Rezultaty
Konwersja zakupowa z koszyka UWAGA: Na prośbę Klienta zamieszczamy dane pokazujące trendy, bez danych liczbowych. 58
Liczba wizyt w formularzu UWAGA: Na prośbę Klienta zamieszczamy dane pokazujące trendy, bez danych liczbowych. 59
Konwersja zakupowa z formularza UWAGA: Na prośbę Klienta zamieszczamy dane pokazujące trendy, bez danych liczbowych. 60
Liczba zamówień UWAGA: Na prośbę Klienta zamieszczamy dane pokazujące trendy, bez danych liczbowych. 61
Bilans projektu 216 ekranów architektury informacji w prototypie 204 strony dokumentacji funkcjonalnej 52 przebadane osoby podczas badań użyteczności i eyetrackingowych a do tego wiele wersji projektów funkcjonalnych i graficznych, dziesiątki spotkań i warsztatów z Klientem
Autorka Paulina Rzymska User Experience Architect W K2 Internet od 2008 roku zajmuje się projektowaniem architektury informacji i user experience. Z wykształcenia socjolog, absolwentka Uniwersytetu Warszawskiego. Pracowała dla marek: Play, Getin Bank, Open Finance, Noble Bank, ORLEN, PZU, Ministerstwo Nauki i Szkolnictwa Wyższego.
Zespół projektowy Project managment Magdalena Zawada - account director Agata Miryn Sienkiewicz account executive Bartosz Bobrowski senior project manager JavaScript development Łukasz Rozbicki Web Developer Hubert Smusz Senior Web Developer Projektowanie interakcji, architektura informacji Paulina Rzymska - user experience architect Projekt graficzny Marcin Strzałkowski art director Arek Sobczyk - senior graphic designer Development szablonów HTML Paweł Włodarczyk webdeveloper Łukasz Rozbicki webdeveloper Podziękowania Maciej Lipiec wsparcie projektowo-strategiczne Paulina Makuch realizacja badań usability Jarosław Górecki wsparcie obsługowe wdrożenia Michał Gołębiowski napisanie skryptu koszyka na potrzeby badań użyteczności Tomasz Seroczyński - VisDynamica.com Tomasz Wiaderny alternatywne projekty graficzne Rafał Kocik konsultacje copy
K2 User Experience to wyspecjalizowany zespół działający w ramach agencji K2 Internet, zajmujący się tworzeniem koncepcji dla nowych produktów interaktywnych i e-usług, projektowaniem interakcji, prowadzeniem badań z udziałem użytkowników. Pomagamy naszym Klientom tworzyć udane produkty i usługi. Odkrywamy potrzeby konsumentów. Projektujemy ergonomiczne i efektywne aplikacje oraz serwisy internetowe, aplikacje na urządzenia mobilne (systemy ios, Android, Symbian, Windows), interfejsy dla ekranów dotykowych, kiosków multimedialnych, sprzętu elektronicznego. Konsultujemy i testujemy użyteczność (audyty i badania usability, eye tracking). Badamy skuteczność kreacji reklamowych nie tylko w Internecie. Łączymy wysokiej klasy wiedzę psychologiczną z know-how technologicznym i doświadczeniem marketingowym. Naszą ofertę projektowo-badawczą znajdziesz na stronie www.k2.pl/ux Potrzebujesz konsultacji? Skontaktuj się, jeśli interesuje Cię współpraca z nami! Maciej Lipiec User Experience Director e-mail: maciej.lipiec@k2.pl tel. 510 533 592 Katarzyna Wiśniewska New Business Director e-mail: katarzyna.wisniewska@k2.pl tel. +48 (22) 448 70 21; 605 102 574 K2 Internet S.A. al. Solidarności 74A, 00-145 Warszawa tel. +48 (22) 448 70 00 fax. +48 (22) 448 71 01 e-mail: biuro@k2.pl www.k2.pl 65
66
Źródła wybranych zdjęć Slajd 8: http://www.flickr.com/photos/jurvetson/2261734491/sizes/z/in/photostream/ Slajd 24: http://www.flickr.com/photos/dwmoran/3729048272/ Slajd 27: http://www.flickr.com/photos/kara_allyson/4360710819 Slajd 35: http://www.flickr.com/photos/mybloodyself/3076291330/in/photostream/ 67