POMPON

Aplikacja sklepu z odzieżą używaną dla niemowlaków.

iPhone_3b (1)

Kontekst

Celem projektu było stworzenie funkcjonalnej aplikacji mobilnej do sprzedaży odzieży używanej dla małych dzieci. Zaprezentuję proces jaki przeszedłem w celu stworzenia pierwszej wersji aplikacji. Skupiłem się na badaniach oraz przygotowaniu strategii UX używając odpowiednich narzędzi, które pozwoliły mi przejść do etapu pierwszego prototypowania.

Specyfika projektu

Projekt został stworzony na zaliczenie kursu IT Bootcamp Digital UX. Jest to projekt indywidualny o charakterze eksploracyjnym. 

Czym jest Pompon?

Pompon to sklep internetowy, w którym sprzedawane są ubrania na specjalne okazje dla małych dzieci. Ubranka są używane oraz wyselekcjonowane. W sklepie pojawia się tylko odzież odpowiedniej, wysokiej jakości. Dodatkowo użytkownicy mogą sprzedawać między sobą ubrania lub odsprzedawać do sklepu. Ułatwiony jest także proces kompletowania całych strojów.

Dla kogo?

Na etapie opracowywania aplikacji wyselekcjonowałem trzy grupy do których kierowana jest aplikacja. Są to:

  • posiadacze dziecka, którzy chcą szybko, tanio i ekologicznie dokonywać zakupów.
  • posiadacze dziecka, którzy lubią kompleksowo wystroić dziecko na specjalną okazję.
  • osoby, które chcą sprawić dziecku praktyczny prezent.

Problemy

Aplikacja ma być odpowiedzią na trzy zasadnicze problemy z jakimi mają do czynienia użytkownicy:

Czas

Strata czasu na szukanie ubranek pasujących na swoje dziecko.

Kompleksowość

Trzeba przeszukać wiele miejsc, żeby skompletować ubranie. Często nie da się znaleźć pasujących elementów w jednym sklepie i trzeba kupować w różnych miejscach.

Ekologia

Poczucie i wyrzuty sumienia, że ludzie produkują za dużo i zbyt dużo rzeczy się marnuje.

Jakie korzyści da nam Pompon?

Łatwy sposób zakupu i kompletowania stroju.

Kupno i odsprzedaż używanej odzieży po atrakcyjnych cenach.

Ubrania w jednym miejscu, które pasują do siebie.

Jak do tego doszedłem?

Badania eksploracyjne i weryfikacyjne

Indywidualny wywiad pogłębiony IDI

Pogłębione wywiady indywidualne pozwoliły mi na swobodne eksplorowanie potrzeb i problemów użytkowników. Wywiad miał charakter semi-ustrukturyzowany, przyświecał mi cel badania, który nadawał pewne ramy w jakich się poruszałem, ale kolejność zadawania pytań była formułowana na bieżąco, dzięki temu konwersacja była bardziej dynamiczna i mogłem podążać za tokiem rozmowy z respondentem.

Cel badania

Celem badania eksploracyjnego była weryfikacja w jaki sposób użytkownicy kupują ubrania dla swojego dziecka. Dodatkowo chciałem uzyskać informacje, gdzie dokonują zakupów i jaki mają na to pogląd.

Kryteria doboru respondentów

Badani musieli być posiadaczami dzieci, którzy kupują lub kupowali swojemu dziecku ubrania przez internet. Respondenci musieli być zaznajomieni z korzystaniem z aplikacji mobilnych.
.

Ankieta rekrutacyjna

Przygotowanie formularza rekrutacyjnego pomogło mi dokonać selekcji kandydatów do wywiadu i dobrać grupę respondentów tak, aby zapewnić jak najszerszy obraz potrzeb użytkowników. Screener dokonywał selekcji pod względem kryteriów demograficznych, a także specyficznych warunków i doświadczenia osób posiadających dzieci.
.

Niektóre pytania do wywiadu

  • W jaki sposób kupujesz ubrania dla swojego dziecka?
  • Gdzie kupujesz ubrania dla swojego dziecka?
  • Ile jesteś w stanie wydać na ubranie dla swojego dziecka na jakąś okazję?
  • Czy kupujesz odzież używaną? Jeśli tak to w jaki sposób? Jeśli nie to z jakich względów?
  • Co sądzisz o sprzedaży odzieży używanej przez internet? Czy sam to robisz/robiłeś? Jeśli tak to opowiedz dokładnie jak.
  • Czy korzystałaś/korzystałeś z zakupów odzieży używanej przez aplikacje mobilne?
  • Czy masz problem z nadwyżką odzieży w domu, jeśli tak to jak go rozwiązujesz?
  • Jaki masz stosunek do recyklingu i ekologicznego podejścia do życia, w tym przypadku zakupu odzieży używanej?
  • Co sądzisz o możliwości odsprzedaży już zakupionych kompletów innym użytkownikom aplikacji?

Najważniejsze wnioski z wywiadów

  • Ogólnie ludzie są zwolennikami recyklingu, ale różnie się to przekłada na praktykę.
  • Czasami zdarza się, że mają blokadę psychiczną przed kupowaniem odzieży używanej.
  • Spora ilość respondentów, nie ma problemu z tym, że używają odzieży używanej, wręcz uważają, że można trafić nową lub prawie nieużywaną.
  • Wszyscy kupują przez internet, nie korzystają ze sklepów stacjonarnych.
  • Bardzo ważna jest odsprzedaż już kupionych ciuchów.

Rekomendacje

Po przeprowadzeniu wywiadów uzyskałem poniższe rekomendacje, które pomogły określić kierunek projektowania aplikacji.
.

  • Aplikacja powinna zachęcać do recyklingu, mieć design kojarzący się z ekologią, recykling używanej odzieży powinien być mocno zaakcentowany.
  • Propagowanie preselekcji jako opcji, która wyklucza złą jakość produktów używanych.
  • Aplikacja mobilna jest potrzebna, jako rozbudowanie do strony internetowej.
  • Potrzebne jest dodanie funkcji odsprzedaży do sklepu używanych ciuchów i/lub odsprzedaży pomiędzy użytkownikami.

Persony

Opierając się na danych uzyskanych podczas indywidualnych wywiadów pogłębionych stworzyłem persony. Archetypy użytkowników posłużyły jako podpowiedź przy podejmowaniu decyzji projektowych i znalezieniu rozwiązań. Pomogły wczuć się w rolę użytkownika. W personach udało mi się wyodrębnić pewne zachowania i potrzeby użytkowników, które były kluczowe dla produktu.

Strategia UX

Opracowanie strategii

W celu zdefiniowania istotnych dla naszych użytkowników wartości użyte zostały narzędzia strategii UX: Value proposition canvas oraz Lean canvas.
Użycie strategii pozwoliło dokładnie zdefiniować problemy użytkowników i sposoby zaradzenia im. Także dało mi pierwsze odpowiedzi, czy produkt ma szanse odnieść sukces po stronie biznesowej.

Dzięki opracowaniu strategii ułożyłem dalszy plan działania i wyklarowałem fundamentalne części mojego projekty. 

Program Miro był bardzo pomocny w procesie wypełniania szablonów.

Value proposition canvas

Punktem wyjścia był użytkownik. Szablon został wypełniony sposobem User Driven (od prawej strony do lewej) .

Lean canvas

Kolejnym krokiem było stworzenie Lean Canvas. Odmiany Business Model Canvas, która jest przeznaczona dla startupów. Skupia się na jak najszybszym i najskuteczniejszym znalezieniu rozwiązania.

Analiza konkurencji

Analiza konkurencji dla tego typu aplikacji może być bardzo obszerna. Przeprowadziłem podstawową analizę konkurencji dzieląc ją na dwa typy.​ Skupiłem się na głównych funkcjonalnościach najbardziej znanych serwisów.

Bezpośrednia

Niumnium.pl, Remixshop.pl, Olx, Allegro.

Pośrednia

H&M, Pepco, Smyk, Zalando

Czerwony ocean

W trakcie opracowywania strategii zdałem sobie sprawę, że wchodzę na obszar tak zwanego Czerwonego Oceanu. To trudny rynek z dużą konkurencją i ustalonymi zasadami, gdzie jest bardzo dużo klientów i doświadczeń, ale utrzymać się na nim to duże wyzwanie.

Etap modelowania

Red Routes

Po przeprowadzeniu badań i opracowaniu strategii przeszedłem do pierwszych prób prototypowania.

W celu wybrania najważniejszych dla tej fazy funkcjonalności posłużyłem się narzędziem zwanym Red Routes. Pozwoliło to mi ustalić priorytetowe funkcje aplikacji z punktu widzenia użytkownika, a także uniknąć skupiania się na niepotrzebnych aspektach na tym etapie pracy.

Funkcjonalności na których się skupiłem

    • Strona główna z produktami
    • Filtrowanie
    • Strona produktu
    • Dodawanie do ulubionych
    • Dodawanie do koszyka
    • Kompletowanie stroju
    • Rejestracja i logowanie

Papierowy prototyp - pierwsze kroki

Pierwsze wizje przelałem na kartkę papieru, stworzyłem w ten sposób koncept poszczególnych ekranów.

User Flows

Stworzenie User Flows umożliwiło mi opracować ścieżkę jaką przechodzi użytkownik korzystający z aplikacji. Ścieżki były modyfikowane na różnych etapach. Pozwoliły mi lepiej zrozumieć cele i motywacje osób korzystających z aplikacji. Wyzwaniem było uproszczenie poszczególnych etapów z zachowaniem wszystkich potrzebnych informacji, jakie powinny znaleźć się na ekranie. Na ich podstawie opracowałem zadania do testów użyteczności. Pomocnym narzędziem był program draw.io.

Mapa architektury informacji

 Aby mieć wizję całego produktu, zaprojektowałem pierwszą wersję mapy architektury informacji. Była ona modyfikowana po stworzeniu ścieżek użytkownika (User Flows), tak żeby uchwycić całość z dwóch różnych perspektyw: projektowej i użytkowej. Szybkim sposobem na stworzenie mapy było skorzystanie a z programu MindMeister.

Testowanie

Prototyp niskiej wierności

Opierając się na zebranych danych i wykorzystując wcześniejsze narzędzia wykonałem pierwszy interaktywny prototyp aplikacji. Użyłem do tego programu Axure RP 8.

Testy użyteczności

Testy zostały przeprowadzone na telefonie za pomocą aplikacji Axure Share.

Badania składały się testów manualnych, a testerzy skupiali się na testowaniu funkcjonalności fragmentu dostarczonej aplikacji.

Do wykonania mieli 3 zadania. Na podstawie stworzonych wcześniej User Flows.

Celem było wychwycenie błędów i sprawdzenie jak odbierają architekturę informacji.

Przeprowadzając testy dbałem, aby  pytania zadawane przeze mnie podczas testów były otwarte, oraz prosiłem o myślenie na głos co pozwoliło uchwycić ciekawe spostrzeżenia. Na koniec prosiłem o ogólne spostrzeżenia na temat aplikacji oraz co zwróciło ich uwagę, a co się szczególnie nie podobało.

Zadania

Testerzy do wykonania mieli poniższe zadania:

  1. Przejdź rejestrację lub logowanie, jeśli posiadasz już konto w sklepie internetowym. (wybiera testowany). Dodaj jedną sukienkę wieczorową do koszyka i ulubionych. Sprawdź swój koszyk i ulubione. Wróć do strony głównej. W filtrach wybierz body i sprawdź jakie są dostępne. Wyłącz filtry.
  2. Na stronie głównej otwórz menu i sprawdź informacje o sklepie.
  3. Na stronie głównej wejdź w pierwszą sukienkę, obejrzyj zdjęcia, dodaj rajstopy do kompletu i dodaj cały komplet do koszyka.

Wnioski po testach

W testach zostały wychwycone błędy w zaprojektowaniu filtrów, a także w stosowaniu logo, gdzie indziej niż na stronie głównej.
Na stronie produktu trudności sprawiało dodanie rajstop do kompletu, nie było wiadomo jak dokładnie kupić produkt.
Brakowało regulaminu, wskazana została potrzeba zmiany sposobu logowania i rejestracji.

Widoki aplikacji przed naniesionymi poprawkami.

Projektowanie UI

Interfejs graficzny

Po etapie testów zabrałem się do wdrażania poprawek i stworzenia widoków aplikacji z zachowaniem większej ilości szczegółów. Postanowiłem zrobić bardziej rozbudowany prototyp, aby oszacować w którą stronę powinna pójść strona wizualna. Użyłem do tego programu Adobe XD oraz Adobe Photoshop. Opierałem się na systemie Material Design.

Ekran główny.

Ekran główny z zaznaczonymi przyciskami “dodaj do ulubionych” i “dodaj do koszyka”. Po dodaniu do koszyka następuje rezerwacja na określony czas.

Widok filtrów.

Ekran produktu.

Ekran menu.

Podsumowanie

Wnioski

Projekt zebrał bardzo pozytywne opinie. Badani byli zainteresowani korzystaniem z tego typu modelu sprzedaży. Z punktu biznesowego projekt ma sens i jest możliwa jego realizacja. Z racji tego, że aplikacja jest bardzo rozbudowana, jeszcze wiele pracy przede mną, żeby opracować i przeanalizować każdy aspekt działania sklepu Pompon.

Mocne strony produktu

Produkt oparty jest na potrzebach użytkowników i ich realnych problemach.
Kierowany do bardzo szerokiej grupy odbiorców.
Opracowana została strategia biznesowa, która bardzo ułatwi dalsze planowanie.
Zastosowane narzędzia oraz testy pozwoliły na wczesnym etapie ograniczyć rozbudowę aplikacji o niepotrzebne funkcje.

Nastepne kroki

W kolejnych etapach rozwoju aplikacji planowane jest:

  • dokładne zaprojektowanie strony Ulubione.
  • zaprojektowanie Koszyka wraz ze sposobami płatności i dostawy.
  • dodawanie całych kompletów ubrań do zakładki Ulubione.
  • dopracowanie schematu wizualnego aplikacji.
  • zaprojektowanie sposobu dzielenia na kategorie dostępnych produktów.
  • zaprojektowanie sposobu sprzedaży i wystawiania ubrań w aplikacji mobilnej.
  • strona internetowa sklepu.