Streszczenie

National Australia Bank (NAB) postawił sobie jasny cel, by stać się firmą najbardziej zorientowaną na klienta w Australii i Nowej Zelandii. W skali całego przedsiębiorstwa, obsługującego ponad 8,5 miliona klientów i zatrudniającego ponad 200 projektantów w różnych działach, NAB borykał się ze złożonymi problemami związanymi z około 65 ścieżkami wdrażania nowych klientów, kilkoma bibliotekami komponentów oraz ręcznymi aktualizacjami, których wprowadzenie zajmowało kilka dni w przypadku pojedynczej zmiany.

Wymogi regulacyjne podniosły również poprzeczkę w zakresie spójności i kontroli, a NAB zareagował, tworząc Elevate — ujednolicony system projektowania w Figma, który pozwala zespołom projektować raz i ponownie wykorzystywać projekty wszędzie.

Rezultaty: prostszy proces wdrażania klientów i większa efektywność dla NAB.

• O 50% szybsza rejestracja dzięki usprawnionemu procesowi wdrażania
• O 70% mniej pól formularzy, co zmniejsza utrudnienia dla klientów
• Wyeliminowano powielanie dzięki opublikowanym, wstępnie zatwierdzonym komponentom
• Płynniejsze przekazywanie projektów do działu programistów dzięki Figma jako jedynemu wiarygodnemu źródłu informacji

Wyzwanie: kiedy wzrost prowadzi do fragmentacji

W miarę jak zespół projektowy NAB się rozrastał, doświadczenia z produktami zaczęły się różnić. Zespoły produktowe w całej organizacji rozwiązywały te same problemy klientów w bardzo różnorodny sposób. Wniosek o kartę kredytową może występować w kilku wersjach, z których każda zawiera podobne pytania, ale różni się sformułowaniami, kolejnością i sposobem obsługi. „To powszechny problem w dużych przedsiębiorstwach, ale ambicją NAB jest bycie najlepszym, więc będziemy zadowoleni dopiero wtedy, gdy zapewnimy klientom jak najprostsze doświadczenia, w których na pierwszym miejscu stawiamy ich potrzeby” – mówi Daniel Fisher, dyrektor ds. projektowania w NAB.

W obiegu znajdowały się oddzielne biblioteki komponentów, z których niektóre miały już prawie dziesięć lat. Prosta zmiana może wpłynąć na wiele bibliotek i plików. Nawet aktualizacja wskaźnika postępu na kilku ekranach i śledzenie wszystkich jego wariantów mogło zająć kilka dni.

Wiele ścieżek wdrażania powodowało niespójności i zwiększało ryzyko, co prowadziło do komplikacji podczas przeglądów zgodności i audytów. Poprzednie narzędzia nie wspierały bezpiecznej współpracy na dużą skalę. Pliki były udostępniane za pośrednictwem poczty e-mail, interesariusze nie mogli przeglądać ich w kontekście, a mechanizmy kontroli dostępu nie nadążały za potrzebami przedsiębiorstwa.

Rozwiązanie: stworzenie systemu projektowego, który działa wszędzie

W NAB wszyscy zgodzili się co do prostej zasady sformułowanej przez dyrektora ds. projektowania Lance'a Thornswooda: każda rzecz powinna mieć tylko jeden sposób realizacji. Ta jasność zaowocowała powstaniem Elevate – ujednoliconego systemu projektowania opartego na Figma Enterprise, który pozwala na jednorazowe tworzenie wzorców i ich ponowne wykorzystywanie w dowolnym miejscu.

„Maszyny” odgrywają kluczową rolę w zapewnieniu, że ponowne wykorzystanie działa na dużą skalę. Te inteligentne, wielokrotnego użytku komponenty są tworzone z uwzględnieniem wszystkich możliwych wariantów. Każdy z nich zawiera wbudowaną logikę walidacji, obsługi błędów i responsywności, dzięki czemu można je od razu wdrożyć w dowolnym produkcie.

Opublikowane biblioteki Figma pozwalają na wdrożenie tego modelu na dużą skalę. Gdy zespół aktualizuje kluczowy komponent, zmiana ta jest automatycznie wprowadzana we wszystkich plikach, które z niego korzystają. Tylko w ciągu ostatniego roku biblioteki te zostały wykorzystane ponad 100 000 razy w całej organizacji NAB.

Spójność projektowa zapewniana przez Figma Enterprise zmniejsza również ryzyko związane z nieprzestrzeganiem przepisów. Każda interakcja w Elevate jest wstępnie zatwierdzona, znormalizowana i podlega audytowi w różnych produktach i markach. Role i uprawnienia zapewniają kontrolę nad wrażliwymi zadaniami. Historia wersji i publikowanie bibliotek tworzą przejrzysty zapis tego, co się zmieniło, kiedy i przez kogo.

Rozszerzanie projektowania atomowego dzięki Figma Enterprise

Zainspirowana metodologią projektowania atomowego Brada Frosta, firma NAB wykorzystała modułowe elementy do tworzenia spójnych doświadczeń, a następnie rozszerzyła to rozwiązanie o system inteligentnych, adaptacyjnych komponentów zwanych „maszynami” i „fabrykami”. Projektowanie atomowe posłużyło firmie NAB jako podstawa dla Elevate. Jednak samo w sobie nie wystarczyło, aby ujednolicić wszystkie interakcje z klientami w całej firmie. Zespół potrzebował funkcjonalnych komponentów, które mogłyby dostosować się do każdego przypadku użycia — w zewnętrznych i wewnętrznych ścieżkach użytkownika, ścieżkach błędów, wariantach brandingu i stanach interfejsu użytkownika.

Korzystając na przykład ze zmiennych, trybów i zagnieżdżonych instancji Figma, NAB stworzyło komponent numeru telefonu, który dostosowuje się do każdego kontekstu. Kiedy 25 projektantów ponownie wykorzystuje ten komponent zamiast go odtwarzać, oznacza to oszczędność około 25 dni pracy projektantów. Jeśli pomnożymy to przez dziesiątki komponentów, oszczędności mogą sięgać milionów dolarów.

„Zamiast tracić czas na przeprojektowywanie tego, co już istnieje, możemy teraz nieustannie ulepszać i skupiać się na bardziej kreatywnej pracy” – mówi Daniel.

Tworzenie motywów i rozwiązań white label na dużą skalę dzięki zmiennym

Zmienne umożliwiają rozszerzenie platformy Elevate na różne produkty i marki bez konieczności powielania pracy. Każda maszyna odczytuje niewielki zestaw tokenów dotyczących koloru, czcionki i promienia zaokrąglenia narożników, dzięki czemu ten sam przepływ może pojawić się w różnych markach, takich jak NAB, Kogan Money, Qantas Money czy Bank of Queensland, po prostu poprzez zamianę tokenów. Zespoły przeglądają zmiany w pliku, publikują je raz, a każdy przepływ, który z nich korzysta, aktualizuje się na miejscu.

Ponieważ zmienne znajdują się w opublikowanych bibliotekach, zarządzanie nimi jest wbudowane. Role i uprawnienia kontrolują, kto może edytować. Historia wersji rejestruje, co się zmieniło, kiedy i przez kogo. Zespoły projektowe i inżynieryjne sprawdzają te same tokeny w kontekście, co ogranicza ciągłe przepychanki i pozwala na terminowe wprowadzanie marek white-label.

Szybsze i prostsze wdrażanie nowych pracowników dzięki Dev Mode

Przed wdrożeniem Figma przekazywanie projektów między projektantami a programistami spowalniało pracę zespołów. Projektanci wysyłali pliki jako załączniki do wiadomości e-mail, a specyfikacje przechowywali w oddzielnych dokumentach. Łatwo było przeoczyć skrajne przypadki. Około 50% wydajności zespołu poświęcano na sprawdzanie zgodności kompilacji z projektami i rejestrowanie rozbieżności.

Po przeniesieniu procesu do Figma źródłem prawdy stał się plik przedstawiający przepływ od początku do końca, nad którym pracuje jednocześnie nawet 80 osób. Programiści otwierają ten sam plik, przeglądają gałęzie i zostawiają informacje zwrotne w kontekście. W Dev Mode sprawdzają odstępy, tokeny i właściwości komponentów po najechaniu kursorem, a następnie kopiują wartości gotowe do użycia w kodzie. Stany błędów, przypadki skrajne i ścieżki warunkowe znajdują się obok projektów i są aktualizowane w miarę postępu prac.

Te praktyki umożliwiły przeprojektowanie procesu wdrażania klientów NAB. Podróż zaczyna się teraz od weryfikacji tożsamości. Skan paszportu lub prawa jazdy wypełnia formularz i wykonuje pracę za klienta, pobierając dane z zaufanego źródła, które bank może zweryfikować.

Jeśli prawo jazdy wydane w stanie Wiktoria zawiera tylko inicjały, formularz prosi o podanie pełnego drugiego imienia. Wspólne komponenty sprawiają, że ulepszenia wchodzą w życie natychmiast. Na przykład selektor numerów telefonów międzynarodowych rozpoznaje lokalne numery zaczynające się od 04 i automatycznie je formatuje.

Dzięki Figma firma NAB usprawniła proces wdrażania nowych pracowników i zwiększyła wydajność zespołu poprzez:

• zmniejszenie liczby pól w formularzach nawet o 70% oraz skrócenie czasu wdrażania nawet o 50%, zapewniając szybszy i bardziej płynny proces,
• wzmocnienie bezpieczeństwa dzięki rozpoznawaniu twarzy i skanowaniu dokumentów tożsamości, udowadniając, że szybkość i bezpieczeństwo mogą iść w parze,
• wyeliminowanie powielania pracy poprzez publikowanie wstępnie zatwierdzonych komponentów oraz jednokrotne kopiowanie i ponowne wykorzystywanie ich w różnych produktach, dzięki czemu inżynierowie tworzą na podstawie jednego wiarygodnego źródła.

Projektowanie jako siła napędowa orientacji na klienta

System projektowania NAB nieustannie ewoluuje. Dzięki takim funkcjom jak Code Connect i Figma MCP zespół łączy projektowanie z inżynierią — łącząc komponenty z kodem, usprawniając procesy przekazywania informacji zwrotnych oraz przyspieszając wdrażanie rozwiązań w oparciu o rzeczywiste opinie klientów. Wykorzystują również Figma Make i narzędzia wspomagane AI do wykrywania punktów tarcia w kluczowych przepływach.

„Możliwość wydania polecenia i powiedzenia »policz punkty tarcia dla tego konkretnego doświadczenia« — i uzyskania dokładnego wyniku — jest niesamowita” — mówi Daniel. „Automatyzacja zadań wykonywanych ręcznie jest niesamowita”.

Włączając Figma do centrum swojego procesu, NAB pokazuje, jak struktura i kreatywność mogą ze sobą współgrać. W ściśle regulowanej branży opartej na zaufaniu wyznacza nowy standard tego, jak wygląda obsesja na punkcie klienta na dużą skalę.