Koncepcja nowej strony “ nju mobile”

Projektując nową odsłonę zależało nam na zachowaniu charakterystycznego, rysunkowego stylu marki przy jednoczesnym zwiększeniu przejrzystości i czytelności. Chcieliśmy uniknąć zbyt małych odległości między elementami oraz zbyt dużej liczby widocznych call-to-action.

Wprowadziliśmy hierarchię ważności informacji poprzez zmniejszenie liczby komunikatów pisanych bardzo dużą czcionką. Dzięki temu możemy prowadzić użytkownika przez najważniejsze informacje na stronie i skutecznie skupiać jego uwagę na kluczowych elementach.

Pełny projekt strony głównej — Zobacz

Oferta

Zdecydowaliśmy się umieścić na stronie głównej moduł prezentujący ofertę. Dzięki temu użytkownik może się z nią zapoznać bez konieczności korzystania z menu nawigacji i opuszczania strony. Sama forma jej prezentacji także została zmieniona. Zdecydowaliśmy się na układ kafelkowy, który zwiększa przejrzystość i ułatwia zrozumienie oferty.

Dodanie informacji o usługach bez limitu bezpośrednio na kaflach produktów sprawia, że od razu wiadomo co jest w cenie abonamentu, a za co trzeba zapłacić dodatkowo. Zmieniliśmy także copy przy cenach, z samego „max.” na „nie więcej niż” i „dodatkowo max” — czasami warto poświęcić więcej miejsca na dłuższy tekst jeżeli zwiększy on zrozumiałość przekazu. Ponadto nasz żółty bohater kieruje wzrok użytkownika na wyróżnioną (najlepszą) ofertę.

Oferta Nju Mobile jest bardzo konkurencyjna, zwłaszcza jeżeli weźmiemy pod uwagę jej dodatkowe korzyści, które do tej pory były nieco ukryte. Postanowiliśmy przedstawić je już na stronie głównej. Wykorzystując mikro-interakcje informujemy o nich użytkowników, jednocześnie nie utrudniając porównywania ofert.

Menu

Nowe menu kontekstowe w znaczący sposób skraca drogę do poszukiwanych treści. Wystarczą 3 kliknięcia aby użytkownik dotarł w dowolne miejsce serwisu. Ponadto menu pokrywa wszystkie scenariusze dla różnych grup użytkowników, a użytkownik zawsze wie gdzie zaraz trafi i czego może się tam spodziewać.

Pełny projekt “Menu” — Zobacz

Zapytaj o ofertę

Bezpośrednio pod ofertą dodaliśmy element, którego zadaniem jest zbieranie leadów od osób niezdecydowanych lub tych, które mają obawy przed zamawianiem online.

Krótka, pozioma forma paska na całą szerokość ekranu, przykuwa uwagę ale jednocześnie nie utrudnia szybkiego przejścia do kolejnych informacji, użytkownikom, którzy nie potrzebują pomocy.

“Oferty dopasowywarka”

Przeprojektowaliśmy ten element ponieważ jego dotychczasowa forma przypominała niezbyt lubiane przez użytkowników ankiety satysfakcji. Nowa forma bardziej zachęca do rozpoczęcia interakcji.

Usługi dodatkowe

Umieściliśmy je w sposób kontekstowy, bezpośrednio przy ofercie. Dzięki temu przeglądając ofertę użytkownik od razu dowiaduje się, że mamy mu do zaoferowania coś extra.

Skróciliśmy także copy, tak aby w jednym zdaniu przekazać istotę usługi. Jest to niezwykle istotne ponieważ użytkownicy skanując stronę często pomijają długie formy tekstowe.

Z njumarketu telefony

Postanowiliśmy pokazać na stronie głównej kilka telefonów dostępnych w njumarkecie aby podbić sprzedaż, jak również sprawić, że większa liczba użytkowników trafi na njumarket.

Korzyści

Nad stopką przewidzieliśmy miejsce na prezentację kilku głównych korzyści dla klientów nju mobile.

Obsługa

Pozostawiliśmy przydatny dla użytkowników moduł poświęcony obsłudze klienta ale nieznacznie go przeprojektowaliśmy.

Wytłumaczyliśmy różnicę między dwoma numerami a także wyciągnęliśmy na wierzch formularz kontaktowy umożliwiający zbieranie leadów.

Brand hero

Wykorzystaliśmy znanego i lubianego brand hero marki jako optycznego przewodnika. Tak silny i charakterystyczny element skutecznie przykuwa wzrok i uwagę.

Kaskadowe ruchy gałek ocznych użytkownika podczas skanowania strony podążają za naszym bohaterem, który doprowadza do ich relatywnie stałej pozycji. Wiąże się to z większym skupieniem na elementach znajdujących się przy nim. W ten sposób pogłębiamy proces poznawczy, a użytkownik lepiej przyswaja przekazywane mu informacje.

Pozytywne wzmocnienie

Na zakończeniu umieściliśmy naszego pozytywnego bohatera, komunikującego jedną z głównych korzyści marki.

Jest to pozytywne wzmocnienie zapadające w pamięć a jednocześnie miły akcent stanowiący kwintesencję marki.

Copy

Zmieniliśmy je w wielu miejscach serwisu aby przekaz był jeszcze bardziej zrozumiały przy jednoczesnym zachowaniu stylu komunikacji marki.

Język wizualny

Unikatowy charakter marki sprawia, że możemy odróżnić się od konkurencji nie tylko przy pomocy kolorów ale także stosując niestandardowe zabiegi wizualne.

Kluczowe informacje i buttony podbiliśmy cieniem co dodatkowo zwiększa wyrazistość przekazu.

Udało nam się wykorzystać font, który bez wątpienia od razu kojarzony będzie z nju mobile ale pozwala zachować kompromis między wyrazistą stylistyką a użytecznością i czytelnością.

Mikrointerakcje

Dobry User Experience to także pozytywne doświadczenia pojawiające się w czasie wizyty na stronie.

Warto pokusić się o dodatkowe formy przekazu. Dlatego podbiliśmy atrakcyjność serwisu poprzez dodanie animacji pojawiających się w czasie interakcji. Takie rozwiązania wymagają podejścia pixel prefect i doskonałego front-end development’u.