Wszystkie projekty
CASE STUDY · 2023

Nowe metryki rozliczeniowe

Przebudowa modelu subskrypcji, limitów i billingu w całej aplikacji.

Rola
UX/UI Designer
Zakres
Research konkurencji, definiowanie flow i use case’ów oraz projektowanie UI
Zespół
Product Manager, Frontend, Backend
Narzędzia
Figma, Miro
Panel Billing — Cold Email subscription, limity, add-ony i wykorzystanie pakietu Contacted & Stored Prospects billing — nowe limity w app
Problem

Dotychczasowy model rozliczeń opierał się głównie na slotach mailowych, przez co koszt subskrypcji nie zawsze odzwierciedlał realną skalę działań użytkownika.

Celem projektu było wprowadzenie nowych metryk opartych na wykorzystaniu produktu: liczbie przechowywanych prospektów (Stored Prospects) oraz kontaktowanych prospektów (Contacted Prospects).

Proces

Iteracyjnie, razem z zespołem

01
Analiza

Zrozumienie kontekstu

Rozmowy z PM-em i supportem oraz analiza ograniczeń, research

02
Flow

Lo-fi flow

Projektowanie flow, struktury ekranów i głównych ścieżek użytkownika.

03
Kick-off

Wspólne omówienie flow

Weryfikacja zakresu, zależności i kierunku wdrożenia razem z zespołem

04
UI

Ekrany i komponenty

Projekt finalnych ekranów i komponentów.

05
Wdrożenie

Współpraca z zespołem developerskim

Odbiory wdrożenia, poprawki UI i uzupełnianie brakujących elementów.

Figma — board projektowy dla billingu, ekrany, ścieżki i komentarze figma / billing — working board
Główne założenia projektu

Kluczowe elementy flow

01 / Nowe metryki

Widoczność wykorzystania pakietu

Przed zmianą

Sloty były podstawą rozliczenia, ale ich wykorzystanie było widoczne w innym miejscu aplikacji. Użytkownik musiał łączyć informacje z kilku widoków, żeby zrozumieć, co ma w planie i ile już wykorzystał.

Obecny widok Email slots — model rozliczeń oparty na slotach Wykorzystanie / przed zmianą — poza sekcja billing

Po zmianie

Subscription pokazuje limity, usage i koszt w jednym miejscu. Dzięki temu użytkownik od razu widzi, co wpływa na jego subskrypcję.

Nowy widok billing z Limits, Add-ons i sekcją Usage z progress barami rozliczenia / po zmianie — limity, wykorzystanie i koszt
02 / Zakup i zmiana pakietu

Dostosowanie limitów do skali działań

Przed zmianą

Pricing opierał się głównie na slotach, a prawa część widoku była przeładowana dodatkowymi informacjami. Użytkownik widział dużo komunikatów i benefitów, ale trudniej było szybko zrozumieć, co realnie składa się na cenę.

Obecny widok Manage plan — sloty email/mobile i add-ony pricing / przed zmiana — oparty na slotach

Po zmianie

Konfiguracja pakietu została uproszczona pod nowe metryki. Użytkownik wybiera nowe limity, a prawa część pokazuje tylko kluczowe informacje potrzebne do płatności: wybrane limity, dodatki, podsumowanie i total.

Nowy checkout — Choose your subscription z contacted/stored prospects i summary pricing / po zmianie — nowe metryki
03 / Zmiana limitów

Upgrade i downgrade pakietu

Przed zmianą

Dodawanie slotów odbywało się w osobnym modalu, dostępnym z innego miejsca aplikacji niż Billing. Zmiana pakietu była więc oderwana od głównego kontekstu rozliczeń.

Add LinkedIn slots — dotychczasowy widok dodawania slotów modal / przed zmiana — dodawanie slotów

Po zmianie

Modal zmiany limitów był spójny z głównym modalem zakupu subskrypcji. Użytkownik zawsze widział podobny układ — konfigurację po lewej i podsumowanie płatności po prawej.

Add LinkedIn slots — nowy widok dodawania slotów z podsumowaniem płatności modal / po zmianie — upgrade/downgrade
04 / Onboarding po zmianie modelu

Wprowadzenie użytkowników w nowe limity

Część flow obejmował komunikację przed i po migracji. Przed zmianą użytkownik dostawał informację o nadchodzącym nowym modelu rozliczeń, a po migracji widział onboarding wyjaśniający nowe limity i miejsce, w którym może sprawdzić szczegóły subskrypcji.

Flow onboardingowe wyjaśniające zmianę modelu rozliczeń i nowe limity billing / onboarding
Macierz statusów konta i dostępnych akcji w zależności od roli i statusu subskrypcji — notyfikacje i maile billing / informacje o limitach/zmianach
05 / Status konta i dostępne akcje

Hierarchia komunikatów i priorytetów

Sekcja porządkowała, jakie informacje i akcje pokazujemy użytkownikowi w zależności od typu konta, statusu subskrypcji, limitów i płatności. Dzięki temu każdy scenariusz miał jasno określony komunikat, priorytet i dostępne działanie.

Macierz statusów konta i dostępnych akcji w zależności od roli i statusu subskrypcji billing / hierarchia komunikatów
Macierz statusów konta i dostępnych akcji w zależności od roli i statusu subskrypcji — ciąg dalszy billing / stany paragonu vs zużycie/typ konta
Kolejna iteracja

Kolejna iteracja

Iteracja 01 / Continuity Mode 2025

Automatyczne zwiększanie limitów po przekroczeniu pakietu

Po wdrożeniu nowych metryk pojawiła się potrzeba zabezpieczenia użytkowników przed zatrzymaniem kampanii po przekroczeniu limitów. Continuity Mode pozwalał automatycznie zwiększać limity Contacted Prospects i Stored Prospects w ramach ustalonego miesięcznego budżetu.

Odpowiadałem za przygotowanie pełnego flow, w tym:

  • pokazanie Continuity Mode w sekcji Subscription,
  • konfigurację maksymalnego miesięcznego budżetu,
  • automatyczne podbijanie limitów po przekroczeniu bazowego limitu Contacted Prospects,
  • uwzględnienie Continuity Mode w scenariuszach upgrade'u i downgrade'u.
Efekt

Funkcjonalność weszła do produkcji jako nowy model rozliczania produktu. Użytkownicy otrzymali czytelny sposób monitorowania wykorzystania pakietu, zarządzania limitami oraz dostosowywania subskrypcji do skali prowadzonych działań.

Następny projekt
Dodawanie kont LinkedIn
Zobacz