Responsive web design na stronach Credit Agricole

Wyzwanie Symetrii

„Klub Rabatowy” (http://klubrabatowy.credit-agricole.pl/) to strona prezentująca partnerów Credit Agricole oraz rabaty, które udzielane są przez nich klientom banku. Natomiast „Przenieś się do Credit Agricole” (http://www.credit-agricole.pl/przenies-konto/index.html) jest skierowana do nowych klientów, a jej głównym zadaniem jest zachęcenie odwiedzających do przeniesienia konta do banku. Chociaż potrzeby użytkowników w obu przypadkach są różne, to w każdym z nich zadanie postawione przed Symetrią obejmowało dostarczenie rozwiązań maksymalizujących komfort pracy ze stronami. Zgodnie z powszechnie obowiązującym trendem stwierdzono, iż serwis Credit Agricole coraz częściej odwiedzany jest przez osoby korzystające z urządzeń mobilnych. Stąd też wyzwanie Symetrii obejmowało opracowanie stron, które będą kompatybilne z różnymi wielkościami ekranów.

Wybór strategii obecności mobilnej

Eksperci Symetrii zaangażowani w projekt zgodnie zarekomendowali podejście responsive web design, które daje możliwość stworzenia rozwiązania dla wszystkich wielkości ekranów (nie wykluczając nawet tych, które jeszcze nie są dostępne na rynku).

„Responsywne strony internetowe to coraz częściej standard, a nie ciekawostka. Tworząc projekty dla banku Credit Agricole zawsze myślimy o tym, żeby dostarczyć użytkownikom odpowiednich doświadczeń niezależnie od wielkości ekranu jakiego używają.” – komentuje Andrzej Pyra, UX Specialist w Symetrii.

Ważnymi argumentami przy wyborze podejścia RWD były również: łatwość zachowania spójności komunikacji marketingowej, lepsza skuteczność strony w wyszukiwarkach internetowych (strona responsywna dostępna jest na wszystkie platformy pod jednym adresem URL) oraz optymalizacja kosztów (tworzone jest jedno rozwiązanie, a nie kilka niezależnych).

Proces realizacji projektów

Kontekst mobilny zmusza do większej koncentracji na najważniejszych funkcjach i treściach, dlatego proces projektowania stron „Klub Rabatowy” i „Przenieś się do Credit Agricole” rozpoczęto od najmniejszych ekranów. Implementacja zasady „mobile first” ułatwiła zaplanowanie przejrzystej struktury i dostarczenie użytkownikom skutecznych rozwiązań koncentrujących się na podstawowych celach poszczególnych stron.

Nowe responsywne projekty stron pozwalają na efektywną pracę na ekranach dotykowanych czy możliwość szybkiej zmiany orientacji ekranu.

Kolejnym elementem istotnym podczas projektowania responsywnych stron było zaplanowanie, które elementy będą występować w przypadku większych ekranów (np. rozbudowane grafiki) i jak zmieni się układ wszystkich składowych layoutu.

układ wszystkich składowych layoutu

Analizując powyższe ekrany można zauważyć m.in.:

• zmianę sposobu wyświetlania menu głównego;
• zmianę lokalizacji i sposobu prezentacji buttona „PRZENOSZĘ KONTO”;
• skalowalność grafiki i głównego komunikatu;
• odmienną prezentację procesu przenoszeni konta.

Efekty

Najważniejszym efektem zaprojektowanych przez Symetrię stron jest ich dostępność dla wszystkich klientów Credit Agricole niezależnie od urządzenia, z którego korzystają. Strony automatycznie reagują na wielkość ekranów, na których są wyświetlane i w ten sposób zapewniają użytkownikom swobodną eksplorację ich treści.

Znalazło to odzwierciedlenie w wynikach statystycznych. Przyglądając się danym dotyczącym strony „Klubu Rabatowego” za okres 24-28 sierpnia 2012 (przed zmianami) oraz 14-18 grudnia (po zmianach) dostrzec można wyraźny wzrost wskaźników efektywności serwisu.

wskaźniki efektywności serwisu

Współpraca oczami klienta

„Symetria jest autorem stron http://klubrabatowy.credit-agricole.pl/ i http://www.credit-agricole.pl/przenies-konto, które zostały zaprojektowane zgodnie z najnowszym trendem związanym z responsive web design. Dzięki wiedzy i doświadczeniu ekspertów Symetrii udało się stworzyć strony zoptymalizowane pod kątem różnych wielkości ekranów, na których użytkownicy oglądają nasze strony www..” – Piotr Jeske, starszy specjalista e-commerce w Credit Agricole Bank Polska.

Źródło:
Grupa Symetria
UX Alliance (UXA)