Walizka Redmadrobot: Redesign IOS Aplikacji „Mój Beeline”

Aplikacja „Mój Beeline” ukazało się w 2014 roku i do niedawna praktycznie nie zmieniło z punktu widzenia UX/UI. W ciągu ostatniego roku produkt na platformie iOS został poważnie przebudowany. Zimą aplikacja otrzymała pierwszą część odświeżony logiki, a w czerwcu — logicznych poprawy i fresh UI. Nasz klient, „Vimpelcom”, chciałem zmodernizować konstrukcję, czyniąc go bardziej świeże i przyjazny, i poprawić ogólne doświadczenie użytkownika.

Tymczasem użytkownicy skarżyli się na trudności ze znalezieniem potrzebnych informacji i usług. Zadania ze strony firmy. Niestandardowe problemy.

Opracowanie aplikacji serwisowych dla dużych klientów — to zawsze konieczność równowagi między potrzebami biznesu i użytkowników. Często te potrzeby mogą kolidować. Użytkownicy oczekują wygody, prostoty i możliwości zaoszczędzić, podczas gdy biznes jest skierowany na osiągnięcie własnych KPI, przede wszystkim wyrażonych w wyników finansowych. Projektując serwis, trzeba szukać kompromisu, co często nie jest łatwe.

Poważnie uproszczone logiki działania aplikacji, przeprojektowany UI-składową i te zmiany w systemie. W trakcie redesign podkreślali ważne istocie, rozprzestrzenia akcenty tam, gdzie jest to konieczne. Wcześniej w aplikacji było boczne menu, masę punktów („Najważniejsze” Finanse”, „Tempa”, „Usługi”, „Internet”, „Biura”, „Pomoc”, „Ustawienia”, „Aplikacje”).

Okazało się, że niektórzy użytkownicy nie wiedzieli o jego istnieniu i część funkcji aplikacji nie cieszył się wcale. Nie pomagały nawet specjalne wskazówki. Możemy wymienić pasek boczny na , który pojawia się na wszystkich ekranach.

Aby przekazać najważniejsze dla użytkownika i odciąć niepotrzebne, zwróciliśmy się do metryki trasy dla. Na przykład, okazało się, że w starej wersji w menu „Biura” wchodzili tylko 4% użytkowników. Logiczne jest, że tej pozycji nie jest miejsce na ekranie głównym. Ograniczona przestrzeń również pociągnęło za sobą zmiany logiki.

W końcu okazało się tak . Rozdziały ułożone są w kolejności ich pierwszeństwa dla użytkownika.

Dużym zmianom uległ ekran główny, który teraz nazywa się „Balans”. Wcześniej było na nim zbyt wielu informacji, nie zawsze jest istotne dla użytkownika (na przykład, po co oferować człowiekowi „zaufane płatność”, kiedy u niego i tak wystarczająco dużo pieniędzy na rachunku?). Na ekranie głównym zostawiliśmy tylko ważne. Stan równowagi z możliwością szybko go uzupełnić, resztę pakietów z internetu, liczba minut na rozmowy i SMS, a także taśmę z ostatnimi operacjami.

Za czas pracy zostało przygotowane wiele iteracji ekranu głównego. Jesteśmy ogólny styl, zakładali system, eksperymentując z kolorami, układem elementów i logiką. Opcje z gradientem ławicy na rzecz zwięzły, jasny żółty marki kolory.

Po lewej — jeden z pośrednich opcji, po prawej — finał. Die z baterii zrobili żółtej na żółtym tle. Ta technika pozwoliła wizualnie połączyć wszystko w jedną istotę „Balans”, ale przy tym głęboki cień daje do zrozumienia, że na baterie, można nacisnąć.

„Jaki mam tempo?” — wcześniej był to jeden z najczęstszych problemów, z którymi użytkownicy zwracali się do call center „”. Od tego czasu linia taryf łatwiejsza. Gdy użytkownik dowiedzieć się na swój plan, nie ma potrzeby oświetlać to za każdym razem, gdy wchodzi w aplikacji. Dlatego usunęliśmy z ekranu głównego nazwa taryfy, poprzez nacisk na resztce minut, SMS i ruchu dla pakietu obsługi.

Wcześniej resztę ukrywał się według przesuń — teraz pojawia się dużymi blokami. Wcześniej wszystkie akumulatory w aplikacji wyświetlane długą taśmą. Tam, z kolei, byli w istocie różnego typu, na przykład różne „minuty”.

Zwykłe, premiowych i tak dalej. Wszystko to tylko mylą użytkowników, zdecydowaliśmy się zostawić tylko trzy główne akumulatora. Internet, minuty i wiadomości. Szczegółowa informacja pojawia się w tapu na akumulator.

Kolejny popularny zwyczaj pytanie do aktualizacji — „Gdzie zniknęły moje pieniądze?”. Dlatego na ekran główny wynieśliśmy ostatnich operacji, natychmiast przychodzą z serwera. Po tym zabiegu wyświetlane są porcjami, aby nie zawalać na głowę użytkownika wszystkie informacje .

Tak jak u „” wiele różnych rodzajów niestandardowych rubli (bonusowe, i inne), w tapu na kwotę zrobiliśmy przejście do ekranu „Złotówki”. Tam prostym i zrozumiałym językiem wyjaśnia, z czego konkretnie złotówki „składają się”, a także co to jest i przedpłacona system rozliczeń. W nowej wersji aplikacji możemy znacznie zmieniły logikę tego menu. Wcześniej była tu informacje o bilansie (teraz ona odsunięta na ekran główny).

Teraz „Finanse” składają się z dwóch kart. „Płatność” i „Koszty”. Jak już wspomniano, według statystyk połączeń do call center „”, pytanie „Za co zostały zaliczone są moje pieniądze?” — jeden z najbardziej popularnych. Zmieniliśmy interfejs ekranu „Koszty” i podejście do wyboru okresu szczegółów.

Działa tu odbiór kodowania kolorów. Pojawił się wykres z segmentami, który pokazuje, na co poszły pieniądze. Więcej szczegółów można uzyskać pocztą. Jak było i jak było.

Dodawanie konta do aplikacji odbywa się poprzez WebView, i teraz zmienić to niemożliwe. Dla wygody użytkowników zrobiliśmy automatyczne wypełnienie kilku pól. Numer i kwota doładowania. Kwota jest obliczana na podstawie średniej kwoty, którą człowiek wnosi na konto).

W tym dziale znajdują się wszystkie warunki obsługi — wszystko, co jest podłączone u użytkownika. To tempo, mobilny internet i dodatkowe opcje. Tempo jest teraz wyświetlany w postaci karty, i to centralny element na ekranie, a opcje idą poniżej.

Kontekstowe oferty usunięto w tle. „Tempo i opcje” i katalog.

Możemy znacznie uprościć scenariusz połączenia opcji. Teraz można je włączać i wyłączać bezpośrednio w katalogu opcji, nie „spada” głęboko w aplikacji i nie czytając kilka tekstu. Po kliknięciu na konkretną opcję na dole wyskakuje alert z wyborem działania. Przejść na kartę opcje i zapoznać się z warunkami albo od razu ją podłączyć. Za rok, który minął od września 2015 roku, liczba wyświetleń taryf wzrosła o 97%, migracji według taryfy — na 210%, a liczba połączeń — 57%.

W aplikacji pojawił się czat, w którym użytkownik może określić odpowiedź na interesujące go pytanie. Mieliśmy zadanie nie przeciążać specjalistów pomocy technicznej, które odpowiadają na pytania poprzez czat i telefon, więc na górę widzieliśmy w sekcji często zadawane pytania.

W tym dziale informacje o specjalnych promocjach, biurach operatora, ustawienia i informacje o aplikacji. Do komunikacji firmy z klientem wdrożyliśmy system spersonalizowanych ofert i kontekstowych powiadomień. Tak, przycisk doładowania konta zwiększa się, jeśli kwota jest zbliżona do zera, a jeśli kończy się bateria internetu, przycisk jest wyświetlany bezpośrednio na nim.

W podobny sposób działa to na ekranie „Mój internet”. W dodatku teraz jest kontekstowe oferty. Są one funkcjonalne („Bilans zbliżony do zera, doładuj konto” lub ” dostęp do internetu dla swoich bliskich”) i reklamowe (gdy użytkownik oferują wypróbować nowy tempo lub opowiadają o jakiejś promocji).

Klikając na kontekst, człowiek przechodzi na celowe działanie. Zmieniło się i lokalizacja kontekstu. Kontekstowe oferty pomagają promować ARPU, do tego muszą być kierowane zgodnie z treścią i istotne w kontekście wykorzystania. Na ekranie równowagi z znaczeniem były problemy.

„sztywny” układ nie pozwalała nam ukryć obszar powiadomień, gdy nie było odpowiednich zaleceń. Eter strzelała niepotrzebnych informacji. W wyniku konteksty postrzegane reklamowych i przyczyniły się do „ślepoty banerowej”. Problem zdecydowaliśmy się na tym, że zmienił się układ zdań, zrobili różni się styl wizualny i zapewniły użytkownikom magiczną możliwość zamknięcia oferty promocyjne.

W aplikacji szyte wiele logiki, i dopóki nie uruchomi nowy middleware, który ostatecznie rozwiąże problem z prędkością pobierania, na pomoc przychodzą UI-tricks. Staliśmy się buforować dane z poprzedniej sesji po ponownym wejściu, i teraz użytkownik od razu widzi równowagę i akumulatory, a pozostałe elementy ekranu głównego są ładowane szeregowo.

Z powodu skomplikowanej logiki aplikacji długo, umieszczono i pominięty dane. Przyspieszyć pobieranie na oprogramowaniu nie mogliśmy. Do tego trzeba było by przerobienie middleware. Trzeba było jakoś rozwiązać problem lokalnie.

Jednym z rozwiązań było zamiast reklam i zdjęć powiel na żółte tło. Tak tworzy się wrażenie, że aplikacja jest prawie działa, tylko załadować dane. Nowa stylistyka aplikacji opiera się na kartach z głębokimi cieniami, które przy tworzą wrażenie warstw i pomagają dzielić główne i drugorzędne.

Wszystkie ilustracje w załączniku rysują od ręki. To ułatwia komunikację z użytkownikami i czyni ją bardziej przyjazną i prosty. Na przykład, na ekranie z błędem malowany kot, który wyrwał kabel z gniazdka i nie rozumie, co się dzieje. Z jednej strony, aplikacji — funkcjonalne narzędzie rozwiązywania niestandardowych zadań, ale w tym samym czasie to prezentacja operatora, który korzysta z marki i kolory podstawowe „”.

Jednakże nie odeszli od standardowych kolorów z . żółty zrobił się jaśniejszy i modę, a także używali inne kolory i odcienie. Aby wyróżnić się na każdym ekranie główne i drugorzędne, zastosowano kilka technik. Akcenty kolorystyczne, narzynki i karty.

Dodatkowo możemy wcześniej wymyślili zestaw kolorów do oznaczenia nowych opcji, które pojawią się w aplikacji. W razie potrzeby deweloperzy będą mogli od razu zacząć z nich korzystać.

Do aplikacji możemy wymyślić system ilustracje, które są rysowane ręcznie, aby wnieść w komunikacji człowieka ze złożonym produktem mobilnym żywotność i dynamikę, oddziaływać na użytkownika emocjonalnie. Czasami zdarza się, że dane nie przychodzą na czas, czy zdarzają się jakieś inne nieprzewidziane sytuacje. Pod każdy przypadek był jest renderowane własny zero screen, aby użytkownicy nie myśleli, że się w załączniku że coś się zepsuło.

Dla programistów wszystkie ekrany ładowania w Zeplin. Jest tam wygodny interfejs użytkownika ze stylami, gdzie można zobaczyć rozmiary i odległość wszystkich elementów.

W trakcie redesign było ponad 300 ekranów, przetestowano 10 scenariuszy i ponad 100 ikon. Jesteśmy globalnie uproszczone logiki, wyrwali użytkowników od nadmiaru informacyjnego szumu i zrobili projekt jest świeży i przyjazny.

Odnawiając „Mój Beeline”, staraliśmy się położyć w aplikacji „źródło aktualności” poprzez jasne i świeże, ale przy tym projektu. Dlatego świadomie gdzieś ignorowali i nie stosowano projektowanie rozwiązań na podstawie chwilowych trendów. Gdy zaczęliśmy projektować pierwszą wersję aplikacji, na rynku nie było bliskich odpowiedników, na które można byłoby się poruszać, i wiele rozwiązań musiał po omacku, metodą prób i błędów. Do doszliśmy, zdobyć doświadczenie, z jasnego zrozumienia biznesu klienta, i powoływać się na metryki i informacje zwrotne od użytkowników.

Miesięczna publiczność z systemem iOS w wersji „Mojego ” z września 2015 roku do września 2016 roku wzrosła o 76%. Poprawiły się prawie wszystkie wskaźniki rentowności produktu. Na 52% wzrosła liczba urządzeń, na 95% — miesięczna aktywna publiczność i na 129% — dniowa aktywna publiczność. Na 90% wzrosła liczba sesji, a wskaźnik w nowym użytkownikom wzrósł o 12%.

Aplikacja praktycznie całkowicie spełnia oczekiwania użytkownika, a jego funkcjonalność ma dla publiczności wartość. Nawet ci użytkownicy, którzy nie mogli się zalogować, starają się to robić jak najmniej jeszcze jeden raz. Aplikacja ma dobrą wydajność, która nadal rośnie.

Dodaj komentarz