[ation] center - training platform design for manufacturers
A voice-controlled app concept that helps you create language habits and overcome resistance to speaking
Nowa Taraz Matura is an ecosystem of educational materials that includes physical Vademecum and Collection of Matura Assignments, as well as digital educational tools. In order for the user to understand the value and how the ecosystem works, we have developed a sales and marketing funnel. This allowed us to determine precisely what, when and how to communicate to the user at each stage of his scientific path.
The concept of a voice interface connecting chat with a conversation transcript
We have designed a path to purchase training and masterclass courses. Convenient and fast purchasing process has been tailored to both individual and corporate customers.
Audyt ekspercki UX
Budowa architektury informacji
UX & UI
Analityka produktowa
Design System
Wsparcie przy wdrożeniu
Context of the project
Firma zwróciła się do nas z zadaniem przeprojektowania sklepu internetowego, zbudowanego na platformie IdoSell. GrainGold to sklep sprzedający głównie łóżka. Założyliśmy, że wybór łóżka na stronie internetowej, to wymagające wyzwanie dla kupującego. Łóżko łączy funkcje komfortu, stylu i zdrowia, jest też kluczowym elementem wizualnym sypialni, który wpływa także na jakość snu. Po analizie sklepu internetowego i ścieżek użytkownika zauważyliśmy, że potrzebne jest więc uproszczenie procesu zakupowego, klarowna prezentacja produktów, jasność zasad dostawy i płatności oraz dostosowanie sklepu w wersji mobilnej, by wspierać konwersję w tym kanale.
Winter has successfully designed a new design for our site that both improves and simplifies the UX of our platform.
Zima UX, UI & Design Strategy pracowała szybko i terminowo. Zespół spotykał się z nami wirtualnie.
For whom?
Recognize users of language learning applications, their habits and expectations. Who is our persona? Who most often learns the language on the phone?
- analizę i poprawę procesu zakupowego;
- uspójnienie struktury informacji;dobry UX strony mobilnej;
- ograniczenia wdrożeniowe platformy oraz jak można je ominąć.
Co zostało wypracowane
Architektura informacji i nowa nawigacja (w szczególności wersja mobile), która pozwala łatwiej poruszać się po sklepie i szukać wymarzonych mebli.
Nowy wygląd sklepu - design został odświeżony, unowocześniony, ale utrzymany w oparciu o istniejącą tożsamość marki. Zbudowaliśmy też nowy i kompletny Design System.
Ułatwienie ścieżki zakupowej klienta: od wyszukiwania produktu, po jego podgląd i proces zakupu.
Design process
The design was divided into phases:
Audyt objął nawigację sklepu, ze szczególnym uwzględnieniem nawigacji mobile, ścieżki poznawania produktów przez klienta (karta produktu), proces wyszukiwania produktu i jego zakupu. Jednocześnie zwróciliśmy uwagę na potrzeby naszego klienta w kontekście SEO, wspierając w budowaniu podstron tematycznych i struktury copy.
Innovation in everyday language learning is necessary
The younger generations are bluntly saying that the traditional method of teaching a language by reading and repeating does not work for them. They need more engaging experiences and a hands-on view of learning. Therefore, when designing the interface in Ailoom, we decided to eliminate unnecessary elements and focus on the conversation itself.
Zmiany w katalogu produktu
Pierwszym krokiem było przeprojektowanie architektury informacji oraz uspójnienie nawigacji.
Katalog sklepu GrainGold był bardzo obszerny i wymagał takiego przemyślenia struktury, aby użytkownik mógł łatwo odnaleźć szukany przedmiot. W wersji desktopowej skupiliśmy się na tym, by podział na sekcje tematyczne był dobrze oddany w warstwie graficznej i ułatwiał szybkie odnalezienie poszukiwanej kategorii. W wersji mobilnej postawiliśmy jednak na uproszczony, kompaktowy katalog.
Dedykowana nawigacja dla wersji mobilnej
Projekt UX zakładał uproszczenie górnego paska, tzw. headera i zmianę wyświetlania nawigacji. W ten sposób uzyskaliśmy na ekranie więcej miejsca na prezentację produktu.
Zmiany kosmetyczne, które wprowadziliśmy w górnej części ekranu: (zmniejszenie logo, uproszczenie headera), dału użytkownikowi większą przestrzeń na wyświetlanie produktów.
Biorąc pod uwagę potrzeby użytkowników i schemat ich poruszania się na stronie, wypracowaliśmy koncept dolnego menu na mobile, zawierający skróty do najbardziej pożądanych funkcji sklepu:
- katalogu produktów
- koszyka
- ulubionych produktów
- konta użytkownika
Zmiany na karcie produktu
Szukając idealnej drogi do prezentacji produktu wzięliśmy pod uwagę, że głównym źródłem zysku GrainGold jest sprzedaż łóżek i narożników, jednak oferta sklepu zawiera także tzw. meble twarde czyli np. szafy czy stoliki. Dlatego UX strony mobilnej musiał stanowić uniwersalne podejście do prezentacji asortymentu sklepu.
W projektowaniu widoku karty produktu musieliśmy brać pod uwagę takie wyzwania:
- mała przestrzeń ekranu na mobile
- mnogość detali dotyczących każdego produktu
- różne opcje konfiguracji produktów w zależności od typu mebla oraz ilości wariantów
- łatwość dodawania do koszyka
- transparentne pokazywanie cen produktów
Konfiguracja produktu
Kupując mebel trzeba doprecyzować wiele jego parametrów - rozmiar, kolor czy materiał z którego jest wykonany. A kupując przez internet, wszystko to należy wybrać jeszcze przed dodaniem mebla do koszyka. Powstaje wyzwanie: jak sprawić, by użytkownicy nie zgubili się w trakcie procesu zakupowego i nie porzucili zakupu?
Aby odpowiedzieć na tę potrzebę, przede wszystkim zaprojektowaliśmy kilka rodzajów konfiguratorów wiedząc, że inaczej wygląda proces zakupu łóżka, a inaczej zakupienia szafy. Każdy typ produktu ma dedykowaną listę elementów do konfiguracji. Dodatkowo postawiliśmy ma czytelną prezentację graficzną dostępnych kolorów i tkaniny. Wykorzystaliśmy ikony, zamiast opisywać opcje do wyboru, a dzięki temu interfejs zyskał na czytelności i przejrzystości.
Dla użytkownika niezwykle ważne okazały się opcje płatności i dostawy
Wielokrotnie analizowaliśmy oraz iterowaliśmy prezentację tych informacji, aby zbadać, która wersja płatności najlepiej sprawdzi się dla klientów.
Redesign wizualny sklepu
GrainGold przez kilka lat swojego istnienia wypracował wizerunek marki, którego nie chcieliśmy drastycznie zmieniać.
W procesie odświeżenia designu postawiliśmy na jego unowocześnienie, uspójnienie i poprawienie widoczności elementów. Zbudowaliśmy też Design System, dzięki któremy łatwiej będzie zachować spójność wizualną także w przyszłości.
- Odświeżona typografia i kolorystyka
- Design system
- Graficzna tożsamość sklepu
- Prezentacja produktów
Nadzór nad wdrożeniem
Przy wdrażaniu designu konieczna była z naszej strony silna współpraca z deweloperami przy kolejnych iteracjach. Reagowaliśmy na zachowania użytkowników, ale także na wyzwania związane z pracą na gotowej platformie sprzedażowej. Wypracowaliśmy formułę cotygodniowych spotkań statusowych i stałej komunikacji z klientem oraz zespołem deweloperskim.
Our team worked in a design model
.avif)
