Marketables

Ogromna kolekcja zasobów projektowych przeznaczonych dla użytkowników SaaS.
image

Szczegóły

  • Zakres Projektowanie UX i UI, frontend, backend
  • Ramy czasowe Wrzesień 2019 – styczeń 2020
  • Innowacja Łączenie różnych wariantów produktów
    zaprojektowanych dla różnych platform końcowych
  • Technologie Frontend:
    React, React Router Dom, React l18next, React Date Range, Redux, Redux Form, Redux Thunk, Webpack, Babel, Husky, Lint

    Backend:
    ASP.NET Core, Identity Server, MassTransit + RabbitMQ, MinIO, AmazonS3, Kubernetes + Helm, PostgreSQL, SignalR
  • Sektor biznesowy eCommerce
  • Zespół iteo 1 x projektant UX
    2 x projektanci UI
    3 x programiści Backend
    3 x programiści Frontend
    2 x inżynierowie ds. zapewnienia jakości
    1 x kierownik projektu

Spełnienie wszystkich kluczowych wymagań UX wraz ze ścisłą wizją projektu klienta zaowocowało doskonałym, angażującym, lifestylowym rozwiązaniem, które jest oszałamiające dla oka i przyjemne w użyciu.

Oś czasu

  • 2019
    Wrzesień

    początek procesu pracy

    Październik

    wersja dla użytkowników beta

  • 2020
    Styczeń

    dostawa produktu

  • Najważniejsze wydarzenia w projekcie

    Stworzyliśmy wygodne, użyteczne i proste rozwiązanie do codziennych cyfrowych działań marketingowych – przestrzeń pełną zasobów projektowych, która jeszcze lepiej służy klientom naszego klienta i lepiej spełnia ich wymagania.

    image
    image

    Potrzeby i cele biznesowe

    Celem było stworzenie rynku stron docelowych. Jego główne funkcjonalności sprowadzały się do:

    • Dodawanie szablonów stron docelowych i powiązanych produktów, takich jak szablony mailingów, szablony wyskakujących okienek, banery, okładki itp. przez niezależnych twórców.
    • Wyświetlanie ofert zakupu utworzonych w systemie stron docelowych (wraz z całym systemem promowania, oceniania i rozliczania).
    • Zakup szablonów stron docelowych i powiązanych usług przez klientów zewnętrznych.

    Funkcjonalność

    Platforma Marketables umożliwia użytkownikowi

    • Skorzystaj z katalogu produktów z wyszukiwarką
      i filtrami, które ułatwiają znalezienie najlepszego rozwiązania
      i powiązanych produktów.

    • Zaloguj się i zarejestruj jako Klient/Twórca

    • Zarządzanie profilem

    • Przeglądaj dostępne produkty i twórców

    • Składanie zamówień

    • Wyświetl historię sprzedaży

    • Oceń zakupione produkty

    • Korzystanie z systemu komentarzy

    • Firebase, Lottie – animacje graficzne

    • Hero – animacje między widokami

    Dla klientów

    Klienci mogą przeglądać bibliotekę wysokiej jakości produktów cyfrowych przygotowanych w różnych stylach i przez różnych twórców, kompatybilnych z popularnymi narzędziami i aplikacjami. Mogą wybierać spośród wielu stron docelowych, szablonów mailingowych i popup, a także banerów, okładek i wielu innych.
    Po wybraniu idealnego produktu i formy licencji – standardowej lub wyłącznej – użytkownik może przejść do finalizacji zakupu. Wybór wyłącznej formy licencji oznacza, że klient staje się nowym właścicielem produktu, a co za tym idzie szablon zostaje usunięty z Marketables.

    Dla twórców

    Aby rozpocząć sprzedaż produktów za pośrednictwem Marketables, projektant musi utworzyć konto, wypełnić informacje o profilu, przesłać obrazy oferowanych szablonów i ustawić cenę. Cały proces zajmuje zaledwie kilka minut.

    image

    Projektowanie UX

    Klient zgłosił się do nas z określonymi wymaganiami i mapą drogową produktu (czyli zdefiniowanym MVP oraz potencjalnymi aktualizacjami i dodatkami). Mieli jasną wizję – chociaż główną funkcjonalnością platformy jest sprzedaż, chcieli stworzyć coś bardziej „lifestylowego” niż tylko kolejny marketplace. Coś bardziej angażującego dla klientów i po prostu łatwiejszego i lepszego dla artystów.

    Co również ważne, nasz klient sam pracuje jako „artysta”, więc dobrze znał potrzeby tego segmentu użytkowników. Dlatego zaprojektowaliśmy platformę, która umożliwia artystom nie tylko publikowanie swoich prac, ale także łączenie ich w pakiety, udostępnianie na różnych licencjach, zarządzanie kosztami produktów i otrzymywanie powiadomień, jeśli istnieje potrzeba dostosowania produktu do innej platformy. Dla klientów – pozwala im łatwo znaleźć zestawy pasujących produktów i nabyć dokładnie to, czego potrzebują.

    Projektowanie interfejsu użytkownika

    Styl ilustracji został wypracowany poprzez połączenie technologicznego charakteru strony z kolorystycznym kodem przypisanym do konkretnych produktów i typu użytkowników. Gradienty i przenikania tworzą futurystyczne prezentacje produktów. Zastosowane kolory są spokojne, ale eleganckie. Bardzo dobrze kontrastują z granatowym tłem, które powinno być przyjazne dla osób z wadami wzroku.

    W poszukiwaniu nowoczesnego, geometrycznego fontu natknęliśmy się na Nuito Sans. Po prostu zakochaliśmy się w jego prostocie i spójności. Wygląda świetnie zarówno jako mały tekst, jak i duży tytuł – dlatego zdecydowaliśmy się nie mieszać go z żadną inną czcionką.

    Wyzwania i rozwiązania

    Aby zapewnić wysoką dostępność aplikacji i jej sprawne działanie w przypadku wzmożonego i czasowo wzmożonego ruchu, w procesie wdrożenia wykorzystaliśmy orkiestrator Kubernetes.

    Aby zagwarantować najwyższą wydajność, zastosowaliśmy następujące podejście po stronie aplikacji:

    • Tworzenie zestawu znormalizowanych danych w celu uproszczenia i skrócenia czasu dostępu (readmodels)
    • Aplikacja wykorzystuje synchroniczną i asynchroniczną komunikację z szyną danych (RabbitMQ z wykorzystaniem biblioteki MassTransit po stronie aplikacji) pomiędzy swoimi modułami (mikroserwisami)
    image

    Innowacja

    Aplikacja w innowacyjny sposób umożliwia łączenie różnych wariantów produktów przeznaczonych dla różnych platform końcowych (w tym: Unbounce, Instapage czy Landingi).

    Celem jest dostarczenie informacji o wariancie spójnym z głównym produktem na inną platformę wraz z sugestią jego zakupu.
    Dodatkowo funkcjonalność pozwala na dostarczenie sprzedawcom informacji o ewentualnej potrzebie dostarczenia produktu na różne platformy – zgłaszanej bezpośrednio przez konsumentów.

    Aplikacja została zaimplementowana i wdrożona z jednoczesnym
    podziałem na mikroserwisy, co pozwoliło na:

    Problemy z API wymagały poszukiwania lepszego rozwiązania. Znaleźliśmy je rozwijając wersję 2 aplikacji.

    • Niezależna aktualizacja i implementacja modułów
    • Podział dużej bazy kodu źródłowego na logicznie spójne części, co umożliwia łatwiejszą pracę nad poszczególnymi modułami.
    • Zapewnienie wydajności, skalowalności i wysokiej dostępności aplikacji

    Proces wdrażania został w pełni zautomatyzowany przy użyciu
    Teamcity, GitLab Container Registry (Docker) i Kubernetes
    połączonych z Helm.

    Zapewnienie jakości

    Testy zostały przeprowadzone przez trzech testerów z zespołu Scrum. Ponieważ rozwiązanie zostało stworzone jako aplikacja webowa z
    wykorzystaniem mikroserwisów w backendzie, a frontend został zbudowany w technice RWD, testowanie zostało zastosowane na kilku różnych poziomach.

    Wymagania funkcjonalne zostały spisane w historyjkach użytkowników i zawierały kryteria satysfakcji jako podstawę do manualnego testowania logiki i procesów biznesowych. Weryfikując elementy graficzne, korzystaliśmy z widoków przygotowanych wcześniej przez projektantów – ich implementacja była testowana na różnych przeglądarkach i urządzeniach. Takie podejście pozwoliło na kompleksową ocenę warstwy wizualnej aplikacji. Dodatkowo zweryfikowaliśmy jej użyteczność jako pierwsi użytkownicy systemu.

    Dzięki ścisłej współpracy z klientem udało nam się wdrożyć kilka usprawnień zwiększających ergonomię aplikacji, dzięki czemu stała się ona bardziej przyjazna dla użytkownika.

    Elementem obarczonym największym ryzykiem była implementacja logiki związanej z relacjami i zakupem produktów. Wykorzystanie mikroserwisów zwiększyło również możliwość awarii. Dlatego testowanie tych elementów było kluczowe dla powodzenia projektu.

    Wszystkie procesy biznesowe zostały zaimplementowane w API, dlatego przeprowadziliśmy testy manualne oraz zautomatyzowaliśmy testy regresji.
    Proces relacji produktów został zweryfikowany w oparciu o testy eksploracyjne
    z wykorzystaniem modelu SBTM (session-based testing). Polegało to na
    przygotowaniu wykresów testów z różnymi kombinacjami danych wejściowych
    możliwych do przeprowadzenia w systemie.

    Zastosowaliśmy również testy bezpieczeństwa sprawdzające, czy system jest podatny na
    np. Cross-Site Request Forgery. Dzięki doświadczeniu naszych testerów,
    udało nam się zrealizować cały plan testów w zaplanowanym czasie i
    znacząco zmniejszyć ryzyko potencjalnych awarii.

    Opinia klienta

    Przygotowanie i wdrożenie nowej platformy sprzedażowej Marketables we współpracy z firmą iteo jako zaufanym doradcą i profesjonalnym usługodawcą przebiegało sprawnie i skutecznie. Najwyższa jakość deweloperska przekłada się na trwałość i bezpieczeństwo naszego serwisu.

    Wynik

    Rozwiązanie jest gotowe do podbicia rynku marketingu cyfrowego i dostarczenia użytkownikom prostych, ale użytecznych narzędzi. Klient był tak zadowolony z rezultatu, że nadal pracujemy razem nad innymi projektami.