§ Case study  ·  Empik  ·  2021—2022

Empik to jedna z największych marek medialnych w Polsce. Byłam jedyną projektantką dwóch jego aplikacji — Empik Music i Empik Go — odpowiadając za pracę end-to-end, od badań po finalne UI.

Rola
Middle UX/UI Designer
Okres
2021—2022
Zakres
Redesign wieloplatformowy · Design system · Badania UX
Branża
Streaming i treści cyfrowe

§ 01   Kontekst

Co zastałam.

Empik Music to aplikacja do streamingu muzyki, a Empik Go służy do e-booków i audiobooków. Obie konkurowały o uwagę z dużo większymi globalnymi graczami.

Wyzwania: Design system od zera  ·  Dwa produkty, jedna projektantka  ·  Wieloplatformowo, łącznie z HarmonyOS

Od MVP do produktu, który konkuruje.

Kontekst

Empik Music było MVP — tylko podstawowe funkcje, bardziej szkielet niż gotowy produkt.

Cel

Uczynić go konkurencyjnym — nowoczesny design, intuicyjny UX, nowe funkcje i dopasowany landing page.

Rezultat

Przeprojektowana aplikacja oparta na nowoczesnych wzorcach, UX zweryfikowany badaniami i stylowy landing page.


Proces.

  1. 01 · Badania UX

    Badania napędzały redesign — nawet bez formalnego budżetu badawczego. W firmie wielkości Empiku testowałam z koleżankami i kolegami z innych zespołów: świeże, bezstronne spojrzenie osób, które nie znały produktu. Z prawdziwymi użytkownikami: testy A/B na produkcji, analiza recenzji w App Store i Play oraz ankiety e-mail.

    Metody badań UX — testy koncepcji, tree testing, card sorting, testy A/B — oraz mapa strony od rejestracji przez onboarding, paywall, ekran główny i bibliotekę
  2. 02 · Design system

    Nie było design systemu, więc go zbudowałam — kolory, typografia i biblioteka komponentów z każdym zdefiniowanym stanem. Powstał przed erą design tokenów, więc tworzyłam go i utrzymywałam ręcznie. Udokumentowany w Jirze i Google Docs, stał się jedynym źródłem prawdy, na którym pracował development.

    Design system Empik Music — kolory, fonty, komponenty i ich stany, przegląd ekranów, elementy list, paski nawigacji i walidacja pola e-mail
    Brandbook Empik Music — okładka, spis treści, projekt i konstrukcja logo, pole ochronne, zasady niewłaściwego użycia oraz głos i pozycjonowanie marki
  3. 03 · Redesign

    Przebudowałam interfejs iOS i Android od początku do końca, ekran po ekranie — a wersję HarmonyOS zaprojektowałam od zera, zgodnie z wytycznymi projektowymi i wymaganiami technicznymi Huawei. Po drodze trafiły nowe funkcje: premium paywall, udostępnianie fragmentów utworów do Instagram Stories i dedykowane ekrany Stories. Użytkownicy uznali aplikację za czystą, intuicyjną i nowoczesną.

    Przeprojektowane ekrany Empik Music — teksty, widok albumu, onboarding z wyborem artystów, premium paywall, gatunki i nastroje, odtwarzanie, konto, wyszukiwanie i odkrywanie
    Empik Music zaprojektowane na zegarki Huawei z HarmonyOS — logowanie, odtwarzanie, playlisty i ekrany odtwarzacza na okrągłych i owalnych tarczach
  4. 04 · Landing page

    Przeprojektowałam landing page wokół jednego zadania: skierowania odwiedzających do App Store i Google Play. Prostszy i spójny z marką, podniósł ten click-through o około 35%.

    Redesign landing page Empik Music — hero z ekranami aplikacji, wyróżnione funkcje, plany subskrypcji, baner podcastów i FAQ — podnoszący click-through o około 35%

Trafne ruchy, trwałe efekty.

Empik Go — e-booki i audiobooki, 1M+ pobrań — nie potrzebowało przebudowy. Potrzebowało skupionych zmian, które przetrwają. Lata później większość z nich wciąż jest w produkcie.

In-app · InAppStory

Ślepota banerowa była realnym problemem — użytkownicy ignorowali banery, więc nie było dobrego sposobu na pokazywanie nowych funkcji czy prowadzenie marketingu in-app. Znalazłam InAppStory, format w stylu Stories, i przekonałam do jego wdrożenia. Zadziałało.

Rozwiązało ślepotę banerową.

Empik Go InAppStory — format w stylu Stories w aplikacji, pokazany w feedzie klubu czytelników i jako pełnoekranowa historia
Kierunek wizualny

Nadałam aplikacji świeższy kierunek wizualny i zbudowałam wzorce, by stosować go spójnie — w tym nowy zestaw ilustracji. Same ilustracje nie były moje, ale podejście wizualne wokół nich — tak.

Wciąż szeroko stosowane.

Nowy kierunek wizualny Empik Go — zestaw ilustracji na ekranach onboardingu i funkcji
Redesign landing page

Przeprojektowałam landing page, eksplorując wiele wariantów przed finalnym wdrożeniem. W pierwszym miesiącu liczba subskrypcji kupionych przez tę stronę wzrosła o około 17%.

~17% więcej subskrypcji przez stronę w pierwszym miesiącu.

Redesign landing page Empik Go — hero, siatka funkcji, kategorie treści, plany subskrypcji, kroki onboardingu i recenzje

Dwie pasje, jedna subskrypcja.

Empik Music i Empik Go były sprzedawane osobno — dwie aplikacje, dwie subskrypcje. Połączenie ich w jeden plan mogło zwiększyć liczbę subskrypcji i sprawić, że ludzie korzystaliby z obu, a nie tylko z jednej. Przyjrzałam się, jak pakietują inne serwisy streamingowe, wzięłam to, co działa, i przedstawiłam zespołowi.

Następnie zaprojektowałam ekran połączonej subskrypcji — obie aplikacje w jednym planie, ułożone tak, by pakiet jawił się jako oczywisty wybór. Trafił na produkcję.

Pakiet Empik Music + Empik Go — ekran połączonej subskrypcji, gdzie dwie aplikacje stają się jednym planem

§ 05   Refleksja

Trzy rzeczy, które zabieram z Empiku:

  1. Żeby konkurować z większymi graczami, kreatywność trzeba pomnożyć przez analitykę — żadna z nich nie wygrywa sama.
  2. Badania nie zawsze potrzebują budżetu — czasem najlepszymi testerami ze świeżym spojrzeniem są koledzy dwa biurka dalej.
  3. Tam, gdzie nie ma systemu, potrafię go zbudować — i sprawić, że pracuje na nim cały zespół.

Następny case

Wcześniejsze projekty

Studia i freelance · pięć produktów · 2019—2020

Zobacz case study →