Projektowanie Skupienia. UX bez Rozpraszaczy dla Notive

Klient: Notive, Cupertino, Stany Zjednoczone
Rola: UI, UX, Graphic Design
Zespół: Full-Stack Dev, Designer (ja)
Rok: 2021

Notive to launcher na Androida i aplikacja, której celem jest pomoc w unikaniu rozproszeń i utrzymaniu produktywności dzięki innowacyjnemu zarządzaniu powiadomieniami. Zaprojektowałem również design system dla projektu, w tym ikony i ilustracje. Udało mi się dotrzymać terminów, a nawet zakończyć prace przed deadlinem. Rezultaty zachwyciły klienta, który zapowiedział, że poleci mnie swoim znajomym z doliny krzemowej.

Projektowanie z siatką i precyzją

Projekt aplikacji był spójny dzięki 8px baseline grid. Ta siatka jest szczególnie pomocna w typografii, ponieważ jest dużo bardziej precyzyjna niż domyślny box tekstu. To również pierwszy ekran, jaki użytkownik widzi podczas onboardingu. Duże przyciski i duża typografia ułatwiają korzystanie z interfejsu i czynią go bardziej inkluzywnym dla osób z gorszym wzrokiem.

The onboarding screen with a baseline grid preview.
Multiple Notive icons from the original notive icon pakc placed in a grid.
Play circle icon placed inside material design icon grid.

Główny feed

Jednym z najtrudniejszych wyzwań było zaprojektowanie feedu powiadomień. Wszystkie powiadomienia powinny być czyste i minimalistyczne, ale jednocześnie wyświetlać wszystkie informacje rekomendowane przez Android developer guidelines. Musiałem też znaleźć sposób na dodanie afordancji „save” i „done”. Pozostałe feedy powiadomień również musiały być łatwo dostępne z głównego feedu. Po serii prób i błędów dotarłem do rozwiązania. Zmodyfikowałem powiadomienia tak, aby były rozwijalne, i dodałem interakcję „swipe”, aby pomieścić funkcje „save” i „done”.

Two mobile screens of the Notive notifications app welcome and dashboard, featuring a clean teal and white UI, illustration with category tags, clear headline “Notifications when you need them,” a large Get Started button, and an empty state screen indicating no new notifications with navigation tabs for main, saved, and history feeds
Two Notive app notification screens in a modern UI: left shows the Main tab with a list of important calls, transaction alerts, and playful avatars like Squirrel and Business Lizard; right shows the History tab with notifications from Android System, Instagram, weather, and missed calls, including icons and timestamps for each entry

Animowane ilustracje i interakcje

Abstrakcyjne animacje powstały, aby prowadzić użytkownika przez onboarding. Zrezygnowaliśmy z realistycznej animacji, ponieważ ustawienia mogą się różnić w zależności od urządzenia. Zamiast tego postawiliśmy na bardziej uniwersalne animacje. Projekt kładzie duży nacisk na barwne interakcje.

Two Notive onboarding screens with onboarding vector animations.