Wdrożenie CMS i redesign strony internetowej mBanku

mBank, jeden z największych banków w Polsce, szczyci się swoim innowacyjnym podejściem do bankowości, co odzwierciedla jego hasło "ikona mobilniści." W związku z tym zaistniała wyraźna potrzeba odświeżenia jego strony internetowej.

Stary portal, kiedyś skuteczny, stał się przestarzały i trudny w zarządzaniu. Postanowiono, że nowa strona internetowa będzie oparta na CMS, a mServices zlecono zaprojektowanie nowej witryny i nadzorowanie procesu wdrożenia.

podsumowanie

• 100+ interesariuszy

• czas trwania ponad 2 lata

• wdrożenie CMS

• nowe typy zasobów graficznych w design systemie

• poprawa architektury informacji

• świeży, nowy wygląd

• poprawiona dostępność

Dołączyłam do projektu w jego najbardziej wymagającej fazie, obejmując rolę lidera po zakończeniu etapu ideacji. Moim zadaniem było uczynić "wielką wizję" użyteczną i wykonalną w danym czasie przy ograniczonych zasobach. Czym się zajmowałam:

• organizowałam przestrzeń do pracy na Figmie, utrzymując porządek 
• zaprojektowałam i stworzyłam dokumentację dla ponad 40 komponentów CMS, w tym przewodnik dla użytkowników CMS
• poprowadziłam niewielki zespół projektantów UX/UI w projektowaniu ponad 120 podstron dla strony internetowej
• opracowałam prototyp do testów mobilnych i wdrożyłam ulepszenia w projekcie na podstawie badań.
• nadzorowałam różne gałęzie projektu (pięć jednocześnie) i zapewniałam spójność projektową

moja rola - główny projektant UX/UI

szczegóły

wyzwanie 1 - ta sama treść nowa strona internetowa

Jednym z głównych wyzwań technologicznych i projektowych w tym było stworzenie systemu reużywalnych i responsywnych sekcji strony internetowej, tak by:

a) cała obecna treść mogła być przeniesiona na nową www;

b) można było wdrożyć stronę w CMS;

c) były one jasne i łatwe do edytowania przez osoby nietechniczne.

treść pozostaje taka sama!

mało elastyczna (droga)

przestarzały design

nie mobile first

w pełni responsywna

oparta na CMS

nowoczesny wygląd

nowa strona 

stara strona 

wyzwanie 2 - zapewnienie elastyczności - optymalizacja kosztów utrzymania

Gdy dołączyłam do projektu tym co zastałam była nowa wizja strony internetowej, zaakceptowana przez interesariuszy - to, co musiałem zrobić, to wprowadzić te wizję ją w życie.

Musieliśmy upewnić się, że proponowana wizja uwzględnia wszystkie potrzeby i wypełnia wszystkie luki, jeśli to konieczne.

Aby to zrobić, zdefiniowaliśmy szereg sekcji do wdrożenia w CMS i testowaliśmy je, tworząc liczne, nowe wersje obecnych podstron.

Niektóre z istniejących treści musiały być kreatywnie przełożone na nowe projekty. Wszystko to zostało zrealizowane w bliskiej współpracy i konsultacjach z interesariuszami z różnych działów banku odpowiedzialnych za różne obszary.

wyzwanie 3 - czy użytkownikom się to spodoba?

Mieliśmy pomysł na system i musieliśmy go sprawdzić w boju, rozpoczęliśmy więc rundę testów użyteczności. Większość zadań została pomyślnie ukończona przez użytkowników. Jednak główne zalecenia dotyczące zmian, były związane z copywritingiem na stronie oraz samymi produktami bankowymi. Odkryliśmy, że użytkownicy byli głównie zdezorientowani elementami, które były poza naszą kontrolą, co okazało się znacznym problemem.

Uświadamiając sobie, że ostateczny projekt będzie oceniany na podstawie czynników, na które nie mamy wpływu, skierowaliśmy naszą uwagę na użytkownika drugiego poziomu —edytora CMS, który miałby rzeczywistą kontrolę nad stroną internetową i jej zawartością.

wyzwanie 4 - projekt poza kontrolą projektanów

Wszystkie komponenty CMS musiały być dokładnie opisane w dokumentacji. Jako że nasz focus przesunął się na edytorów, dążyliśmy do stworzenia "kuloodpornych" komponentów z wbudowanymi ograniczeniami, tak, by zapewnić spójność całej strony.

Naszym wyzwaniem było zaprojektowanie strony internetowej, którą mogłoby zarządzać setki edytorów, z których wielu nie miało doświadczenia w projektowaniu, a także dostosowanie istniejącej, chaotycznej zawartości strony do nowej struktury.

Z tego względu stworzyłam szczegółową dokumentację z jasnymi instrukcjami dla edytorów, zawierającą przykłady użycia i typowe błędy oraz wszystkie warianty poszczególnych sekcji CMS.

Kontynuowaliśmy nadzorowanie wdrożenia, szybko i skutecznie reagując na wszelkie pojawiające się problemy. Z powodu napiętego harmonogramu, menedżer projektu po stronie klienta (banku) wprowadził kilka cięć w początkowym projekcie, co wpłynęło na całą stronę internetową i wymagało szybkiej reakcji projektowej.

W pewnym momencie musieliśmy przeprowadzić szczegółowy audyt, aby pogodzić różnice między projektem a wdrożeniem, znajdując kompromis.

Wyzwanie 5 - wdrożenie i kontrola jakości

Wyzwanie 6 - brak wewnętrznych procesów po stronie banku

Na samym końcu całego projektu stało się jasne, że naszemu klientowi brakowało zwinnych procesów wewnętrznych do zarządzania zasobami wizualnymi, takimi jak ilustracje, kolaże i makiety.

Aby temu zaradzić, zorganizowaliśmy warsztaty, by opracować rozwiązanie do zarządzania kolażami na stronie oraz zaproponowaliśmy zasady dotyczące tworzenia zasobów w odniesieniu do linii biznesowej i każdego produktu.

Dostarczyliśmy skalowalny wzór do dostosowywania liczby grafik na stronie internetowej. W mServices opracowaliśmy również narzędzie, które umożliwia szybkie tworzenie zasobów wizualnych.

Dystans do mojej pracy - czasem nie wszystko pójdzie po mojej myśli (nawet jeśli dam z siebie wszystko) i niektóre rzeczy będą po prostu poza moją kontrolą, co nie znaczy, że projekt jest zły lub że jestem złym projektantem.

czego się nauczyłam

Przekształcanie wizji w rzeczywisty produkt, który spełnia wszystkie oczekiwania i mieści się w ramach ograniczeń.

największe wyzwanie