Rossmann

Pulpit nawigacyjny dla klientów, którzy lubią zakupy online i offline.
image

Szczegóły

  • Zakres Rozwój systemów Android i iOS, rozwój backendu
  • Innowacja Motion Layout, biblioteka Glide, dwuetapowy mechanizm pamięci podręcznej, animacje oparte na działaniach użytkowników
  • Technologie Android: Kotlin, MVVM, RxJava, Retrofit, Dagger, Jetpack

    iOS: Obj-C, AFNetworking, Realm

    Backend: ASP.NET Core, MSSQL, Docker, Redis, MongoDB, TeamCity
  • Sektor biznesowy Sprzedaż detaliczna
  • Model współpracy Pracowaliśmy nad Dashboardem zgodnie z modelem stałej ceny, zarządzając własnymi zadaniami w ramach określonego zakresu
  • Zespół 2 x programiści iOS
    3 x programiści Android
    6 x programiści Backend
    2 x inżynierowie ds. zapewnienia jakości
    1 x kierownik projektu

Funkcjonalna, przyjemna, powszechnie używana aplikacja na iOS i Androida zapewniająca istotny wzrost zarówno w zakupach online, jak i offline.

Oś czasu

  • 2019
    Październik

    początek współpracy

    Listopad

    początek rozwoju

    Grudzień

    korekty w ostatniej chwili

  • 2020
    Styczeń

    testowanie i wydanie projektu

  • Najważniejsze informacje o projekcie

    Przydatna na co dzień aplikacja cyfrowa wspierająca klientów w wygodnych zakupach, niezależnie od tego, czy odwiedzają sklep offline czy online. To także funkcjonalne narzędzie do zarządzania dla pracowników Rossmanna, dające im możliwość personalizacji oferty pod konkretne potrzeby klientów.

    image
    image

    Potrzeby i cele biznesowe

    Firma potrzebowała nas po raz kolejny. Tym razem, wraz ze stworzeniem nowej aplikacji mobilnej Klubu Rossmann, pojawiła się potrzeba zbudowania nowej wersji ekranu głównego aplikacji (Dashboard) oraz zestawu dedykowanych kart.

    Celem było stworzenie atrakcyjnego wizualnie, łatwego i wygodnego w użyciu pulpitu nawigacyjnego aplikacji, umożliwiającego płynne przechodzenie między dwoma zastosowanymi trybami: W domu i W sklepie. Każdy tryb musiał mieć swój własny wygląd i nadawać priorytet różnym funkcjom.

    Dodatkowym zadaniem było spersonalizowanie widoku aplikacji w zależności od parametrów przypisanych do docelowego użytkownika. Widoki musiały być kompatybilne z systemami iOS i Android oraz dostępne dla wszystkich użytkowników – zalogowanych i niezalogowanych.

    Konieczne było również zaprojektowanie nowego modułu CMS, który umożliwiłby zarządzanie pulpitem nawigacyjnym i kartami zgodnie z wymaganiami biznesowymi.

    Funkcjonalność

    Główny ekran Dashboard wita użytkowników za każdym razem, gdy otwierają aplikację. Składa się on z kilku stałych elementów:

    • Edytowalne powitanie z parametrem @name

    • Przełączanie między trybami

    • Menu w dolnej części ekranu przekierowujące na stronę
      do głównego pulpitu nawigacyjnego, koszyka, listy zakupów, katalogu produktów
      i profilu.

    Wprowadzenie trybu In store to jedna z głównych zmian wwyglądzie i funkcjonalności nowej aplikacji
    . Dzięki niemu możemy korzystać z podstawowych funkcji podczas zakupów offline:

    • Aktualna lokalizacja sklepu lub adres sklepu, który został ręcznie skonfigurowany przez użytkownika jako ten, który go interesuje.

    • Wszystkie dostępne kupony.

    • Karta Rossmann z kodem kreskowym i dodatkowymi informacjami
      : liczba punktów zebranych w Klubie Rossmann oraz ewentualne informacje o zniżkach Rossnę!

    • Zalecane produkty.

    Nad treścią i kolejnością kart na dashboardzie czuwa dedykowany moduł CMS stworzony w technologii Angular w wersji 8. Umożliwia on szybki podgląd planogramu kart na cały miesiąc, ich płynne kopiowanie, edycję i usuwanie, a także dodawanie nowych, dostosowywanie grupy docelowej, osi czasu, grafik, szczegółów i podglądu.

    image

    Innowacja

    Dzięki wykorzystaniu strumieni mogliśmy zdecydować, która karta powinna zostać załadowana dodatkowymi danymi.

    Najpierw pobieramy listę tekstów dla kart za pomocą jednego żądania i są one wyświetlane. Karty zawierają wiele różnych danych: od grafiki po listę produktów. Inne żądania szczegółów są kolejkowane i sortowane w zależności od tego, które elementy listy są widoczne. Na koniec dane są dołączane do listy bieżącej karty. Dzięki temu lista jest płynna, pojawia się natychmiast, a użytkownicy zawsze widzą dane kart, na które aktualnie patrzą.

    Układ płytek adaptacyjnych z MotionLayout

    Produkty na karcie mogą być wyświetlane w wielu różnych układach na siatce 2:2 – każdy układ to osobna scena, a transformacja pomiędzy scenami uruchamiana jest w formie animacji. Pozwala to na płynną zmianę rozmieszczenia grafiki.

    Używanie biblioteki Glide do dostosowywania wszystkich obrazów – nawet te duże nie stanowią problemu.

    Na liście może znajdować się wiele kart, a ich grafika zazwyczaj zajmuje całą kartę. Dodatkowo grafika może być statycznym obrazkiem lub gifem. Muszą one być przechowywane w pamięci, aby uniknąć pobierania ich za każdym razem od nowa.

    Od czasu do czasu pojawia się też potrzeba miniatury lub alternatywnej grafiki. Tym, co odpowiada na wszystkie te potrzeby, jest biblioteka Glide
    – i wycisnęliśmy ją do ostatniej kropli!

    Aby zapewnić użytkownikowi natychmiastowy dostęp do danych, zastosowaliśmy dwuetapowy mechanizm pamięci podręcznej.

    Dane, które nie zmienią swojej wartości, np. grafika, są zapisywane w pamięci aplikacji tylko do odczytu. Jeśli grafika jest powtarzana, nie jest
    ponownie przetwarzana z Internetu, ale ładowana bezpośrednio z pamięci. Dane, które można zmienić, są trudniejsze do przechowywania.

    Rozwiązaniem jest buforowanie ich w pamięci RAM urządzenia. Użytkownik zawsze otrzymuje prawidłowe dane w ramach pojedynczej sesji
    z aplikacją. Po ponownym uruchomieniu dane są aktualizowane.

    Szybkość działania nie jest jedyną rzeczą wymaganą przez użytkowników – aplikacja powinna być również płynna.

    Zapewniliśmy obie te funkcje poprzez animację opartą na działaniach użytkownika. Zdecydowaliśmy się na animację przewijania listy. Dzięki dynamicznemu przesuwaniu się kart w odniesieniu do prędkości ruchu, użytkownik ma wrażenie, że kafelki unoszą się i odbijają od krawędzi, co daje naturalną reakcję wizualną. Zastosowanie fizyki było niezwykle ważne dla najbardziej naturalnego zachowania pływającego.

    image

    Wyzwania i rozwiązania

    Największym wyzwaniem było skoordynowanie naszych zadań z pracami rozwojowymi Rossmanna.

    Działaliśmy jednocześnie w dwóch różnych zespołach i musieliśmy to wszystko spiąć w dość krótkim czasie. Chociaż stworzyliśmy tylko niewielki fragment całej aplikacji mobilnej, był on silnie powiązany z procesem rozwoju
    Rossmann i w rezultacie trudny do wdrożenia. Mimo że dotyczyło to również backendu, było to znacznie łatwiejsze do wdrożenia dzięki zastosowanej architekturze mikroserwisów

    Zapewnienie jakości

    Proces zapewniania jakości składał się z testów manualnych:

    • Wydajność CMS na różnych przeglądarkach internetowych
    • Wydajność aplikacji mobilnych na urządzeniach z systemami iOS i Android

    Testy funkcjonalne opierały się na wytycznych dostarczonych przez klienta oraz informacjach uzyskanych podczas wywiadu z zespołem. Przeprowadziliśmy również testy eksploracyjne, retesty i testy regresyjne na różnych przeglądarkach internetowych i wersjach systemu urządzeń mobilnych. Testy akceptacyjne zostały wykonane przez klienta.

    Wynik

    Aplikacja ma ponad 10 milionów pobrań w Google Play i jest używana codziennie zarówno do zakupów offline, jak i online, czyniąc ten proces łatwiejszym i wygodniejszym. Działa bezbłędnie na urządzeniach z systemem Android i iOS, a dedykowany CMS umożliwia płynne zarządzanie pulpitem nawigacyjnym i kartami, ukierunkowane na potrzeby klienta i zgodne z wymaganiami firmy.