W tym artykule opowiadam o moim procesie pracy nad jednym z szeroko zakrojonych projektów przebudowy wewnętrznego narzędzia Probo (nazywamy je Cerebro ) w celu lepszej obsługi klienta.

Co to jest Cerebro?

Cerebro jest jednym źródłem prawdy dla wszystkich rzeczy Probo! Jest to wewnętrzne narzędzie Probo, które ma kilka sekcji, w tym Tworzenie treści (do tworzenia i przesyłania treści do aplikacji), Tagi (Tworzenie tagów użytkownika i przypisywanie akcji do tych tagów), Pulpit nawigacyjny i Użytkownicy.

Sekcja Szczegóły użytkownika to baza użytkowników, w której zespół CX może sprawdzić informacje dotyczące reklamacji użytkowników i wrócić do użytkownika.

W tym artykule przyglądasz się, jak przeprojektowaliśmy sekcję danych użytkownika w Cerebro.

Skrót

Przeprojektowanie sekcji danych użytkownika w Cerebro w celu poprawy UX i produktywności zespołu obsługi klienta Probo.

Zrozumienie problemu

Zespół wsparcia używa Cerebro do sprawdzania działań użytkowników wykonanych w aplikacji.

W tym zadaniu najpierw zidentyfikowałem podstawowe przepływy użytkowników, a następnie szukałem w nich problemów UX:

Podczas gdy siedziałem z zespołem wsparcia, aby obserwować ich przepływy pracy i identyfikować problemy z użytecznością, sam rozwiązałem niektóre zgłoszenia. Miało to miejsce w sezonie IPL, kiedy otrzymaliśmy ponad 1000 biletów na kierownika społeczności, stąd ich obciążenie pracą było ogromne.

Widząc, jak są tak zdeterminowani, aby uzyskać jak najlepsze wsparcie dla użytkowników próbnych, poruszyło to we mnie strunę i napędzało mnie do dalszego ulepszania ich codziennego doświadczenia poprzez projektowanie.

Zidentyfikowane podstawowe problemy:

1. Słaba skanowalność w poszukiwaniu informacji: Główną pracą użytkowników jest uzyskiwanie informacji z Cerebro, ale przeglądanie tabel wymagało dużego wysiłku poznawczego, ponieważ musieli się bardzo skupić, aby znaleźć wymagane informacje na ekranie.
2. Złożona nawigacja: w przypadku niektórych przepływów użytkowników nawigacja była złożona i ukryta.
3. Zwiększone obciążenie poznawcze: poprzedni projekt nie był zgodny z prawami hierarchii i bliskości Gestalt, aby zmniejszyć obciążenie poznawcze użytkowników.
   Dodatkowo, przy danych przepływach użytkowników, użytkownicy musieli zapamiętywać informacje z jednej tabeli i przechodzić do innej tabeli w celu porównania, co wydłużało czas wykonania zadania.
4. Tożsamość marki nie jest wyrównana: branding Probo został przeprojektowany kilka miesięcy temu, więc przeprojektowanie Cerebro było okazją do dostosowania się do nowego brandingu.

Aplikacja i strona internetowa Probo zostały przeprojektowane kilka miesięcy temu z nowym brandingiem, nadszedł czas na to samo w narzędziach wewnętrznych.

Zobaczmy przed i po niektórych stronach:

Projekty — przed vs po

Rozłóżmy więc te przeprojektowania jeden po drugim.

Przed vs po — awaria projektu

Sekcja podsumowania użytkownika:
ta sekcja zawiera podstawowe dostępne informacje o użytkownikach, które są podzielone na trzy części; podobne informacje są przechowywane razem.

• Najważniejsze informacje są wyróżnione na frontach, takich jak dane użytkownika i jego status.
• Ustalanie priorytetów działań: w starym projekcie trzy wezwania do działania są obecne bez żadnej hierarchii dla działań głównych/drugorzędnych.
  Również po analizie dowiedziałem się, że żadne z nich nie jest CTA ani podstawowymi działaniami, a zatem nie muszą być otwarte i skupiać się na ekranie. Przyciski akcji składają się z jednego przycisku zwanego „opcjami”.

• Boczny pasek nawigacyjny:
  na ekranach z tabelami danych przestrzeń pozioma ma ogromne znaczenie, dlatego projekt bocznego paska nawigacyjnego został przeprojektowany z przyciskami ikon zajmującymi minimalną ilość miejsca.
• Jeśli wymagany jest pełnowymiarowy pasek nawigacyjny, użytkownik może kliknąć logo, a rozwinie je do pełnowymiarowego paska nawigacyjnego z przyciskami Tekst + ikona.
  Bez rozwijania również, jeśli użytkownicy muszą się przełączyć, mogą najechać kursorem na ikony, aby zobaczyć, co to znaczy:

Ale w jaki sposób oddzielenie kart ułatwiłoby porównywanie danych między tabelami na różnych kartach? Omówimy to za jakiś czas!

A teraz zagłębimy się w więcej szczegółów:

Optymalizacja tabel danych w celu lepszego UX:
Tabele danych mają jedno zadanie do wykonania — szybkie dostarczenie potrzebnych danych użytkownikom!
Aby to zadanie zostało wykonane, musi mieć możliwość szybkiego skanowania w celu znalezienia odpowiednich informacji.

Są to projekty przed i po dla dwóch najbardziej złożonych tabel — historii salda i historii handlu

Aby skanowanie danych było łatwiejsze i szybsze, zwrócono uwagę na 4 punkty:

• Szybkie skanowanie w celu znalezienia odpowiednich informacji - poprzez kodowanie kolorami oraz dodawanie hierarchii i bliskościoddzielnych informacji .
• Grupowanie podobnych danych
• Eliminacja powtarzających się informacji
• Zmiana kolejności danych w celu szybkiego porównania

Jak się sprawował?

Przeprojektowanie wraz z niektórymi poprawkami błędów zostało zaplanowane do opracowania, a dzięki wynikom testów użyteczności oczekuje się, że zwiększy produktywność o 2x.

Ponieważ jest to wciąż w fazie rozwoju, nie można teraz udostępnić ostatecznej wydajności i wskaźników KPI, ale zaktualizuję tutaj, gdy tylko zostanie uruchomiona.

Czego się nauczyłem?
Większość pracy, którą wykonałem przed tym projektem, była związana z dodawaniem nowych funkcji projektowych do stron docelowych aplikacji lub strony internetowej Probo.
Dlatego praca na tak ogromnym zbiorze danych była wyzwaniem sama w sobie, nauczyłem się wiele o tym, jak UX jest bezpośrednim wynikiem tego, jak został zaimplementowany interfejs użytkownika.

Również dla entuzjastów projektowania jest tutaj link do artykułu na stronie internetowej grupy NN, który bardzo pomógł mi w zrozumieniu i zaprojektowaniu tabel danych.

Ps Nauczyłem się też regularnie dokumentować proces projektowania, ponieważ pisanie tego studium przypadku zajęło mi zbyt dużo czasu

Co dalej?

1. Eksplorowanie mikrointerakcji, jak również pustych stanów, aby dodać trochę radości pomiędzy wszystkimi pracami, które nie zostały omówione w tej chwili z powodu braku czasu.
2. Eksploracja skrótów klawiaturowych do korzystania z narzędzia, na razie wszyscy w zespole mają MacBooki (flex 101 ), stąd na razie wydajne i łatwe w użyciu gładziki.
3. Na razie przeprojektowanie tylko sekcji danych użytkownika jest zakończone, następną fazą powinno być przeprojektowanie wszystkich innych sekcji Cerebro.

Ogromne pozdrowienia dla naszego niesamowitego zespołu CX, podczas tego projektu dosłownie wpadałem do ich pokoju co najmniej 5 razy dziennie, odpowiadali na wszystkie moje pytania i wątpliwości w najlepszy możliwy sposób, a było to szczególnie w sezonie IPL, najbardziej ruchliwym czas roku!

Dziękuję również mojemu niesamowitemu zespołowi projektowemu ❤️, a także wszystkim właścicielom produktów, którzy pomagali mi cennymi opiniami i sugestiami przez cały czas.

Dziękuje za przeczytanie! Do zobaczenia wkrótce z kolejnym studium przypadku

Przywitaj się z Nidhi na LinkedIn • Instagramie • Twitterze