Home By My Own - responsywna strona

Ten o robieniu rzeczy po swojemu… [case study]

Można by pomyśleć, że skoro wyciągnęłam co najmniej 12 lekcji ze swojego pierwszego projektu (case study o Creatour), to w kolejnym nie popełnię podobnych błędów. Może i nie potknęłam się w tych samych miejscach. Postanowiłam za to sama sobie podłożyć nogę. Zrobiłam to w momencie, gdy zdecydowałam, że wszystko będzie po mojemu…


↘️ Projekt w 4 zdaniach

Co powstało: Home By My Own – responsywna strona internetowa z tutorialami DIY

Kiedy: 08-10.2023

Jaki miało wpływ: Gdybym tylko pogadała z grupą docelową…

Najważniejsza lekcja: Brak testów użyteczności rodzi konsekwencje 🫣


Znasz ten stan?

Jeszcze nawet nie zaczął się projekt, a zegarek już zwiastuje spóźnienie?

Chleb powszedni? Za moich czasów marketingowych jak najbardziej. Tak wiele rzeczy było na wczoraj… Podobnie czułam się we wrześniu 2023. Zakładałam, że zacznę wtedy siódmy kurs z UX designu. A byłam w połowie szóstego. Co się robi w takich momentach? Albo dajesz sobie więcej czasu. Albo decydujesz się na cięcia w procesie. Odważnie i nierozważnie zdecydowałam się na to drugie.

Moja rola w projekcie
Człowiek orkiestra aka Pani do wszystkiego aka Ooo, mogę wszystkooo!


Cięcie w procesie #1 → „A po co mi wywiady?”

6. kurs w ramach Google UX Design Certificate (moje streszczenie wiedzy) koncentrował się na nauczeniu mnie, jak projektować responsywne strony internetowe. Mogłam sama wytypować tematykę swojego projektu i zdecydowałam się na responsywną stronę z tutorialami DIY.

Home By My Own
Niekomercyjny projekt strony, która pozwala użytkownikom na przeglądanie tutoriali DIY oraz inspiracji. Ma stanowić źródło przydatnych i kompletnych informacji dla majsterkowiczów. Strona jest współtworzona przez społeczność, która może dodawać własne projekty i dzielić się instrukcjami z innymi.

Wiedza z raportu o konsumentach DIY

Tym razem nie zostały narzucone mi informacje z fikcyjnych wywiadów z użytkownikami. Sugerowane było, aby przeprowadzić je samodzielnie. Zostałam zaopatrzona w wiedzę, jak to zrobić. Wiesz już jednak, że poszłam drogą na skróty.

Zdecydowałam się skorzystać z pracy wykonanej przez innych. Był nią raport od Venveo na temat mojej grupy docelowej – czyli osób zajmujących się DIY (DIY Consumer Marketing Trends Report).

Plusy ✅

• Oszczędziłam na tym sporo czasu
• Szeroka i zróżnicowana próbka osób (>850 osób z USA)
• Różnorodne dane (demografia, zachowania, preferencje)

Minusy ❌

• Brak praktyki w obrębie przeprowadzania wywiadów
• Brak wiedzy w pełni skrojonej pod potrzeby mojego projektu
• Dane z ankiet, nie z wywiadów
• Dane z 2018 roku


Idąc dalej → szczypta konkretów

Po lekturze powyższego raportu, przygotowałam mapy empatii, zdefiniowałam bolączki, określiłam problem użytkownika, stworzyłam personę. Napisz do mnie wiadomość, jeśli chcesz do tego wszystkiego zajrzeć. A tymczasem w skrócie ⤵️

Bolączki użytkowników

• Mylące nawigacje strony
• Problem w znalezieniu przydatnych informacji
• Brak ocen lub informacji o kosztach
• Strony, które nie są mobile-friendly

Problem użytkownika

Zapracowany rodzic i pasjonat DIY potrzebuje łatwego dostępu do wszystkich przydatnych informacji na temat majsterkowania, ponieważ chce poprawić swoją przestrzeń życiową bez niepotrzebnego wysiłku.

Problem i cel biznesowy? Tak, dobrze się domyślasz. W tej historii również nie występuje.


Cięcie w procesie #2 → „A po co mi testy?”

Teoretycznie wszystko przebiegało podręcznikowo. Po etapie empatyzacji przeszłam do definiowania, ideacji, prototypowania i… bam.

Chciałam, żeby było szybciej i pominęłam fazę testowania. A właściwie to zrobiłam ją w wersji mini-mini-mini. Poprosiłam męża (pracującego w branży) o korektę. Tak, wiem. Wiem, wiem, wiem.

Poniżej zupełnie szczera lista moich projektowych przedsięwzięć, dzięki którym powstało Home By My Own ⤵️

Proces

• Design thinking
• 1-osobowe testy „biurkowe” („ej, jak ci się z tego korzysta”)
• Kilka iteracji wireframe’ów
• 2 iteracje prototypu lo-fi
• 2 iteracje prototypu hi-fi

Narzędzia

• Mapy empatii, persony
• Mapa podróży użytkownika
• User flow
• Audyt konkurencji
• Szybkie szkicowanie
• Mapa witryny
• Wireframing (papierowy i cyfrowy)
• Prototypy lo-fi i hi-fi w Figmie
• Projektowanie komponentów
• Design kit
• Auto layout 🔥

Przeciwności

• Brak kontekstu biznesowego
• Brak testów użyteczności
• Brak pogłębienia wiedzy na temat zasad projektowania UI
• Praca w trybie przyspieszonym


Ale udało się dotrzeć do celu

10. października 2023 obudziłam się przed 6:00 rano, wyciągnęłam komputer, poprawiłam komponenty, w których nie korzystałam z auto layoutu (bo nie od razu odkryłam jego zbawienną moc). I skończyłam projekt.

Skupiłam się w nim na tym, żeby było prosto i do celu. Żeby nie trzeba było się przekopywać przez niezliczoną ilość pobocznego contentu. Żeby strona nie atakowała użytkowników nadmierna liczba kategorii. I żeby nie musieli się zastanawiać, gdzie jest ta cała wyszukiwarka i dlaczego nie ma w niej opcji filtrowania.

Oto narzędzia, które (w założeniu) mi w tym pomogły ⤵️

Wyeksponowana wyszukiwarka

Uznałam, że osoby odwiedzające stronę z tutorialami DIY mają z grubsza określony cel – chcą znaleźć konkretny projekt. Dlatego zdecydowałam, że wyszukiwarka będzie pierwszą rzeczą, jaką zobaczą po odwiedzeniu strony.

Filtrowanie na stronie głównej

Zdecydowałam się na dodatkowe skrócenie ścieżki użytkownika i wyeksponowanie na stronie głównej contentu z opcjami filtrowania. Ze wskazanego przeze mnie raportu wynikało, że majsterkowicze szukają inspiracji przede wszystkim na YouTube, więc chciałam nawiązać do tego doświadczenia.

Karty z podstawowym info

Aby ułatwić przeglądanie treści bez konieczności dodatkowego filtrowania, umieściłam na kartach najważniejsze informacje: możliwie duży obrazek, poziom trudności, tytuł i autor (hiperłącze), czas potrzebny na realizację projektu oraz liczba polubień.

Uzupełnienie informacji

Brak konkretnych danych i konieczność szukania ich w różnych źródłach, było jedną z głównych bolączek użytkowników. Dlatego skupiłam się na tym, żeby obok wybranego tutorialu DIY znalazł się komplet informacji, które uznawane są przez nich za przydatne i niezbędne do realizacji projektu DIY. Dodałam również możliwość pobrania instrukcji w formie pliku PDF.

Tryb „Projekt w trakcie”

Jeżeli użytkownik zainteresował się realizacją danego projektu, może skorzystać z funkcji „Start this project”. Dzięki temu może odhaczać realizację kolejnych kroków i zapisywać swój postęp. Zdecydowałam się na tę opcję, ponieważ uznałam, że projekt DIY nie realizuje się zazwyczaj „na raz” i warto ułatwić użytkownikowi powrót do rozpoczętej pracy.

Współtworzenie portalu

Po ukończeniu projektu użytkownik może dodać własne wykonanie i podzielić się wrażeniami z pozostałymi użytkownikami. Traktuję to jako dodatkową zachętę do współtworzenia strony oraz do realizacji projektu (w myśl „skoro inni potrafią, to ja również”).

Zakładka z inspiracjami

Wśród potencjalnych użytkowników znajdą się zapewne osoby, które będą szukać na stronie po prostu inspiracji. Miejsce na tę część zarezerwowałam w osobnej zakładce. Jej wygląd miałby nawiązywać do wizualnych inspiracji, jakie można znaleźć na Pintereście (ponieważ to drugie najpopularniejsze źródło wiedzy dla majsterkowiczów).

Tym razem trochę bardziej się rozkręciłam, jeśli chodzi o design kit i dostępne komponenty. Zazwyczaj mocno mnie to wciąga i nie przeczę, że wielokrotnie spędzam nad tym więcej czasu, niż w rzeczywistości potrzeba. Uwaga, zaraz będzie obrazek, który wymaga wyciągnięcia lupy 👀

Ok, pewnie nie masz lupy. Podrzucam przybliżenie na kolory i typografię ⤵️

W porządku, dość już tego czytania…


2 minuty ze stroną Home By My Own

Tylko jedno kliknięcie i możesz obejrzeć mój projekt ↓ Jeśli lubisz klikać więcej i przeglądać rzeczy we własnym tempie, to linki do prototypów znajdziesz na końcu case study. A także tutaj ⤵️


Wpływ

Cóż, ciężko wyciągnąć tutaj na wierzch opinię tylko jednego użytkownika. Być może Home By My Own dorobi się jeszcze swoich własnych testów użyteczności. Tymczasem pozostając w sferze gdybania. Na jakie wskaźniki zwracałabym uwagę, żeby ocenić skuteczność strony?

Nie tylko przyrost odwiedzających, ale również retencja
To nie aż tak duża sztuka sprowadzić ruch na stronę. Myślę natomiast, że o jej sukcesie mogłoby świadczyć to, że użytkownicy chętnie do niej wracają. Nie tylko w krótszej, ale też dłuższej perspektywie.

Wskaźnik odrzuceń na poziomie wyszukiwarki i wyników wyszukiwania
Wyszukiwarka i jej funkcjonalność to coś, co ma przyciągać na stronę użytkowników. Jeżeli obserwowałabym duży wskaźnik odrzuceń związany z tą funkcją lub z wynikami wyszukiwania, mogłabym traktować to jako sygnał, że wymaga poprawy.

Pobieranie instrukcji w PDF vs korzystanie z trybu „Projekt w trakcie”
Monitorowałabym dominujące zachowania użytkowników. Jeśli przeważałaby opcja pobierania instrukcji w PDF, chciałabym pogłębić wtedy analizę potrzeb użytkowników. Zwłaszcza, że zachęcanie do korzystania z papierowej wersji instrukcji wiąże się z mniejszym śladem węglowym.

Dodatkowe metryki

  • Wskaźnik ukończonych projektów: czy odbiorcy chętnie realizują projekt z proponowaną instrukcją
  • Wskaźnik dodawanych projektów: czy użytkownicy chętnie współtworzą platformę
  • Opinie użytkowników i najczęściej zgłaszane problemy

Retrospekcja 4 L

Praca nad drugim projektem produktu z pewnością poszła mi szybciej. Poczułam, że przy wykorzystaniu wbudowanych funkcji w Figmie, wtyczek czy nawet gotowych komponentów, mogę poprawić swoją efektywność.

Ale szybciej to nie zawsze znaczy lepiej. Z pewnością opłaciłoby się przeznaczyć oszczędzony czas na testy użyteczności. Ich realizacja przy pracy nad aplikacją Creatour pokazała mi, że naprawdę nie zauważam wielu przeciwności i utrudnień we własnych projektach.

Ale za to widzę część rzeczy, które mogę kontynuować lub zrobić lepiej. Porcja najważniejszych lekcji ⤵️

Liked 👍

• Auto layout
Druga najważniejsza lekcja wyciągnięta z tego projektu. Nie ma życia bez auto layoutu. Na początku nie do końca go rozumiałam. Gdy jednak załapałam, do czego służy, korzystałam już z niego WSZĘDZIE.

• Wtyczki w Figmie
Pomogły mi przy generowaniu palety kolorystycznej (Foundation: Color generator), przy tworzeniu różnorodnych nazw użytkowników (Faker) oraz podczas weryfikacji kontrastów kolorystycznych (Simple WCAG 2.1).

Learned 🧠

• Za każdym razem, gdy omijasz coś w procesie, umiera na świecie jednorożec
I można się z tym pogodzić. Ale niepełny proces projektowy to zawsze mniejsze lub większe konsekwencje.

• Trzeba oszczędzać tam, gdzie to się opłaca
Skoro cięcia w procesie są czasami niezbędne, to warto oszacować, które będą najbardziej opłacalne. Dla przykładu, uznałam, że nie warto samodzielnie wymyślać kilkunastu nazw użytkowników, jeśli mogę ten proces z grubsza zautomatyzować. Ale już brak testów użyteczności mógł być dla mnie większym kosztem, niż korzyścią.

Lacked 💔

Kontekst biznesowy
To pomogłoby mi ustawić optykę na funkcje, które będą najbardziej kluczowe dla danej firmy. Czyli znowu chodzi o balans i na projekt, który uwzględnia również potrzeby biznesowe.

• Wiedza o spacingach
Dopiero po zrobieniu kursu z UI lepiej zrozumiałam ich rolę. A kurs zrobiłam po tym projekcie…

• Auto layout od początku projektu
Naprawdę bolesne było korzystanie lub edytowanie komponentów, w których nie użyłam tej funkcji. A późniejsze dodawanie auto layoutu było po prostu czasochłonne.

Longed for 👀

• Perspektywa developera
Czyli informacje, jak projektować i jak nazywać poszczególne komponenty oraz style, żeby ułatwić ich zaprogramowanie. Lub wskazówka, jakich komponentów nie tworzyć, tylko korzystać z tych natywnych.

• Określenie priorytetów
Myślę, że w niektórych miejscach poświęcam na coś za mało czasu, a w niektórych za dużo. Bez ustalenia priorytetów da się oczywiście pracować, ale z tą informacją mogłabym lepiej zarządzać swoim czasem.


To się może przydać

Opowiedziałam tylko kawałek historii na temat tworzenia Home By My Own. Kontynuację tej odpowiedzi znajdziesz w poniższych linkach.

→ Prototyp lo-fi w Figmie – mobile i desktop

→ Prototyp hi-fi w Figmie – mobile i desktop

→ Jeśli chcesz zajrzeć do pełnej dokumentacji, wyślij do mnie wiadomość e-mail i daj znać, co potrzebujesz.


Co dalej?

Mam na swoim koncie zaprojektowanie mobilnej aplikacji Creatour, a także kilka innych projektów, które zahaczają o UX design. Zapraszam 👐

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *