Dostępny

e-commerce - mZakupy

W 2023 roku mBank uruchomił nowy strategiczny i innowacyjny projekt w sektorze bankowym. Istniejąca już sekcja promocyjna w aplikacji bankowej miała zostać przekształcona w marketplace we współpracy z Morele.net, jedną z największych platform e-commerce w Polsce, jako strategicznym partnerem.

Był to jeden z pierwszych projektów w banku, który od samego początku był realizowany z myślą o WCAG. Pełniłam w nim rolę eksperta ds. dostępności, dbając o to, aby aplikacja była stworzona zgodnie z odpowiednimi wytycznymi.

• 200+ interesariuszy
• październik 2023 - teraz (faza BAS projektu)
• integracja z dużym partnerem e-com (ponad 1,5 mln produktów)
• innowacja w bankowości na skalę Europy
• dostępny dla wszystkich klientów banków (3 mln)
• 4 fazy projektowe
• 3 rundy testów użyteczności
• szczególny nacisk na dostępność dla osób z niepełnosprawnością
• zaprojektowane z wykorzystaniem design systemu

podsumowanie

jako badacz usability

• przeprowadziłam pierwszą rundę testów użytkowników
• zorganizowałam trzydniowe testy użyteczności na żywo na prototypie mobilnym 
• przygotowałam szczegółowy raport z naszych ustaleń

jako starszy projektant UX/UI:

• wspierałam lidera projektu w procesie projektowym
• zapewniałam zastępstwo design leada projektu w przypadku jego nieobecności

jako ekspert ds. dostępności:

• zapewniałam szczegółowe opisy do poszczególnych ekranów i proponowałam rozwiązania projektowe zgodne ze standardem WCAG
• współpracowałam z zespołem deweloperskim, by osiągnąć kompromis pomiędzy kosztami wdrożenia, a zapewnieniem dostępności aplikacji
• szukałam rozwiązań skomplikowanych i niejednoznacznych problemów, które wynikły w czasie trwania projektu

moje role:

szczegóły

zapewnienie dostępności

W świetle wprowadzenia nowych regulacji dotyczących dostępności w UE, mBank, mój klient, wprowadził wymóg, aby wszystkie projekty spełniały standard WCAG na poziomie co najmniej 80%. Projekt e-commerce był jednym z pierwszych gdzie poprzeczka dostępnościowa została postawiona tak wysoko, a mi przypadło zadanie zapewnienia zgodności ze standardami. 

Dostępność często jest rozumiana na bardzo powierzchownym poziomie jako zapewnienie odpowiednich kontrastów i dodanie kilku opisów. W rzeczywistości jest to bardzo złożona kwestia, która sięga podstaw każdego projektu.

By produkty cyfrowe mogły być w pełni dostępne, projektanci muszą zmienić swoje postrzeganie swojej roli i rozszerzyć swoją wiedzę o wiele aspektów technicznych, o których wcześniej bardzo często zapominano. 

Pytanie zadawane przez biznes to często - ilu mamy użytkowników z niepełnosprawnościami, czy to nie marginalny problem?

Odpowiedź brzmi - więcej niż się wydaje. Czasem mówi się nawet, że wszyscy jesteśmy tylko tymczasowo "sprawni" - starość, złamana ręka, zgubione okulary, ADHD... To są rzeczywiste sytuacje i problemy, w których doświadcza masa użytkowników, szacuje się, że około 20% korzysta na dostępnościowym projektowaniu. Zwykle projektanci biorą pod uwagę przede wszystkim utratę wzroku, ale to tylko jeden ze zmysłów które mogą zacząć szwankować i wymagać specjalnego podejścia. Wejście w umysł użytkownika z niepełnosprawnością to nie tylko wyobrażenie sobie, że nie widzimy. Projektant musi myśleć o tym, że zmysły można tracić w różnym stopniu i różnych kombinacjach.

Projektowanie z myślą o dostępności to także zrozumienie technologii stojącej za designem - zapewnienie, że strony internetowe i aplikacje mają odpowiednią strukturę oraz zapewnienie jakości kodu. W tym celu konieczna jest bliska współpraca z programistami oraz wiele testów z dodatkowym oprogramowaniem, takim jak czytniki ekranu.

Tak postrzegam swoją rolę w projektach, w którym przyszło mi pełnić rolę eksperta w tej dziedzinie.

jak to wygląda w praktyce?

Moim zadaniem w tym projekcie było przyjrzenie się już stworzonym propozycjom ekranów i rozwiązań i upewnienie się, że wszystko będzie dostępne zgodnie ze standardami.

Każdy ekran projektu musiał zostać przeanalizowany i opisany z specjalnymi adnotacjami dla programistów odnośnie tego, jak poprawnie go wdrożyć.

Czasami zdarzało się, że propozycje UXowe musieliśmy rozważyć na nowo ze względu na problemy z dostępnością. Na przykład aby upewnić się, że wszyscy użytkownicy mogą aktywować walidację w formularzach lub, że istnieją alternatywy dla horyzontalnego przewijania strony.

Wiele komponentów do tworzenia aplikacji pochodziły bezpośrednio z design systemu. Jeśli pojawił się jakikolwiek problem z dostępnością, współpracowałam z zespołem DS, aby go rozwiązać.

W przypadku niektórych elementów/wytycznych musieliśmy pójść na kompromis i zgodzić się, że tymczasowo nie spełnimy standardu z powodu bardzo wysokich kosztów i dużych zmian w całej aplikacji. Przykładem tego był poziomy widok całej aplikacji, który nadal nie został wdrożony.

fazy projektowania

Projekt miał ambitny harmonogram, wymagający zaprojektowania i przetestowania pierwszej fazy w zaledwie 6 miesięcy. Obejmowała ona  zaprojektowanie i przetestowanie całego procesu, od onboardingu użytkowników i prezentacji produktu po płatność i śledzenie paczek.

Byłam odpowiedzialna za przeprowadzenie testów użyteczności z użytkownikami. Przygotowałam prototyp i przeprowadziłam testy z 10 uczestnikami na urządzeniach mobilnych, osobiście, w specjalistycznym laboratorium. Pierwsze wrażenia z nowej sekcji aplikacji były bardzo pozytywne. Zidentyfikowaliśmy i zaproponowaliśmy kilka kluczowych ulepszeń, aby poprawić proces, które później zostały zatwierdzone do rozwoju.

faza 1 - pierwsze projekty i testy

faza 2 - testy F&F

W następnej fazie dodaliśmy możliwość jednoczesnego prezentowania wielu produktów oraz wprowadziliśmy pełną funkcjonalność koszyka zakupowego.

Testowaliśmy te zmiany na żywo z grupą kontrolną kilku tysięcy klientów mBanku (family&friends). Na tym etapie, oprócz ciągłego wsparcia dot. dostepności, byłam odpowiedzialna za wsparcie głównego projektanta i pomoc w razie potrzeby.

faza 3 - wdrożenie pełnej wersji  01.2025

Osiągnęliśmy pełną funkcjonalność marketplace w aplikacji banku, w tym różne warianty produktów, usługę "buy-now, pay-later oraz pełne śledzenie zamówień w aplikacji bankowej. Kolejne usprawnienia aplikacji są nadal w przygotowaniu.

Dostępność to nie tylko kilka wyborów projektowych, musi być uwzględniana u podstaw projektowania i kodowania.

czego się nauczyłam

Nauka o dostępności w teorii i praktyce. Praca pod dużą presją i z dużymi oczekiwaniami - aplikacja musiała spełniać wygórwane normy dotyczące A11y.

największe wyzwanie