Przebudowa portalu playmobile.pl - prezentacja na Polish IA Summit 2011 wygłoszona przez Paulinę Rzymską z K2 i Marcina Piotrowskiego z Play.

1. Redesign portalu Playmobile.pl
Case study

2. Tło projektu
2

3. Klient
Operator telefonii komórkowej PLAY oferuje usługi Działania Operatora w 2011 roku skupiają się
abonamentowe dla klientów indywidualnych na poszerzeniu portfolia smartfonów oraz
i biznesowych oraz usługi bezabonamentowe typu wprowadzeniu nowej oferty abonamentowej
prepaid. - All Inclusive.
W 2010 roku PLAY jako pierwszy w Polsce Obecnie z usług Sieci korzysta blisko
wprowadził bezpłatne rozmowy wewnątrz sieci 5 milionów klientów, co daje 10% rynku
(Stan Darmowy) w ofercie na abonament i na w Polsce. Aż 7 na 10 osób przenoszących
kartę. numer do innego operatora decyduje się
na ofertę PLAY.

4. 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 Portal playmobile.pl w 2010 roku
i funkcjonalności związane z usprawnieniem procesu
sprzedażowego.
4

5. Współpraca K2 i PLAY
Współpraca K2 Internet i PLAY rozpoczęła się Wybrane nagrody
na początku 2006 roku, a więc od momentu wejścia
tej marki na polski rynek telefonii komórkowej.
Kampania dla marki Play
W ciągu 5 lat przygotowano m.in. 4 odsłony portalu nagroda Effie brązowa 2010
konsumenckiego, część biznesową i korporacyjną
oraz szereg miniserwisów promocyjnych.
K2 zajmuje się stałą obsługą portalu playmobile.pl www.zajacmroku.pl
oraz kampaniami promocyjnymi. nagroda Kreatura 2009
W styczniu 2009 roku Agencja ponownie wygrała
przetarg na obsługę marki w ramach działań
interactive. www.playmobile.pl
wyróżnienie Webstar 2008

6. Ewolucja portalu Play.pl
Portal w 201 roku
1
6

7. Początki portalu

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

9. Zmiana pozycjonowania marki PLAY
Dodatkowym katalizatorem zmian na portalu było Kampanie wizerunkowe PLAY 2010 i 201 na billboardach
1
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. Kampania nowych abonamentów 201 na billboardach
1

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

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

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

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

14. 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 Analiza wymagań
projektowego
Ewaluacja rozwiązań Analiza kontekstu
projektowych użycia
Sukces!
Projekt spełnia wymagania
biznesowe i użytkowników
Projektowanie
14

15. Realizacja

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

17. Prototyp serwisu
W ramach prac nad architekturą informacji Do przygotowania prototypu
przygotowano interaktywny prototyp portalu – klikalny,
szczegółowy (hi-fidelity), zapewniający symulację
wykorzystano program MS Visio 2010
ścieżki zakupowej użytkownika. wraz z dodatkiem VisDynamica
opracowanym przez Tomasza
Prace prowadzono w cyklu iteracyjnym: kolejne Seroczyńskiego z K2 Internet.
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ć http://www.visdynamica.com
postępy prac projektowych i weryfikować zgodność
projektu z wymaganiami Klienta i użytkowników.
17

18. Projekty funkcjonalne i graficzne
Wstępny projekt architektury informacji portalu Finalny projekt graficzny strony głównej portalu
18

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

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

21. Nowy proces zakupowy
Jedną z istotniejszych zmian w portalu było Zakupy można rozpocząć z dowolnego miejsca
przeorganizowanie procesu zakupowego w serwisie – od strony oferty, telefonów czy
od strony użytkownika. promocji.
Nowy projekt zakłada większą niż dotychczas Niezależnie od miejsca, z którego użytkownik
integrację sklepu internetowego (dawniej rozpoczyna proces zakupowy, ścieżki
e-Shop) z portalem. nawigacyjne w serwisie dostosowywane
są do scenariusza jego wizyty.
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.
21

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

23. Nowa stopka
Badania z użytkownikami portalu pokazały, Poprzednia wersja stopki
ż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
Nowa wersja stopki
przeglądanie.
Dzięki zastosowaniu białego tła w projekcie
graficznym linki stały się bardziej kontrastowe
i czytelne.

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

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

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

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

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

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

30. Linia graficzna 1
30

31. Linia graficzna 2
31

32. Linia graficzna 3
32

33. Linia graficzna 4
33

34. Zwycięski projekt wybrany przez użytkowników

35. Nowa linia graficzna portalu

36. Finalny projekt graficzny
Wersja dla klientów biznesowych Wersja dla klientów indywidualnych

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

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

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

40. Przykłady zastosowania siatki
40

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

42. Ikonografia
Ikony serwisu zaprojektował uznany ilustrator Paweł Jońca.

43. Strona główna sekcji „Telefony i modemy”

44. Lista telefonów Strona telefonu

45. Strona główna sekcji „Oferta”

46. Pierwsza wersja stron ofertowych Obecna wersja strony ofertowej (abonament)

47. Pierwsza wersja konfiguratora oferty Obecna wersja konfiguratora oferty

48. Strona główna sekcji „Promocje”

49. Lista promocji Strona promocji

50. Strona główna sekcji „Obsługa Klienta”

51. Strona tekstowa Mapa zasięgu

52. Badania z użytkownikami

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

54. Badaniom eyetrackingowym poddano 4 wersje projektów graficznych
strony głównej playmobile.pl:

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

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

57. Rezultaty

58. Konwersja zakupowa z koszyka
UWAGA: Na prośbę Klienta zamieszczamy dane pokazujące trendy, bez danych liczbowych.
58

59. Liczba wizyt w formularzu
UWAGA: Na prośbę Klienta zamieszczamy dane pokazujące trendy, bez danych liczbowych.
59

60. Konwersja zakupowa z formularza
UWAGA: Na prośbę Klienta zamieszczamy dane pokazujące trendy, bez danych liczbowych.
60

61. Liczba zamówień
UWAGA: Na prośbę Klienta zamieszczamy dane pokazujące trendy, bez danych liczbowych.
61

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

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

64. Zespół projektowy
Project managment JavaScript development
• Magdalena Zawada - account director • Łukasz Rozbicki – Web Developer
• Agata Miryn – Sienkiewicz – account executive • Hubert Smusz – Senior Web Developer
• Bartosz Bobrowski – senior project manager
Projektowanie interakcji, architektura informacji Podziękowania
• Paulina Rzymska - user experience architect • Maciej Lipiec – wsparcie projektowo-strategiczne
• Paulina Makuch – realizacja badań usability
• Jarosław Górecki – wsparcie obsługowe
Projekt graficzny wdrożenia
• Marcin Strzałkowski – art director • Michał Gołębiowski – napisanie skryptu koszyka
• Arek Sobczyk - senior graphic designer na potrzeby badań użyteczności
• Tomasz Seroczyński - VisDynamica.com
• Tomasz Wiaderny – alternatywne projekty
graficzne
Development szablonów HTML
• Rafał Kocik – konsultacje copy
• Paweł Włodarczyk – webdeveloper
• Łukasz Rozbicki – webdeveloper

65. K2 User Experience to wyspecjalizowany zespół działający w Potrzebujesz konsultacji?
ramach agencji K2 Internet, zajmujący się tworzeniem koncepcji
dla nowych produktów interaktywnych i e-usług, projektowaniem Skontaktuj się, jeśli interesuje Cię współpraca z nami!
interakcji, prowadzeniem badań z udziałem użytkowników.
Maciej Lipiec
Pomagamy naszym Klientom tworzyć udane produkty i usługi.
User Experience Director
Odkrywamy potrzeby konsumentów. e-mail: maciej.lipiec@k2.pl
Projektujemy ergonomiczne i efektywne aplikacje oraz serwisy tel. 510 533 592
internetowe, aplikacje na urządzenia mobilne (systemy iOS,
Android, Symbian, Windows), interfejsy dla ekranów Katarzyna Wiśniewska
dotykowych, kiosków multimedialnych, sprzętu elektronicznego. New Business Director
Konsultujemy i testujemy użyteczność (audyty i badania e-mail: katarzyna.wisniewska@k2.pl
usability, eye tracking). tel. +48 (22) 448 70 21; 605 102 574
Badamy skuteczność kreacji reklamowych – nie tylko w
Internecie. K2 Internet S.A.
al. Solidarności 74A,
Łączymy wysokiej klasy wiedzę psychologiczną z know-how 00-145 Warszawa
technologicznym i doświadczeniem marketingowym. tel. +48 (22) 448 70 00
fax. +48 (22) 448 71 01
Naszą ofertę projektowo-badawczą znajdziesz na stronie e-mail: biuro@k2.pl
www.k2.pl/ux www.k2.pl
65

66. 66

67. Ź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