Do you have a question? Contact us now!

Contact Us

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Wróć do listy wpisów
Ostatnia aktualizacja
24.6.2022
24/6/2022
Proces projektowy w agencji UX

Proces Projektowy w Mobee Dick - czyli jak pracujemy?

Proces projektowy to zbiór czynności, które pomagają projektantom, badaczom, interesariuszom i programistom zbudować produkt, który będzie łączył potrzeby użytkowników, odpowiednie rozwiązania technologiczne i pożądane cele biznesowe. Zobacz, w jaki sposób w Mobee Dicku pracujemy nad projektami i z jakich etapów składa się nasz proces.

Karina Klińska

    Czego dowiesz się z artykułu?

    1. Proces projektowy w Mobee Dick
    2. Jak powstał nasz proces projektowy
    3. Kick-off - poznajemy się!
    4. Badanie potrzeb - po nitce do kłębka
    5. Strategia - wyznaczamy cele
    6. Ideacja - chce się szyć!
    7.  Priorytetyzacja i planowanie, czyli obieramy kierunek
    8. Modelowanie
    9. Makiety
    10. Look and Feel, czyli pokaz mody
    11. Projekt graficzny, dopinamy wszystko na ostatni guzik
    12. Handoff i wdrażanie MVP, czyli wyjście z szafy!

    O procesach projektowych w UX powstały setki, jeśli nie tysiące tekstów, jeśli więc nadal szukacie tego z którego dowiecie się, jak stworzyć proces idealny, to od razu odpowiadam – idealny proces projektowy nie istnieje. Istnieją za to doskonałe produkty i usługi, które trafnie odpowiadają na realne potrzeby użytkowników.

    Proces projektowy w Mobee Dick

    Proces projektowy w Mobee Dick oparty jest na fundamentach takich podejść jak Double Diamond czy Lean UX. Pracujemy w interdyscyplinarnych zespołach. Nasi projektanci pracują blisko z badaczami i UX writerkami. Dzięki temu możemy na bieżąco wymieniać się potrzebami i spostrzeżeniami oraz dopasowywać trwający proces do bieżącej sytuacji. Pomaga nam to podejmować decyzje projektowe w oparciu o sprawdzone dane, oraz dobierać odpowiednie metody badawcze i projektowe na każdym etapie projektu.

    Pracujemy iteracyjnie i weryfikujemy nasze hipotezy na każdym kroku, czasem robimy krok w tył, jeśli na horyzoncie widzimy lepsze rozwiązanie od tego, które przyjęliśmy na początku.

    Jak powstał nasz proces projektowy?

    Nad naszym procesem projektowym w Mobee Dick pracowaliśmy prawie 6 miesięcy. W tym czasie zrobiliśmy sporo wewnętrznych warsztatów i odbyliśmy dziesiątki dyskusji. Nasz zespół składał się z badaczy, projektantów UX i UI, UX writerów oraz grupy project managerów – dzięki różnym kompetencjom i patrzeniu na proces z różnych perspektyw, udało nam się wypracować spójny system, który będzie szyty na miarę klienta i dopasowany do jego potrzeb, a jednocześnie zawierający określone punkty i etapy, które w zależności od potrzeb mogą się wydłużać, skracać, bądź powtarzać, aż osiągniemy pożądany efekt.

    Sprawdź poniżej, jak w 10 punktach przedstawia się nasz Mobee Dickowy proces projektowy.

    1. Kick-off - poznajemy się!

    Proces projektowy zaczynamy od zebrania wymagań. Pracujemy z klientem ramię w ramię – słuchamy, dopytujemy i analizujemy informacje dostarczone przez klienta i biznes. Na tym etapie poznajemy główną grupę docelową, organizujemy warsztaty z klientem, dzięki czemu lepiej rozumiemy zarówno jego potrzeby, jak i jego użytkowników.

    W tej fazie chcemy uzyskać wspólną wizję produktu lub usługi, aby móc jak najlepiej odpowiedzieć na realne potrzeby użytkowników. Od samego początku staramy się zlokalizować potencjalne ryzyka i obszary, które będą wymagały szczególnej obserwacji, a może będziemy mogli od razu zaproponować rozwiązania, które te ryzyka zminimalizują. 

    2. Badanie potrzeb - po nitce do kłębka

    Kiedy już mamy wspólną wizję tego, do czego dążymy, oraz hipotezy, na podstawie których decydujemy, że warto podjąć się pracy nad tym rozwiązaniem, przechodzimy do badań, czyli podstawy, na której będziemy opierać budowę produktu lub usługi. 

    Badania to zestaw metod i narzędzi, które pomagają nam zadawać trafne pytanie i znajdować właściwe odpowiedzi. Nasi badacze odpowiednio nimi żonglują i są w tym naprawdę dobrzy. W tej fazie słuchamy naszych odbiorców, chcemy ich poznać, ich zachowania i motywacje. Gromadzimy jak najwięcej danych i uwzględniamy złożoność problemu. Skupiając się na celu chcemy poznać ich sposób myślenia i sprawdzić jak sobie radzą obecnie w badanym obszarze. Odkrywamy potrzeby, obawy i ograniczenia z jakimi mierzą się przyszli użytkownicy. 

    Zebrana wiedza będzie podstawą do podejmowania dalszych decyzji projektowych. Czasami może się okazać, że wyobrażenie klienta i prawdziwe potrzeby jego odbiorców się rozmijają. Być może będziemy musieli zmienić grupę docelową, albo zakres projektu. Może się okazać, że użytkownicy nie potrzebują np. aplikacji do tworzenia listy zakupów, bo bardziej użytecznym i wygodnym rozwiązaniem jest dla niech naklejanie karteczek na lodówkę. Z drugiej strony wnioski z badań mogą nam posłużyć jako podstawa do zaproponowania całkiem nowych rozwiązań.

    Jednocześnie staramy się zrozumieć kontekst biznesowy oraz poznać słabe i mocne strony konkurencji, co może to posłużyć jako źródło inspiracji do budowania przewagi oraz strategii.

    Metody projektowe przydatne na tym etapie:

    • Audyt ekspercki (jeżeli rozwiązanie już istnieje) - pozwala ocenić użyteczność strony przez doświadczonego projektanta  aby zidentyfikować błędy i rekomendować lepsze rozwiązania, często wykonywana na zasadzie wędrówki poznawczej czyli eksploracji strony z perspektywy użytkownika, listy kontrolnej bądź heurystyk,
    • Empathy Map - pomaga zwizualizować myśli, emocje i zachowania użytkownika oraz zlokalizować braki w danych,
    • Customer Journey Map obecnego rozwiązania - przedstawia doświadczenie użytkownika podczas procesu zakupu, pozwala zdiagnozować bolączki i miejsca w procesie, które można poprawić, aby doświadczenie klienta było lepsze,
    • Web analytics - pozwala zrozumieć zachowania i potrzeby użytkowników na stronie, zidentyfikować problematyczne elementy oraz miejsca, w których użytkownicy np. opuszczają witrynę albo przerywają proces zakupu,
    • Analiza konkurencji - pozwala poznać słabe i mocne strony konkurencji oraz pomóc w opracowaniu strategii i budowaniu przewagi nad konkurencją,
    • Inwentaryzacja treści - pomaga określić mocne i słabe strony produktu oraz stworzyć nową strukturę informacji, pozwala poznać czego brakuje, z jakich treści zrezygnować, a które rozwinąć, jest podstawą do późniejszego tworzenia architektury informacji,
    • Desk Research - pozwala poznać i przeanalizować już istniejące źródeł danych, takie jak statystyki, raporty ale też opinie czy dyskusje na forach.

    Podsumowaniem tego etapu są rekomendacje projektowe, wyprowadzone przez zespół badawczy – to o nie będziemy opierać dalsze prace.

    3. Strategia - wyznaczamy cele

    Etap strategii to doprecyzowanie czym będzie produkt (lub usługa) i jaki będzie jego zakres. Jaki problem ma rozwiązać, albo na jaką potrzebę ma odpowiadać? Ostatecznie definiujemy tu cele biznesowe i wyzwanie projektowe, ustalamy krótko i długofalowe cele produktu. Decydujemy w jaki sposób nasz produkt będzie się odróżniał od konkurencji i w czym będzie od niej lepszy.

    Ta faza bazuje na rekomendacjach, które w poprzednim etapie dostarczył nam zespół badawczy. Podczas projektowania cały czas odnosimy się do wniosków projektowych, badań ilościowych i statystyk. Na tym etapie przeprowadzamy też najwięcej warsztatów projektowych wewnętrznie i z klientem. Pozwala to nam doprecyzować dla kogo budujemy rozwiązanie, czym jest i w jaki sposób działa. Wyrównujemy wiedzę u nas i u klienta we wspólnym zrozumieniu problemu, ustalamy jasny kierunek i cel, do którego dążymy.

    Metody przydatne podczas projektowania tym etapie:

    • Value Proposition Canvas (Propozycja wartości) – pomaga zidentyfikować realną wartość, którą możemy dać użytkownikom. Pozwala wygenerować konkretne pomysły, które będą odpowiedzią na zidentyfikowane potrzeby, zadania i pasje, które ma do wykonania użytkownik oraz bolączki i negatywne emocje, towarzyszące przy ich wykonywaniu,
    • Ustalanie celów biznesowych, KPI i metryk - pozwalają wyznaczyć cele, do których dążymy oraz śledzić postępy,
    • Najważniejsza ścieżka użytkownika the golden path / pick a target - złota, lub kluczowa ścieżka użytkowania, pomaga nam wyodrębnić listę najważniejszych kroków, które musi podjąć użytkownik, aby znaleźć realną wartość produktu. 
    • How might we - czyli stawianie pytań “jak moglibyśmy sprawić, aby” pomaga generować kreatywne rozwiązania, skupiając się na właściwych problemach i potrzebach,
    • Definiowanie user stories - pomaga sprecyzować, na jakie potrzeby mają odpowiadać funkcje w aplikacji z perspektywy użytkownika,
    • Customer Journey Map idealna (to be) - przedstawia doświadczenie klienta podczas procesu zakupu, pozwala zdiagnozować bolączki i miejsca w procesie, które można poprawić, aby doświadczenie klienta było lepsze,
    • Definiowanie Point of View - pomaga tworzyć pomysły zorientowane na cel, pozwala na przeformułowanie wyzwania projektowego w dające się zastosować rozwiązanie problemu,
    • Affinity mapping - organizuje pomysły oraz dane i pokazuje powiązania między nimi, 
    • Warsztaty Voice&Tone - pomagają obrać sposób styl komunikacji oraz sposób, w jaki chcemy się zwracać do naszych użytkowników. 

    Podsumowaniem tego etapu są badania, podczas których sprawdzamy czy klient wie, co jest dla niego ważne i jakie ma priorytety? Sprawdzamy czy po warsztatach z klientem brakuje nam informacji na temat grupy docelowej? Jeśli tak, to prowadzimy dalsze badania eksploracyjne. Dzięki udziałowi badaczy pod koniec tej fazy możemy zmapować ryzyka w projekcie z perspektywy dostępnych danych, lub ich braku oraz potrzeb użytkowników.

    SKONTAKTUJ SIĘ Z NAMI

    Masz pytania? Skontaktuj się z nami!

    Porozmawiajmy
    Hola, hola, to nie koniec! Dalsza część artykułu jest pod banerem.

    4. Ideacja - wizualizacja konceptów i pomysłów

    Ideacja dzieje się równolegle ze strategią. Jest to proces wymyślania i prototypowania różnych rozwiązań. Zależy nam na tym, aby wygenerować ich jak najwięcej, dlatego nie stawiamy granic naszej kreatywności i nie skupiamy się na ograniczeniach, dzięki temu możemy zaproponować różnorodne hipotezy projektowe. Myślimy o funkcjach, procesach, architekturze informacji, interakcjach, treściach i interfejsie, nie zapominając o najważniejszym – grupie docelowej i modelu biznesowym. Dzięki przepracowaniu wielu pomysłów w tej fazie, możemy skrócić iteracje na późniejszych etapach.

    Na koniec tego etapu mamy zwizualizowane różne koncepty i pomysły. Mamy szkicowe flowy i makiety o niskim stopniu szczegółowości (makiety lo-fi), które możemy zweryfikować z użytkownikami aby dowiedzieć się, czy obraliśmy słuszny kierunek i zaprezentować im szkielet produktu. Ten proces będziemy powtarzać tak długo, aż wybrane rozwiązanie okaże się na tyle dobre, że postanowimy pracować nad nim dalej .

    Metody przydatne na tym etapie:

    • A/B Testing - pozwala wybrać wariant rozwiązania, który bardziej zainteresuje użytkowników, lepiej spełni stawiane przed nim cele,
    • Fake doors - pozwala sprawdzić czy użytkownicy są zainteresowani jakimś rozwiązaniem, bez konieczności projektowania go, np. stworzenie buttonu “dodaj do obserwowanych” i sprawdzenie jaki odsetek użytkowników kliknie w przycisk/funkcję,
    • Wizard of Oz - pozwala na wejście użytkownika w interakcję z systemem, bez konieczności implementacji – człowiek symuluje reakcje systemu,
    • Warsztaty partycypacyjne - (ang. Participatory Design, lub Co-Design, Co-Creation) to zaproszenie do wspólnego projektowania różnorodną grupę interesariuszy, aby dzięki różnym punktom widzenia zbudować bardziej wartościowy i atrakcyjny produkt, przy okazji uzyskując akceptację osób decyzyjnych,
    • Testy lo-fi - testy prostych makiet pozwalają bez dużego nakładu pracy i niskim kosztem przetestować zaprojektowane rozwiązanie.

    5. Priorytetyzacja i planowanie, czyli obieramy kierunek

    Ideacja pozwala nam na eksplorację wielu pomysłów. Przejawia się w tym myślenie dywergencyjne – czyli myślenie w szerokim kontekście, myślenie rozszerzające, badawcze. Natomiast faza priorytetyzacji pozwala nam skupić się na jednym, najbardziej obiecującym pomyśle. Teraz z kolei myślimy konwergentnie czyli zawężamy i ograniczamy idee. Jest to podejście znane z metodyki Double Diamond. Na tym etapie eliminujemy, porządkujemy i organizujemy. Ustalamy priorytety ważność vs. skomplikowanie dla konceptów i ich składowych (np. wybrana ścieżka, system, funkcja). 

    Wiedząc, które pomysły mają dla naszych odbiorców największą wartość definiujemy te, które w pierwszej kolejności rozwiniemy. Określamy MVP (Minimum Viable Product) czyli podstawowy zakres funkcji w produkcie lub usłudze, które są konieczne aby móc wprowadzić je na rynek i zderzamy nasze pomysły z ograniczeniami technicznym – tutaj warto zaangażować deweloperów, którzy mają na ten temat największą wiedzę. 

    Na koniec tego etapu mamy ułożony backlog projektowy, zdefiniowane najważniejsze User Stories i zakres prototypowania.

    Metody przydatne na tym etapie:

    • Priorytetyzacja - pozwala organizować zadania i pomysły wg ich znaczenia (np. moscow, red routes, difficulty matrix, affinity diagram),
    • Dot voting - metoda zbierania opinii i głosowania nad wyborem w przypadku dużej liczby osób,
    • 6 thinking hat - pozwala spojrzeć na problem z różnych perspektyw dzięki przyjmujęciom różnych postaw (np. najpierw postawa krytyczna, później entuzjastyczna),
    • Matryca ważność/skomplikowanie - pozwala sklasyfikować funkcje pod względem łatwości wdrożenia vs. wartości dla użytkownika,
    • User story mapping - technika pozwalająca pogrupować historyjki użytkownika wg funkcji i ustalić priorytety rozwoju produktu. Pomaga spojrzeć na produkt z szerokiej perspektywy (big picture), jednocześnie pozwala mieć oko na szczegóły. 

    6. Modelowanie 

    Podczas modelowania doprecyzowujemy sposób działania produktu z perspektywy jego użytkowników. Definiujemy najważniejsze user scenario (scenariusze użytkownika), zawierające tylko niezbędne elementy do poprawnego działania produktu (nie myślimy o wszystkich możliwych koncepcjach). Dzięki temu jesteśmy w stanie zrozumieć logikę rozwiązania, zależności między danymi oraz poprawnie zdefiniować kluczowe funkcje, strukturę treści i idealne ścieżki użytkownika, które będziemy mogli przełożyć na makiety.

    Modelowanie to etap częstych szkiców o bardzo niskim stopniu skomplikowania. Często pojawiają się tu ograniczenia, kompromisy i rezygnacja z niektórych funkcji, ale po zakończeniu tego etapu wizja pomysłu powinna być już w pełni spójna.

    Nim przejdziemy do kolejnego etapu, możemy przetestować z użytkownikami jak rozumieją flow i architekturę. za pomocą np. card sorting, tree testing albo wspólnie z nimi rysując makiety

    Metody przydatne na tym etapie:

    • User flow mapping - zbiór kroków podejmowanych przez użytkownika, aby osiągnąć cel w produkcie cyfrowym,
    • Diagram architektury Informacji - pomaga ułożyć informacje i treści oraz ich wzajemny wpływ na siebie, układając strukturę w sposób logiczny i spójny,
    • Testowanie i projektowanie flow z użytkownikami - pozwalają bardzo szybko dowiedzieć się, czego potrzebują użytkownicy i jakie popełniliśmy błędy.

    7. Makiety

    Makietowanie to etap pośredni między pomysłem, a projektowaniem graficznym interfejsu. Wizualizujemy tu strukturę treści i określamy konkretne komponenty. 

    Mając zdefiniowaną platformę, rozdzielczość, architekturę informacji i design system (czyli warianty komponentów, składających się na spójny system, który będzie można rozwijać) możemy stworzyć plik graficzny z podziałem na wszystkie flowy (nie tylko te kluczowe), które następnie możemy testować z użytkownikami. To tutaj ostatecznie decydujemy jakich ekranów nam jeszcze brakuje do poprawnego działania produktu/usługi.

    Metody przydatne na tym etapie:

    • Mockupy lo-fi - pozwalają szybko zwizualizować projekt i niskim kosztem przetestować i zebrać feedback dla pomysłów,
    • Crazy 8's - pomoże zmienić perspektywę, rozwiać wątpliwości oraz znajdować rozwiązanie dla problemu,
    • Warsztaty Design Studio - szybki sposób na iteracyjne szkicowaniu pomysłu. Włącza cały zespół w proces projektowania, każda prezentacja pomysłu to dyskusja i krytyka, aby kolejna wersja była lepsza.

    Na koniec tego etapu mamy zaprojektowaną uproszczoną makietę rozwiązania, na której prezentujemy gotowe treści przygotowane przez UX writerów.

    SKONTAKTUJ SIĘ Z NAMI

    Masz pytania? Skontaktuj się z nami!

    Porozmawiajmy
    Hola, hola, to nie koniec! Dalsza część artykułu jest pod banerem.

    8. Look and Feel, czyli osobowość produktu

    Celem look and feel jest obranie kierunku wizualnego rozwoju produktu. Na tym etapie określamy styl graficzny, który będzie spójny z identyfikacją wizualną marki. Staramy się wzmocnić komunikowanie propozycji wartości (Value Proposition) i unikalnej propozycji wartości (Unique Value Proposition), oraz dążymy do tego, aby wyróżnić produkt na tle konkurencji. Dopiero na tym etapie podejmowane są decyzje dotyczące kolorów, odpowiednich kontrastów oraz wykorzystywanych krojów pisma. 

    Metody przydatne na tym etapie:

    • Warsztaty brandingowe - pomoże znaleźć charakter marki, wzmocnić ją i wyróżnić na rynku,
    • Analiza marki - wyodrębnia/syntetyzuje elementy składowe np. kolorystykę, fonty, kształty, tone of voice na podstawie istniejącego produktu lub usługi, 
    • Stylescape / Brandscape - określający wygląd marki za pomocą zbioru kolorów, typografii, grafik i tekstur, podobny do moodboardu, ale na wyższym poziomie,
    • Brand Deck / Charakter Deck - pomaga zidentyfikować, w jaki sposób postrzegana jest marka,
    • Zdefiniowanie visual keywords.

    Efektem prac na tym etapie jest dokument Look and Feel. Mogę to być również Stylescape lub Brandscape oraz UX Writing Guide.

    9. Projekt graficzny - dopinamy wszystko na ostatni guzik!

    Kolejnym etapem jest zaprojektowanie interfejsu w zgodzie z założeniami Look and Feel oraz dokumentu WCAG czyli zbiorem zasad, które określają w jaki sposób przygotować nasze rozwiązanie aby mogły z niego skorzystać osoby, które doświadczają jakiegoś rodzaju dysfunkcji (np mają słabszy wzrok i może być dla nich trudne rozróżnienie kolorów). Dobrze przygotowany projekt interfejsu graficznego ułatwi i przyśpieszy pracę deweloperów. Na makietach UI mogą się pojawić już finalne treści stron/ekranów oraz grafik i zdjęć. Jeśli nie ma design systemu (czyli struktury wariantów komponentów, składającą się na spójny system, który będzie można rozwijać), to na tym etapie go tworzymy. 

    To również czas na podjęcie decyzji, czy będziemy robić interakcje i animacje. Podczas pracy UI designer stale komunikuje się z zespołem projektowym – UX designerem, UX writerem i UX researcherem, oraz z deweloperami dbając o to, aby projekt był możliwy do wdrożenia.

    Co chcemy mieć po tym etapie?

    • Projekt interfejsu graficznego,
    • UI style guide – pomaga zdefiniować elementy, takie jak typografia, kolory, układ i komponenty,
    • Kontent tekstowy: komunikaty, walidacje itd.,
    • Kontent graficzny: ilustracje, animacje,
    • UI stack (stany ekranów),
    • Mockupy Hi-fi ,
    • Prototyp,
    • Design system - biblioteka komponentów wraz z ich stanami.

    10. Hand-off i wdrażanie MVP

    Ostatnią fazą procesu projektowego jest hand-off, czyli przekazanie dokumentacji deweloperom lub wdrożenie rozwiązania we współpracy z deweloperami. Dzięki współpracy z deweloperami jesteśmy w stanie znaleźć błędy, które czasem pojawiają się podczas wdrożenia oraz zadbać o jego wysoką jakość, również pod względem użyteczności. Niezastąpione na tym etapie są statusy z zespołem wdrożeniowymi oraz testy demo w środowisku testowym. 

    Co chcemy mieć po tym etapie?

    • Dobrze udokumentowany plik graficzny, zawierający: makiety, opisy, prototypy i flowy,
    • Opis/dokumentacja: logiki, interakcji, zachowania komponentów project deck,
    • Podsumowanie wniosków i obserwacji z badań wraz z linkami do przygotowanych materiałów,
    • Motion design,
    • Księga treści zawierająca opis głosu i tonu, czyli zasady komunikacji, wytyczne UX-writingowe, zawierające m.in. instrukcje z przykładami użycia dla projektantów oraz słownik pojęć.

    Mamy nadzieję, że powyższy tekst pozwolił Ci zrozumieć, jak podchodzimy do projektowania doświadczeń użytkowników w Mobee Dick oraz poznać nasze metody badawcze i projektowe. Korzystaj z nich, jeśli pomogą Ci ulepszyć Twój proces projektowy, a jeśli chcesz powierzyć to zadanie najlepszym specjalistom i zbudować swój produkt lub usługę cyfrową razem z nami – skontaktuj się z nami.

    SKONTAKTUJ SIĘ Z NAMI

    Masz pytania? Skontaktuj się z nami!

    Porozmawiajmy