Sobota, 28 stycznia 2023

Case Study: Przeprojektowanie Todoist na Androida

17 grudnia 2022

Todoist to aplikacja do tworzenia list rzeczy do zrobienia, na której 25 milionów ludzi polega każdego dnia, aby utrzymać swoje życie zorganizowane. Jako część celów zespołu projektowego Doist na rok 2021, chcieliśmy przeprojektować aplikację Todoist na Androida, aby wykorzystać najnowsze wytyczne Google Material Design.

W tym poście opisujemy decyzje projektowe i procesy stojące za przeprojektowaniem aplikacji Todoist na Androida do Material Design. Poznajemy praktyki współpracy zespołu projektowego i zespołu Androida, które doprowadziły do powstania aktualizacji aplikacji, co zaowocowało zdobyciem nagrody Material Design Award 2021 w kategorii dużych ekranów. Zaczynajmy!

Okazja

Kiedy rozpoczęliśmy projekt, nasza implementacja projektu na Androida była gotowa do gruntownego remontu. Ostatnie milowe przeprojektowanie na Androida zostało zainicjowane po wydaniu pierwszych wytycznych Material Design w 2016 roku. Od tego czasu zespół z powodzeniem pracował nad ciągłymi ulepszeniami aplikacji na Androida, ale widzieliśmy możliwość ulepszenia Todoist na Androida na bardziej holistycznym poziomie.

Wyruszyliśmy, aby oczyścić instancje starszych komponentów UI, kolorów i stylów tekstu i zaktualizować je o najnowsze komponenty Material Design. Zauważyliśmy, że niektóre interakcje i wzorce nawigacyjne stały się niespójne z tym, czego użytkownicy oczekiwali na nowszych urządzeniach z systemem Android i byliśmy chętni do zmodernizowania tego doświadczenia. Mając na uwadze zmiany w sprzęcie i oprogramowaniu, postanowiliśmy sprawić, że doświadczenia na większych telefonach i tabletach będą jeszcze lepsze, aby Todoist mógł w pełni wykorzystać możliwości urządzeń najnowszej generacji. Material 2 i 3 dostarczyły niesamowitych nowych ram do przemyślenia obecnego doświadczenia aplikacji. Mając to na uwadze, postanowiliśmy rzucić wyzwanie temu, jak powinna wyglądać nowoczesna aplikacja na Androida i wprowadzić innowacje do domyślnego doświadczenia użytkownika.

Rozwiązanie

Zespół postawił sobie za cel przeprojektowanie naszej aplikacji Todoist na Androida i dążenie do uczynienia jej najlepiej zaprojektowaną aplikacją produktywną na Androida. Projekt był ambitny, a jego ukończenie miało zająć kilka miesięcy. Podczas pracy nad projektem wyznaczyliśmy sobie następujące cele:

  • Przejrzyj obecną implementację i starsze specyfikacje projektowe.
  • Przestudiować najnowsze wytyczne Material Design i ocenić, co jest istotne dla naszego projektu.
  • Zbadaj świetne aplikacje Material Design oraz studia przypadków i ucz się na podstawie ich realizacji.
  • Zdefiniuj nowy język projektowania aplikacji Todoist na Androida i udokumentuj zmiany.
  • Projekt i rozwój pracują razem, aby ocenić proponowane rozwiązanie i implementację.
  • Przetestuj wewnętrznie wczesną wersję nowej aplikacji, aby zebrać opinie i wprowadzić poprawki.
  • Zaproś beta testerów do nowej aplikacji, aby zebrać opinie i wprowadzić poprawki.
  • Dopracowanie aplikacji i rozwiązanie najważniejszych problemów przed jej upublicznieniem.

Przegląd

Projekt został rozpoczęty od przeglądu obecnej aplikacji Todoist na Androida, notując, które obszary wymagają naprawy, a które są aktualne. Podczas przeglądu zrobiliśmy zrzuty ekranu z implementacji aplikacji w celu odniesienia się do niej. W ten sposób mogliśmy łatwo zobaczyć obecny stan aplikacji i porównać go z nowymi propozycjami projektowymi, które miały zostać stworzone. Po zakończeniu procesu przeglądu, mieliśmy kompleksowy przegląd aktualnego stanu aplikacji oraz zmian w układzie, komponentach i stylizacji, które chcieliśmy wprowadzić.

Studiuj

Kontynuowaliśmy projekt, studiując najnowsze wytyczne Material Design, oceniając komponenty i praktyki, które były najbardziej istotne dla Todoist.

Kiedy projekt rozpoczął się w lutym 2021 roku, Material 2 był najnowszą wersją ich systemu projektowania. Ponieważ Material 2 był już wydany od dłuższego czasu, przewidywaliśmy, że zmiany projektowe w Material zostaną ogłoszone wkrótce na imprezie Google I/O w maju 2021 roku. Zamiast czekać, ponieważ spodziewaliśmy się, że zmiany będą iteracyjne, popchnęliśmy do przodu naszą pracę.

Zidentyfikowaliśmy 25 komponentów i wzorców UI, które chcieliśmy zmienić w całej aplikacji. Zmiany obejmowały przyciski, formularze, menu, arkusze, szufladę nawigacyjną, pasek aplikacji, paski systemowe, style tekstu i kolorów oraz wiele innych. Zaczęliśmy od stworzenia widoku tabeli w dokumencie Dropbox Paper ze zmianami komponentów i odnośnikami do wytycznych Google'a dotyczących Material Design.

Ta lista komponentów była punktem wyjścia do dyskusji, aby zaplanować zakres i złożoność zmian. Bliskie dyskusje asynchroniczne między zespołem projektowym i deweloperskim w Twist i komentarzach Dropbox Paper pomogły nam wcześnie podjąć decyzje dotyczące zakresu i złożoności oraz ustanowić solidne podstawy projektu.

Badania

W początkowym studium Material Design badaliśmy również inspirujące aplikacje Material Design, studia Material, aplikacje Play Store i aplikacje Google Workspace, aby uczyć się na podstawie ich realizacji.

Zaczęliśmy od przestudiowania Material Design Award Winners 2020 i przetestowania produktów, które zostały zaprezentowane. Pokazani zwycięzcy uderzyli w dobrą równowagę między wdrażaniem wytycznych Material Design przy jednoczesnym zachowaniu marki własnego produktu w ramach systemu. Ta równowaga pomiędzy wytycznymi Google a marką Todoist była również kluczowa dla nas, dlatego staraliśmy się znaleźć tę mieszankę w pracach, które tworzyliśmy i wdrażaliśmy w projekcie.

Wraz ze zwycięzcami MDA, badaliśmy Material Studies, które Google stworzyło, aby pokazać, jak mogą wyglądać aplikacje z zastosowanym brandingiem i wytycznymi Material Design. Było to świetne odniesienie do tego, jak dalece komponenty mogą być dostosowane przy zachowaniu podstawowych zasad platformy. Szczególnie studium przypadku Reply dało nam cenny wgląd, ponieważ typ zawartości i układ aplikacji był najbardziej zbliżony do Todoist. Pokazało, jak takie komponenty jak pasek aplikacji, szuflada nawigacyjna i układy na dużym ekranie działają, gdy są dostosowywane.

Kontynuowaliśmy nasze badania przeszukując sklep Google Play w poszukiwaniu inspirujących przykładów aplikacji. Google Tasks, Press, Periodic Table i Kayak wyróżniały się poziomem dopracowania i jakością aplikacji, która odpowiadała doświadczeniu, które chcieliśmy stworzyć.

W późniejszym etapie projektu, kiedy Material You został wydany (więcej o tym później), natknęliśmy się na wpis na blogu Google Workspace Apps, który zapowiadał zmiany w Material 3, jakie Google wprowadzało do swoich własnych produktów. Był to świetny rzut oka na to, co miało nadejść przed oficjalnym wydaniem wytycznych dotyczących projektowania Material 3. Ten post wywołał nowe wewnętrzne dyskusje i dalsze poszukiwania projektowe, które rozważaliśmy przy przyszłych aktualizacjach Todoist na Androida.

Specyfikacja projektu

Kiedy zaczęliśmy definiować nowy język projektowania aplikacji Todoist Android i dokumentować zmiany, zdecydowaliśmy się stworzyć ramy projektowe, skupiając się na tworzeniu komponentów, a nie projektowaniu każdego ekranu w aplikacji. Pozwoliło nam to na konsekwentne stosowanie systemu projektowania w aplikacji. Zrobiliśmy to, korzystając z wcześniej zdefiniowanej listy komponentów, którą stworzyliśmy podczas procesu przeglądu i badania.

Główne ekrany z różnych obszarów aplikacji zostały wybrane, aby zademonstrować, jak można zastosować poszczególne komponenty. Wybraliśmy między innymi widok projektu Todoist, menu szuflady nawigacyjnej, ekran edycji widoku projektu, ustawienia oraz widok szczegółów projektu. Te ekrany dały nam dobry przegląd tego, jak przyciski, formularze, szuflady, listy i inne komponenty będą działać razem i w różnych stanach; wybrane, wciśnięte, wyłączone, itp.

W trakcie projektu przechodziliśmy z naszego systemu projektowania Doist na Figmę i zaczęliśmy tworzyć nasze pierwsze komponenty w nowej bibliotece Doist Product Android Library. Zaczęliśmy od użycia niektórych komponentów z zestawu Material Design UI - biblioteki Components z oficjalnego pliku zasobów Google Figma i dodaliśmy je do naszego systemu projektowego Doist. Następnie kontynuowaliśmy budowanie pliku Product Android Library z naszymi komponentami specyficznymi dla Todoist, takimi jak widoki listy zadań i tablicy, widoki szczegółów, arkusze, kolory, typografia, itp.

Kontynuowaliśmy dokumentowanie zmian kolorów i typografii, które były oparte na wytycznych Material Design. Zespół projektowy zdecydował się wdrożyć nowy framework Design Token, który dzieliłby te same wartości pomiędzy naszym systemem projektowym a implementacją deweloperską. Zespół deweloperski wyprowadziłby wartości, które miał w obecnej implementacji, a zespół projektowy przeanalizowałby, które wartości są potrzebne, a które można połączyć, zmienić lub usunąć. W ten sposób powstał nowy system kolorów i typografii Design Token, który następnie udokumentowaliśmy i omówiliśmy z zespołem w celu wdrożenia. W dalszej części projektu z przyjemnością zobaczyliśmy podobny system tokenów wprowadzony przez Material 3 w najnowszych wytycznych, co potwierdziło nasz sposób myślenia i zasady stojące za nowym systemem projektowania.

Dokumentacja projektowa została rozszerzona o inne makiety przypadków brzegowych, które mogły być umieszczone obok systemu projektowego. Udokumentowaliśmy różne doświadczenia związane z responsywnymi ekranami telefonów i tabletów w porównaniu z poprzednią implementacją. Dodatkowe sekcje zostały stworzone w celu udokumentowania ruchu, który powinien być użyty dla określonych komponentów i ekranów poprzez odniesienie do istniejących przykładów wytycznych Material Design lub prototypowanie własnego ruchu w Principle i After Effects. Specyfikacja projektu poruszyła również kwestię haptycznych informacji zwrotnych, które powinny pojawiać się na ekranach dotykowych, sposobu działania trybu ciemnego w nowych komponentach, dokumentowania tematów Todoist w nowym języku projektowania i wiele innych.

Implementacja projektu

W Doist, korzyścią płynącą z pracy w zespole jest to, że współpraca między zespołami jest wbudowana w skład zespołu. Projektanci, programiści, wsparcie techniczne i menedżerowie produktu pracują razem w zespole, aby zrealizować projekt. Ta bliska współpraca od samego początku jest kluczem do wypełnienia luki pomiędzy zakresem, szacunkami, projektowaniem, rozwojem i dostawą. Zespół codziennie omawiał swoje ustalenia i wspólnie wymyślał najlepszy plan działania.

Projektanci zaczęli od tworzenia komponentów w Figmie i udostępniali je deweloperom w Dropbox Paper. Użyliśmy zrzutów ekranu, aby udokumentować obecne wdrożenie obok nowych projektów i połączyć je z domyślnymi komponentami Google Material Design. Dzięki temu zespół mógł porównać wszystkie referencje w jednym miejscu. Deweloperzy dzielili się swoimi uwagami, a poprawki były wprowadzane podczas burzy mózgów, gdy projekty były iterowane.

Projektanci w ramach projektu co tydzień dzielili się swoją pracą w toku z resztą zespołu projektowego w wątku Twist poświęconym przeglądowi projektu. Tutaj omawiano szczegóły projektów, wyśmiewano alternatywne rozwiązania i tworzono plany na większą skalę. Podczas przeglądów projektów poruszane były takie tematy jak umieszczenie FAB (Floating Action Button), opcje motywów, użycie kolorów akcentujących na komponentach, spójność z innymi platformami, opcje nawigacyjne oraz elewacja cieni. Po dokładnych dyskusjach i przedstawieniu alternatywnych makiet, zespół projektowy dążył do znalezienia właściwej równowagi pomiędzy Material Design a wytycznymi marki Todoist. Zespół deweloperski, również będący częścią przeglądów projektowych, przekazał swoje opinie na temat rozwiązania i wcześnie podniósł kwestię technicznych zawiłości.

Ostatecznie, projekt został ustabilizowany i uaktualniony o spójność pomiędzy komponentami i makietami. Specyfikacja projektu była aktualizowana na bieżąco, aby zespół programistów mógł zawsze przeglądać najnowsze projekty w Figmie.

Testowanie

Gdy tylko rozpoczął się proces rozwoju, zespół Androida udostępnił wczesne zrzuty ekranu i filmy w wątkach Twist, podczas gdy wdrażał specyfikację projektową. Ta praktyka pozwoliła nam na wczesne i częste przeglądanie implementacji aplikacji. Projektanci mogli przeglądać prace rozwojowe i dzielić się opiniami w Twist, co zaowocowało uzyskaniem wysokiej jakości implementacji. Równolegle do dyskusji w Twist, zespół założył projekt Todoist, aby śledzić bieżące problemy i naprawiać błędy. Projektanci rejestrowali nowe problemy, deweloperzy rozwiązywali je i udostępniali nową implementację do wglądu projektantom.

Kiedy zespół miał pierwszą stabilną wersję aplikacji na Androida, podzieliliśmy się nią wewnętrznie w Doist, aby uzyskać więcej informacji i opinii. Inni Doist mogli uzyskać dostęp do przeprojektowania poprzez flagę funkcji, którą można było włączyć w ustawieniach aplikacji i testować nową wersję przez dowolnie długi czas. System flag funkcji pozwolił ludziom na wczesne przekazanie nam informacji zwrotnej na temat podjętych przez nas decyzji projektowych i zgłaszanie błędów. Opinie były przekazywane przez szerszy zespół za pośrednictwem dedykowanego wątku Twist, a projektanci i deweloperzy mogli dyskutować, jak najlepiej odnieść się do opinii podczas aktywnej realizacji projektu.

Po dopracowaniu implementacji aplikacji i uwzględnieniu wczesnych uwag, otworzyliśmy aktualizację aplikacji dla naszych użytkowników w wersji beta. Tutaj użytkownicy mieli dostęp do nowego projektu Androida i mogli przekazać nam informacje zwrotne. Nasz zespół wsparcia zebrał opinie i podzielił się nimi z nami w dedykowanym wątku Twist. Zespół miał na celu przeanalizowanie każdego komentarza i szukał wzorców, w których moglibyśmy wprowadzić poprawki i ulepszenia do doświadczenia użytkownika.

W ramach tych poprawek wprowadziliśmy zmiany w sposobie działania dolnego paska i szuflady nawigacyjnej. Niektórzy użytkownicy zgłaszali frustracje związane ze sposobem działania nowej dolnej nawigacji i szuflady menu. W pierwszym wdrożeniu szuflada była do połowy podniesiona po otwarciu i trzeba było przeciągnąć palcem w górę, aby ponownie ją podnieść, aby zobaczyć pełną listę zawartości. Stanowiło to problem dla niektórych użytkowników, ponieważ dotarcie do treści poniżej listy było wolniejsze. Zdecydowaliśmy więc, że szuflada będzie domyślnie całkowicie podnoszona przy otwieraniu. Ułatwiliśmy również otwieranie szuflady nawigacyjnej poprzez przesunięcie w górę z dolnego paska aplikacji. To był mały skrót, ale pozwolił użytkownikom szybciej dotrzeć do treści.

Material You

Kiedy byliśmy w fazie testów i mieliśmy zamiar zakończyć projekt, Google zaprezentowało Material You, a jakiś czas później opublikowano Wytyczne Material 3. Z nowo ogłoszonymi zasobami, wróciliśmy do studiowania najnowszych wytycznych i odniesień, które mogliśmy znaleźć, aby zobaczyć, gdzie przeprojektowanie aplikacji Todoist na Androida pasuje i jakie poprawki możemy potrzebować teraz lub w przyszłości.

Dynamic Color był dużą nową funkcją, która została ogłoszona jako część aktualizacji Material You. Ponieważ Todoist obsługuje wiele różnych motywów, funkcja Dynamicznych kolorów Material You wydawała się dobrze dopasowana do naszego produktu. Postanowiliśmy nadać tej funkcji priorytet i zaimplementować Dynamiczny Kolor w jasnych i ciemnych motywach jako część opcji ustawień motywu Todoist.

Aby wdrożyć Dynamic Color, zespół programistów rozpoczął od stworzenia prototypu demonstracyjnego, który wykorzystywał system Dynamic Color i pokazywał, jak możemy wybierać z gamy kolorów, które system definiował na podstawie wyboru tapety. Od tego momentu próbowaliśmy włączyć zachowanie systemu do naszych makiet projektowych. Zaprojektowaliśmy szereg różnych makiet kolorów i komponentów, aby zobaczyć, które z nich mogą pasować do poszczególnych komponentów. Następnie wymyśliliśmy system kolorów, który działa dla aplikacji Todoist i nowych motywów. Te nowe motywy Dynamic Color byłyby umieszczone obok naszych obecnych opcji motywów w ustawieniach aplikacji Todoist. Stąd użytkownicy mogliby wybierać pomiędzy motywami Dynamic Color Light i Dark.

Wraz z Dynamic Color, zespół stworzył również konfigurowalny dolny pasek aplikacji, pozwalając użytkownikom na ustawienie aplikacji w sposób, który jest najwygodniejszy dla ich przepływu pracy. Położenie przycisku dynamicznego dodawania można zmienić na środek, lewy lub prawy róg ekranu. Kolejność przycisków menu, wyszukiwania i powiadomień można zmienić, aby jak najlepiej dopasować je do ergonomii dominującej (lewej lub prawej) ręki użytkownika i zoptymalizować jego schemat nawigacji.

Uruchomienie

Po uwzględnieniu krytycznych uwag z wersji beta i wprowadzeniu poprawek stabilności, zespół był gotowy do wypuszczenia nowej aplikacji Todoist na Androida. Zespół zarejestrował problemy, które nie mogły być natychmiast rozwiązane, do wykorzystania w przyszłych przeglądach i aktualizacjach.

Zespół projektowy i marketingowy przygotował się do premiery tworząc baner Co nowego oraz kopię, które są wyświetlane w aplikacji podczas uruchamiania aktualizacji. Zespół marketingowy Doist stworzył również notatki dotyczące wydania i udostępnił ogłoszenia o aktualizacji aplikacji na naszych kanałach społecznościowych. Zespół projektowy marki i produktu pracował wspólnie nad stworzeniem niestandardowych zasobów graficznych i kopii, które podsumowywały pracę nad projektem w prosty i piękny sposób.

Co dalej: Materiał 3

Po udanym uruchomieniu przeprojektowanej aplikacji Todoist na Androida, Google skontaktował się z Doist, aby ogłosić, że Todoist został wybrany jako zwycięzca Material Design Award 2021 w kategorii dużych ekranów. Zespół był podekscytowany, że został doceniony za swoją ciężką pracę i czuł, że osiągnęliśmy cel, który sobie założyliśmy.

Wewnętrznie projektanci i deweloperzy kontynuowali badania i dyskusje na temat aktualizacji Material 3. Zespół projektowy zaczął badać makiety i zmiany w projekcie inspirowane przez Material 3 i aktualizacje aplikacji Workspace Google. Niektóre z naszych obecnych eksploracji Todoist obejmują zmianę stylizacji FAB, aktualizację paska aplikacji, dalsze usuwanie cieni elewacji i wiele innych. Oto podgląd tego, jak może wyglądać przyszła aktualizacja Todoist.

Mamy nadzieję, że te spostrzeżenia dotyczące procesu projektowania Doist i praktyk współpracy wzbudziły Twoje zainteresowanie. Dziękujemy za przeczytanie i czekamy na przyszłe aktualizacje projektu!

Wnioski

  • Przestudiuj wytyczne Material, zwycięzców Material Design, studia Material i aplikacje Google Workspace, aby podjąć świadome decyzje projektowe podczas projektowania następnego produktu lub aktualizacji aplikacji.
  • Oceniaj, które elementy i praktyki Material Design są dla Ciebie odpowiednie i wdrażaj je do swojego produktu.
  • Starannie zrównoważyć wytyczne dotyczące Material Design z wytycznymi dotyczącymi Twojej marki, aby stworzyć unikalne i spójne doświadczenie między Twoim produktem a platformą, na której żyje.
  • Wcześnie i często współpracuj z programistami Androida, aby sprawnie wysyłać aktualizacje aplikacji i zwiększać jakość implementacji projektu.
  • Używaj komponentów projektowych i buduj system projektowy wraz z praktycznymi makietami, aby stworzyć wydajną specyfikację projektową.
  • Zastanów się, jak najnowsze funkcje Androida pasują do Twojego produktu i które mają największy wpływ na Twoich użytkowników, zanim zdecydujesz się je wdrożyć.
  • Przetestuj i przejrzyj kompilacje z wewnętrznym zespołem i zewnętrznymi użytkownikami wersji beta, aby uzyskać cenne opinie i wprowadzić poprawki przed wypuszczeniem ich do publicznej wiadomości.
  • Twórz grafiki zapowiedzi, aby zaprezentować najnowszą aplikację lub aktualizację funkcji wraz z przejrzystym opisem, który można udostępnić w aplikacji i na mediach społecznościowych.