Redesign portalu Playmobile.pl Case study

2

Tło projektu

Klient

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.

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ę.

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.

4

Portal playmobile.pl w 2010 roku

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

6

Portal w 2011 roku

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ń.

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.

Kampanie wizerunkowe PLAY 2010 i 2011 na billboardach

Kampania nowych abonamentów 2011 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:

13

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

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.

14

Analiza wymagań

Analiza kontekstu użycia

Projektowanie

Ewaluacja rozwiązań projektowych

Zaplanowanie procesu projektowego

Sukces! Projekt spełnia wymagania biznesowe i użytkowników

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.

17

Do przygotowania prototypu wykorzystano program MS Visio 2010 wraz z dodatkiem VisDynamica opracowanym przez Tomasza Seroczyńskiego z K2 Internet.

http://www.visdynamica.com

Projekty funkcjonalne i graficzne

18

Wstępny projekt architektury informacji portalu Finalny projekt graficzny strony głównej portalu

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.

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.

Zakupy można rozpocząć z dowolnego miejsca

w serwisie – od strony oferty, telefonów czy

promocji.

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.

Zawartość stopki została przebudowana zgodnie

z nową strukturą treści. Zredukowano ilość

linków do najpotrzebniejszych tak, by ułatwić jej

przeglądanie.

Dzięki zastosowaniu białego tła w projekcie

graficznym linki stały się bardziej kontrastowe

i czytelne.

Poprzednia wersja stopki

Nowa wersja stopki

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.

28

Marcin Strzałkowski, Art Director

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.

37

Arek Sobczyk, Senior Graphics Designer

Założenia nowej linii graficznej

Kolorystyka

38

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.

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

41

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

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.

53

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

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

58

UWAGA: Na prośbę Klienta zamieszczamy dane pokazujące trendy, bez danych liczbowych.

Liczba wizyt w formularzu

59

UWAGA: Na prośbę Klienta zamieszczamy dane pokazujące trendy, bez danych liczbowych.

Konwersja zakupowa z formularza

60

UWAGA: Na prośbę Klienta zamieszczamy dane pokazujące trendy, bez danych liczbowych.

Liczba zamówień

61

UWAGA: Na prośbę Klienta zamieszczamy dane pokazujące trendy, bez danych liczbowych.

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

Bilans projektu

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

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

JavaScript development • Łukasz Rozbicki – Web Developer

• Hubert Smusz – Senior Web Developer

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ęć

67

• 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/