Akademia - e-commerce dla e-booków
- UX/UI Design
- E-commerce
- EduTech
Podsumowanie projektu
Wstęp
Akademia to sklep z e-bookami edukacyjnymi zaprojektowany jako subaplikacja strony Studio Nauczania Justyna Magiera. Projekt miał przenieść charakter marki do bardziej przejrzystego i nowoczesnego interfejsu, który lepiej odpowiada potrzebom sklepu internetowego.
Najważniejsze
Projekt w skrócie
Problem
Stworzenie projektu sklepu internetowego, który będzie naturalnym przedłużeniem istniejącej marki.
Cel
Zaprojektowanie pełnego flow sprzedaży e-booków oraz odświeżenie warstwy wizualnej.
Efekt
Pełna makieta w Figmie, gotowa do dalszych prac developerskich.
Kontekst
Studio Nauczania Justyna Magiera opiera komunikację na wsparciu i przygotowaniu uczniów z różnych grup wiekowych do egzaminów. Sklep miał być naturalnym przedłużeniem marki nastawionym na szybkie zrozumienie produktu i jego wartości.
Mimo że e-booki to produkty cyfrowe, użytkownik powinien wiedzieć, czego dotyczy materiał, co otrzyma po zakupie i gdzie później znajdzie swoje pliki. Dlatego projekt obejmuje nie tylko proces sprzedaży, ale też moment po zakupie.
Proces
Pracę zaczęłam od ułożenia pełnej ścieżki użytkownika. W ramach projektu powstały kluczowe dla e-commerce strony takie jak główna, listing produktów, karta produktu, koszyk, logowanie i rejestracja, dane do płatności, potwierdzenie zakupu oraz widok konta użytkownika.
Widoki powstały równolegle w wersji desktop i mobile, żeby cały serwis był responsywny, a makieta mogła być realną podstawą do wdrożenia.
Design
Design i decyzje projektowe
Spójność z marką
Sklep miał być naturalnym przedłużeniem Studio Nauczania, a nie osobnym produktem wizualnym. Zachowałam ciepłą paletę i edukacyjny charakter marki, ale uporządkowałam je w lżejszym interfejsie, który lepiej wspiera sprzedaż online.
Kolor i dostępność
Obecna paleta marki wymagała dopracowania pod kątem czytelności. Dodałam nowe odcienie koloru brandowego, żeby można było używać go w różnych kontekstach bez problemów z kontrastem i zasadami WCAG.
Czytelny flow zakupowy
Proces zakupu miał być prosty i przewidywalny. Dlatego oparłam go na znanych wzorcach e-commerce: listing produktów, karta e-booka, koszyk, checkout i potwierdzenie zakupu prowadzą użytkownika krok po kroku bez zbędnych rozproszeń.
Karta produktu jako źródło decyzji
E-book edukacyjny wymaga więcej kontekstu niż sam tytuł i cena. Karta produktu została zaprojektowana tak, żeby szybko wyjaśniała, czego dotyczy materiał, dla kogo jest przeznaczony i jaką wartość daje po zakupie.
Doświadczenie po zakupie
W przypadku produktu cyfrowego ścieżka nie kończy się na płatności. Zaprojektowałam widoki konta, zakupionych e-booków i historii zamówień, żeby użytkownik od razu wiedział, gdzie znaleźć swój materiał i jak może do niego wrócić.
Mobile jako pełny scenariusz
Widoki desktop i mobile powstawały równolegle, bo użytkownik może trafić do sklepu z różnych miejsc: strony głównej, wiadomości, social mediów albo linku. Mobilna wersja miała zachować pełny flow zakupowy, ale w prostszej, bardziej kompaktowej hierarchii.
Przygotowanie do wdrożenia
Plik Figma został uporządkowany z myślą o pracy developerskiej. Kolory zostały zmapowane na zmienne, które zostały podpięte bezpośrednio do projektu.
Dzięki temu makieta nie opiera się na rozproszonych, ręcznych wartościach, tylko na spójnym systemie kolorów i wartości.
Rezultat
Efektem jest kompletna makieta e-commerce zawierająca kluczowe widoki, komponenty i modale. Projekt porządkuje sprzedaż cyfrowych materiałów edukacyjnych, zachowując przy tym spokojny charakter marki.
Dalsze kroki
Kolejnym etapem projektu będzie development przygotowanej makiety przez programistę. Po wdrożeniu sklepu warto wrócić do projektu i sprawdzić metryki, między innymi jak użytkownicy przechodzą przez proces zakupu, gdzie pojawiają się ewentualne porzucenia oraz które elementy wspierają sprzedaż e-booków najlepiej.