Akademia

e-commerce dla e-booków edukacyjnych

Rola: UX/UI designer
Typ: Projekt komercyjny
Narzędzia

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.

Problem: Stworzenie projektu sklepu internetowego, który będzie naturalnym przedłużeniem istniejącej marki.
Cel: Zaprojektowanie spójnej ścieżki od znalezienia e-booka do korzystania z zakupionych materiałów oraz odświeżenie warstwy UI.
Efekt: Pełna makieta w Figmie, gotowa do dalszych prac developerskich.

Punkt wyjścia

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 i decyzje projektowe

Typografię zachowałam spójną z główną stroną Studio Nauczania, aby sklep był rozpoznawalnym przedłużeniem marki. Open Sans pozostał krojem nagłówków, a Montserrat wykorzystałam w tekstach i elementach interfejsu.

Paletę uzupełniłam o brakujące odcienie, dopasowując je do różnych zastosowań w interfejsie: teł, tekstów i głównych akcji. Pozwoliło to zachować kolorystykę marki i dobrać zestawienia z uwzględnieniem wymagań kontrastu WCAG.

Od wyboru do zakupu

Karta produktu miała pomóc użytkownikowi ocenić, czy materiał odpowiada jego potrzebom. Uporządkowałam informacje o zawartości i przeznaczeniu, zachowując wyraźną cenę oraz akcję dodania do koszyka. Dalszą część zakupu oparłam na znanych wzorcach e-commerce, z czytelnym podsumowaniem zamówienia i kolejnymi krokami.

Dostęp po zakupie

Ścieżka użytkownika nie kończy się na płatności. Zaprojektowałam bibliotekę zakupionych e-booków i historię zamówień, aby materiały miały stałe, łatwe do odnalezienia miejsce. Widoki desktopowe i mobilne powstawały równolegle, z zachowaniem tych samych możliwości i hierarchii dopasowanej do wielkości ekranu.

Biblioteka zakupionych e-booków - desktop

Rezultat i wnioski

Zaprojektowałam kompletną ścieżkę zakupu e-booków - od przeglądania oferty i wyboru materiału po płatność oraz dostęp do zakupionych plików. Widoki desktop i mobile łączą charakter Studio Nauczania z uporządkowanym interfejsem sklepu.

Najważniejszym wyzwaniem było zachowanie rozpoznawalności marki przy dostosowaniu jej do potrzeb e-commerce. Spójność wizualna musiała iść w parze z czytelną ofertą, przewidywalnym zakupem i łatwym powrotem do materiałów.

Sklep jest dostępny online. Prezentowane w case study makiety pokazują mój projekt UX/UI, od którego wersja produkcyjna różni się w części rozwiązań.