Zrzuć MVP, zastosuj minimalne realne prototypy (MVPr)

Dążenie do perfekcji to subtelna pułapka, która często prowadzi projektantów w niekończącą się pętlę iteracji i recenzji. Dotyczy to zwłaszcza świata produktów cyfrowych, gdzie każda interakcja i element graficzny może stać się obiektem obsesji projektowej.

Ale kiedy cofniemy się i zaobserwujemy interdyscyplinarny charakter cyfrowego projektowania produktów, łatwo zauważyć, jak projektanci wpadają w pułapkę perfekcji.

Pomyśl o wszystkich osobach i rolach zaangażowanych w projektowanie jednego produktu cyfrowego:

• Badacze designu
• Projektanci interfejsu użytkownika
• Architekci informacji
• Projektanci UX
• Projektanci produktów
• Menedżerowie produktu
• Stratedzy treści
• Eksperci marki
• Pisarze kopii UX
• itp.

W taki czy inny sposób każdy z tych przecina się. Na przykład interfejs użytkownika produktu nie może odnieść sukcesu, jeśli nie jest brane pod uwagę jego wrażenia użytkownika. Wraz z wzajemnymi powiązaniami pojawia się presja, aby zrozumieć, w jaki sposób decyzje projektowe wpływają na siebie nawzajem: „Jeśli zrobimy X, jak wpłynie to na Y i Z?”

Ten rodzaj prognozowania strategicznego może być cenny, ale może również spowodować stagnację procesu projektowania i utknięcie w przerażającej pętli doskonałości: „Musimy uzyskać X dokładnie, zanim będziemy mogli wykonać Y i Z” .

Więc jaka jest alternatywa? Czy istnieje sposób na szybkie tworzenie, uruchamianie, testowanie i ulepszanie produktów cyfrowych na podstawie rzeczywistych wskaźników i informacji uzyskanych od rzeczywistych ludzi?

W tym przewodniku odpowiemy na te pytania przez pryzmat minimalnych wykonalnych prototypów i wyposażymy projektantów w zdumiewająco prosty proces tworzenia, testowania i udoskonalania produktów cyfrowych.

Symuluj start z minimalnym wykonalnym prototypem

Nikt nic nie wie…… Ani jedna osoba na całym polu filmowym nie wie na pewno, co się uda. Za każdym razem jest to domysł, a jeśli masz szczęście, wykształcony. – William Goldman, zdobywca Oscara scenarzysta

Najwcześniejsze decyzje w procesie projektowania produktów cyfrowych są w najlepszym razie oparte na domysłach. Dopóki produkt nie znajdzie się w rękach rzeczywistych użytkowników, wszystko jest teoretyczne. Z drugiej strony wprowadzenie produktu, zanim będzie gotowy, może zaszkodzić jego reputacji (kosztowny błąd).

Co by było, gdyby istniał sposób na symulację wprowadzenia na rynek i określenie rentowności produktu na długo przed rozpoczęciem jakichkolwiek większych prac projektowych?

Jest to wartość minimalnego opłacalnego prototypu (MVPr), podejścia do projektowania produktu, które wymaga znacznie mniej czasu i pieniędzy niż bardziej znany „minimalnie opłacalny produkt”.

Oto przegląd procesu projektowania minimalnego opłacalnego prototypu (MVPr):

1. Odkrycie
2. Badania
3. Architektura informacji
4. Projekt wizualny
5. Początek
6. Test

Czekać! Czy nie jest to proces, którego wszyscy używają?

Tak, a zobaczymy, że opierając się na podstawowych elementach powyższych kroków, możemy z powodzeniem…

• Symuluj funkcjonalność prawdziwego produktu;
• Naśladuj wprowadzenie na rynek prawdziwego produktu; oraz
• Dowiedz się, czy warto zbudować prawdziwy produkt.

Krok po kroku: Jak zbudować MVPr

1. Odkrycie: zacznij podejmować decyzje

Świetnym sposobem na rozpoczęcie procesu odkrywania jest przeszukanie witryn, blogów i aplikacji podobnych do Twojego pomysłu. Dowiedz się o ich historii, rynkach docelowych, sposobie ich działania itp. Jeśli okaże się, że żaden z odpowiednich konkurentów nie robi tego, co robi twój prototyp, idź dalej.

Ten krok nie wymaga żadnej wiedzy specjalistycznej. Sekret polega na działaniu — przechodzeniu od zamiaru do działania.

Zwróć szczególną uwagę na mocne i słabe strony konkurencji. Jak możesz wykorzystać to, co już osiągnęli (lub czego nie udało się osiągnąć), aby wzmocnić swój prototyp?

Po 1-2 godzinach badań powinieneś być w stanie wskazać swoich najważniejszych konkurentów i poznać kluczowe aspekty każdego z nich.

2. Badania: zdefiniuj swoich użytkowników

Kto jest Twoim docelowym użytkownikiem i dlaczego powinien dbać o Twój produkt? Zrozumienie tego jest kluczowe, ale musimy zacząć od obliczonych założeń. Najlepiej zacząć od mocno ugruntowanej wizji. Nie zgaduj ani nie próbuj zrobić „coś dla każdego”. Nie chcemy rozwodnionego projektu.

Zamiast tego przyjrzyj się bliżej witrynom konkurencji znalezionym w fazie odkrywania i pozwól zdrowemu rozsądkowi namalować portret potencjalnych użytkowników.

Oto kilka praktycznych obszarów dochodzenia, które są łatwo dostępne w sieci:

• Odwiedź witryny z recenzjami i zobacz, co ludzie mówią o swoich doświadczeniach z konkurencją.
• Śledź influencerów z branży Twojego produktu w mediach społecznościowych i obserwuj, jak angażują swoich odbiorców.
• Szukaj renomowanych artykułów z wiadomościami, które szczegółowo opisują, jak działają Twoi konkurenci.
• Sprawdź interakcje konkurencji z ich użytkownikami w mediach społecznościowych.
• Sprawdź, czy możesz znaleźć fora, na których omawiane są problemy lub problemy konkurencji.

Cenne spostrzeżenia można uzyskać z każdej z tych dróg bez znacznych inwestycji finansowych. Jest to szczególnie ważne w przypadku małych zespołów projektowych, które pracują z niewielkim budżetem. Wielkie marki wydają znaczne pieniądze na badania, ale małe zespoły i indywidualni freelancerzy muszą znaleźć sposoby, aby być bardziej zaradnym.

3. Architektura informacji: ustrukturyzuj swój prototyp

Jak będzie działał prototyp i na czym należy się skupić?

Najłatwiejszym sposobem na rozpoczęcie odpowiedzi na to pytanie jest przeanalizowanie najlepszych witryn, które są podobne do budowanego prototypu. Ogólny wygląd i doświadczenie witryny, do której chcesz się odwołać, powinny być znakomite.

Zacznij od rozbicia witryny na kawałki. Jakie są wszystkie odpowiednie strony i jak mają strukturę wizualną? Nie bój się odwrócić szkieletu witryny, a następnie odtworzyć ją z własnymi informacjami, kolorami, obrazami itp.

Dlaczego zabierasz się do tego w ten sposób? Twoja witryna prawdopodobnie będzie działać w podobny sposób jak witryny konkurencji — masz po prostu inne cele. Nie ma potrzeby wymyślania złożonego systemu, jeśli użytkownicy dobrze reagują na ugruntowane doświadczenie.

*Wskazówka dla profesjonalistów: przy badaniu architektury informacji witryny pomocne jest robienie zrzutów ekranu i robienie ich w skali szarości, aby nie rozpraszać się wpływem koloru (co może być dość przekonujące).

Następnie skorzystaj z zasobów online, które pozwalają projektantom szybko przejść od zera do interaktywnego prototypu. Istnieje mnóstwo zestawów interfejsu użytkownika, szablonów HTML, motywów WordPress i tak dalej. Nie bój się ich modyfikować, aby pasowały do ​​twojego prototypu i nie martw się o doskonałość pikseli lub piękny kod. Na tym etapie nikogo to nie obchodzi. Obchodzi ich to, czy Twój produkt jest użyteczny, czy nie.

Oto jak to działa przy użyciu darmowego zestawu UI:

Co osiągnęliśmy na powyższym obrazku?

• Usunęliśmy wszystkie kolory i obrazy.
• Pasek nawigacyjny pozostał nietknięty.
• Funkcjonalność systemu filtrowania pozostała bez zmian, zmieniono jednak sformułowanie.
• Przeszliśmy z dwóch kolumn do jednej, aby lepiej zaprezentować obrazy, których planujemy użyć.

W niecałą godzinę mamy wizualną podstawę, na której możemy dalej rozwijać nasz prototyp.

4. Projekt wizualny: zmiana przeznaczenia bezpłatnych zasobów interfejsu użytkownika

Wizualnego wyglądu i stylu twojego prototypu nie można oddzielić od sposobu, w jaki działa. Nie chodzi tylko o grafikę. Efektowny projekt wizualny opowiada historię i zapewnia wrażenia o prawdziwej wartości.

Tutaj spójność wizualna jest kluczowa, ponieważ pomaga użytkownikom zapoznać się z produktem i efektywniej nawigować. Aby osiągnąć ten rodzaj spójności na wczesnym etapie tworzenia prototypu, mądrze jest zmienić przeznaczenie bezpłatnych zasobów interfejsu użytkownika.

Pracując w ten sposób, nie będziesz musiał spędzać godzin na opracowywaniu spójnego systemu projektowania. Zadbano o typografię, style przycisków, ikonografię i wszystkie inne ważne elementy interfejsu użytkownika.

5. Uruchom: Kodować czy nie kodować?

Czas podzielić się swoim prototypem ze światem. Na szczęście przekształcenie makiet w dynamiczne prototypy jest łatwiejsze niż kiedykolwiek. Dzięki wielu intuicyjnym narzędziom nie musisz nawet umieć kodować — ale czy powinieneś się uczyć?

MVPr bez kodu

Po zakończeniu projektowania wizualnego umieść prototyp na stronie docelowej, aby odwiedzający mogli wchodzić z nim w interakcję i przekazać ogólną opinię na temat Twojego pomysłu. Na tym etapie procesu projektowania MVPr istnieje kilka sposobów na stworzenie prototypu bez kodu. Oto twoje opcje:

Podstawowe prototypy

• InVision posiada wszystkie funkcje potrzebne do zbudowania i przetestowania podstawowego prototypu i zapewnia bezbolesne wrażenia bez komplikacji.

Prototypy multimedialne

• W przypadku skomplikowanych interakcji, przejść i animacji Zasada jest całkiem przydatna.

100% realistyczne prototypy

• Framer pozwala projektantom symulować dowolne wrażenia z produktów cyfrowych, jakie można sobie wyobrazić. Jest to idealna opcja, gdy prototyp musi wyglądać i czuć się realistycznie, jeśli chodzi o natywną animację i kodowanie oparte na logice (np. Jeśli to, zrób to).
• Webflow umożliwia projektowanie, tworzenie za pomocą kodu i uruchamianie responsywnych witryn internetowych na kanwie w 100% „to, co widzisz, to to, co dostajesz”.

Kliknij, aby zobaczyć obraz w pełnym rozmiarze.

Kodowany MVPr

Kod może być niesamowitym sprzymierzeńcem. Bez wątpienia to najlepszy sposób na zbudowanie Twojego produktu. Główną wadą jest to, że musisz wiedzieć, jak pisać kod, aby doświadczyć korzyści płynących z zaawansowanej personalizacji. Bez odpowiedniej bazy wiedzy decyzja o eksperymentowaniu z kodem spowolni Cię.

Istnieje wiele zestawów startowych do kodu, które pomogą Ci toczyć piłkę. Na przykład zestaw interfejsu użytkownika, który wprowadziliśmy powyżej, ma własną wersję HTML dostępną do pobrania:

6. Test: Wykorzystaj statystyki reklam

Sekretny sos do testowania prototypu tkwi w narzędziach, które pozwalają uzyskać jak najlepszy wgląd przy najmniejszym nakładzie pracy, a jednocześnie zapewniają wartość. Wszystko czego potrzebujesz to kilka dolarów i trochę cierpliwego rozwiązywania problemów.

Praktycznym pierwszym krokiem w kierunku zmierzenia zainteresowania Twoim produktem jest stworzenie reklamy i skierowanie jej do osób znalezionych w fazie badań. W zależności od odbiorców i rodzaju projektowanego produktu możesz wyświetlać reklamy w Google, LinkedIn, Instagramie lub Twitterze. W przypadku produktów typu business-to-consumer zalecany jest Facebook.

*Wskazówka dla profesjonalistów: AdEspresso to wygodne miejsce do jednoczesnego uruchamiania setek wersji reklam społecznościowych i zbierania przydatnych analiz porównawczych.

Wyświetlaj reklamy, a dowiesz się dwóch rzeczy:

1. Liczba osób, które obejrzały Twoją reklamę
2. Liczba osób, które kliknęły Twoją reklamę

Gdy potwierdzisz, że docelowi odbiorcy są zainteresowani zaangażowaniem się w Twoje reklamy, musisz stworzyć wartość dla pierwszych użytkowników. Oto jak:

• Dodaj formularz „subskrybuj” i poproś użytkowników o podanie swojego adresu e-mail.
• Kontynuuj, aby dać im znać, kiedy zaczynasz.
• Upewnij się, że Twoje kanały mediów społecznościowych są uruchomione i działają, dzięki czemu możesz tworzyć przyciski społecznościowe, które pozwolą użytkownikom rozpowszechniać informacje o Twoim produkcie.

Skorzystaj z tej strategii, a zyskasz:

• Lista adresów e-mail, które można wykorzystać we wczesnych działaniach marketingowych
• Osoby polecające Twój produkt w swoich sieciach osobistych i zawodowych
• Lepsze zrozumienie, czy ktoś jest podekscytowany Twoim produktem, czy nie

Gdy po raz pierwszy otrzymasz prawdziwą opinię, Twój produkt jest aktywny. Dzięki temu cyklowi dostarczania wartości, analizowania zachowań i iteracji rozwiązań dowiesz się, co działa, a co nie, i zbliżysz się do produktu, którego ludzie rzeczywiście chcą używać.

Uruchom i ucz się ze śmiałością

Ostatecznym celem minimalnego wykonalnego prototypu jest: szybkie i pewne przejście od wykształconych domysłów projektowych do rzeczywistych, praktycznych informacji zwrotnych.

Jest to proces, który obejmuje niepewność i błędy jako możliwości poprawy. Przede wszystkim nagradza działanie. Dobry projekt wymaga odważnych decyzji i chęci pójścia naprzód w obliczu niedoskonałości.

Nie daj się więc ugrzęznąć w dążeniu do perfekcji i staraj się nie porównywać z megamarkami i ich ogromnymi zasobami. Idź dalej, a wkrótce znajdziesz znacznie dopracowany produkt, z którego ludzie będą korzystać z radością.

• • •

Dalsza lektura na blogu Toptal Design:

1. Łatwość tworzenia prototypów — samouczek InVision Studio
2. Jak przeprowadzić skuteczny sprint projektowy
3. Kto wiedział, że Adobe CC może model szkieletowy?
4. Testowanie UX dla mas: proste i efektywne kosztowo
5. Mapy podróży klientów — czym są i jak je zbudować