WordPress jako narzędzie do tworzenia prototypu produktu

Prezentacja nowego projektu przed zarządem? Rozwijanie korporacyjnego startupu? A może próba pozyskania inwestora? W każdej z tych sytuacji musimy zmierzyć się ze stworzeniem prototypu rozwiązania, które chcemy przedstawić. Same słowa nie opowiedzą o nowym, innowacyjnym projekcie tak dobrze, jak jego interaktywna prezentacja. Duże projekty IT są wyjątkowo kosztownym przedsięwzięciem, dlatego zanim zapadnie decyzja o ich realizacji, tworzone są prototypy. Jak się okazuje, system WordPress, dzięki swojej elastyczności i wielofunkcyjności, nadaje się do tego celu idealnie. Jednocześnie jest to rozwiązanie stosunkowo niedrogie i oferujące potężną funkcjonalność. W niniejszym artykule opowiemy o tym, jak wykorzystać je przy tworzeniu prototypu nowego produktu.

Foto: YAY Foto/ leungchopan

Prototypowanie to metoda tworzenia pierwszych wersji finalnego produktu. Pozwala ona twórcom, już na wczesnym etapie budowania nowego rozwiązania, testować swoje pomysły, a nawet otrzymać feedback od pierwszych użytkowników. Dzięki wczesnym prototypom, ich twórca oszczędza czas oraz ogranicza koszty wprowadzenia rozwiązania, które finalnie może okazać się niesatysfakcjonujące dla klientów.

Podstawową ideą generowania prototypów jest cykliczne powtarzanie aktywności tzw. prototypowania, rewizji i ulepszania kolejnych iteracji – zobrazowanych poniżej. Metoda ta pozwala przejść od idei do funkcjonalnego produktu tak szybko, jak to możliwe. Każdy napotkany po drodze problem powinien zostać rozwiązany potencjalnie jak najszybciej, tworząc tym samym lepszą wersję produktu w błyskawicznym czasie. W idealnym świecie ten proces powinien trwać również po jego uruchomieniu, zgodnie z zasadami metodologii zwinnych.

Etapy procesu prototypowania

Proces ten można podzielić na 3 fazy:

  1. Wczesną, czyli etap szkicowania, podczas której pomysły zostają pierwszy raz zobrazowane. Jej efektem powinien być najprostszy możliwy prototyp interfejsu tzw. „low-fidelity prototype”. Do wykonania tej fazy wystarczy zwykła kartka papieru, ale oczywiście do dyspozycji mamy  różnego rodzaju aplikacje, które mogą znacząco usprawnić pracę.
  2. Rozbudowaną, w której dodajemy prototypowi więcej „życia”. Pojawiają się kolory, a elementy układane są na specjalnej siatce. W tym momencie możemy skorzystać z gotowych szkieletów bazowych („bootstrap”). Na tym etapie mamy do czynienia z „medium-fidelity prototype” – powinien on reprezentować wszystkie kluczowe elementy produktu. W zależności od tego jaką aplikację wybierzemy do stworzenia tej wersji prototypu, możliwe jest również dodawanie prostych interakcji, ekranów czy animacji.
  3. Finalną, w której powstaje funkcjonalny prototyp produktu, czyli tzw. „high-fidelity prototype”. Programy wykorzystane do stworzenia efektu końcowego pozwalają naśladować funkcjonalności gotowego rozwiązania. Jego wysoce interaktywna wersja często nadaje się już do prezentacji pierwszym użytkownikom w ramach beta testów. Na tym etapie można pójść o krok dalej i przejść z prototypowania do MVP. Żeby było to jednak możliwe, demonstrowana wersja produktu nie może być tylko kolażem interaktywnych makiet i animowanych elementów. Wprowadzenie podstawowych funkcjonalności transformuje prototyp do funkcjonalnego produktu. Jedną z dróg, aby tego dokonać, jest skorzystanie z systemu CMS WordPress.

WordPress jako prototyp produktu

WordPress, dzięki swojej łatwości w obsłudze i elastyczności, idealnie nadaje się do tworzenia wczesnych wersji produktu, które mogą zostać poddane testom użytkowników. Jego finalna wersja jednak wcale nie musi być oparta na WordPressie. Bogata paleta motywów z wbudowanymi narzędziami, tzw. „builderami”, zaawansowane formularze, wtyczki e-commerce, czy integracje, to zestaw gotowych rozwiązań, które pozwalają odtworzyć niemal wszystkie funkcjonalności ostatecznej wersji produktu.

Od czego jednak zacząć? Przejście przez gąszcz wtyczek i motywów nie jest łatwe. Nietrudno trafić na wadliwy produkt, dlatego też poniżej prezentuję subiektywny wybór popularnych rozwiązań, dzięki którym można stworzyć podstawowy, ale jakże zaawansowany „prototyp” (cudzysłów użyty został dlatego, iż  wiele startupów zaczynało od strony opartej na CMS WordPress i bardzo długo działało w takim modelu. Nie wierzycie? A słyszeliście o Grouponie?) .

Podzielmy zatem prototyp na bazowe elementy, z których będzie składać się projekt, w tym przypadku strona www:


1) Layout
, czyli tzw. motyw . Co prawda każde narzędzie do prototypowania znacznie ułatwia budowanie motywów przez edytor drag&drop, jednak w przypadku WordPressa mamy więcej dostępnych możliwości. Poniżej kilka motywów i wtyczek pomagających budować wizualną część strony.

a) Edytory drag&drop – najbardziej popularne z nich to chociażby Page Builder od SiteOrigin lub Beaver Builder. Zanim zaczniecie jednak korzystać z konkretnego edytora, zachęcam do ich wcześniejszego przetestowania. Na rynku dostępnych jest sporo rozwiązań, zarówno komercyjnych, jak i bezpłatnych, dzięki temu wybierzecie najbardziej odpowiednie dla Was narzędzie.

b) Biblioteki shortcode – wtyczki oparte na shortcode’ach pozwalają budować uprzednio stworzone elementy strony, poprzez wklejenie odpowiedniego shortcode’a w treści. Do tego celu można wykorzystać plugin Shortcodes Ultimate, bądź Awesome Studio.

c) Motywy drag&drop – oferują wtyczki, które pozwalają tworzyć wszelakie elementy wizualne, ponadto mamy do dyspozycji wyjątkowo rozbudowane motywy, które dodatkowo posiadają edytory wizualne. Będą to na przykład: Divi, Make czy X | The Theme. Te uniwersalne wzory pozwalają szybko tworzyć najróżniejsze strony i podstrony naszego produktu.

2) Formularze to chyba drugi, po menu, najbardziej typowy interaktywny element każdej witryny. Tutaj znaczną przewagę nad typowymi narzędziami do prototypowania ma właśnie WordPress, gdyż wstawione formularze nie są tylko odzwierciedleniem ale pełną funkcjonalnością. Co więcej, pozwalają one już w pierwszych wersjach produktu zbierać bazę adresów e-mail do potencjalnych klientów, formatować wiadomości czy nawet zapisywać je w formie newslettera. Najbardziej znane i sprawdzone wtyczki do wykorzystania przy tworzeniu formularzy to: Gravity Forms, Ninja Forms oraz nieco uboższe w funkcjonalności, ale darmowe, Contact Form 7.

3) Struktura treści – w szybkim prototypowaniu czas to pieniądz, dlatego aby go zaoszczędzić, można powtarzające się elementy strony ustrukturyzować. W świecie WordPressa większość takiej treści przechowywana jest jako tzw. „custom post” lub „custom fields”. Pola te magazynują jej część, która prezentowana jest w kilku miejscach. Korzystanie z tego typu rozszerzeń wymaga jednak podstawowej wiedzy o tym, jak funkcjonuje WordPress. Aby uniknąć duplikowania treścii zoptymalizować pracę korzystamy więc z wtyczek takich jak: Advanced Custom Fields, Toolset Types czy Custom Post Type UI.

4) Użytkownicy – aby pierwsi odwiedzający stali się prawowitymi użytkownikami, powinni mieć możliwość utworzenia konta, które na przykład daje dostęp do ukrytej publicznie treści. Żeby mogli skorzystać z takiej funkcjonalności, możemy posilić się wtyczkami kompleksowo zarządzającymi tworzeniem i edycją kont, np. MemberPress czy Restrict Content Pro lub wersją budżetową – s2Member.

5) Pozostałe elementy to typowe funkcjonalności strony, o których należy pamiętać, czyli wtyczki do mediów społecznościowych (np. BuddyPress), e-commerce (WooCommerce), wydarzeń (np. The Events Calendar).

Tworząc prototyp oparty na systemie WordPress idziemy o krok dalej niż konkurencja. Podczas, gdy inni prezentują swój pomysł w formie animowanych makiet, Ty śmiało możesz zbierać już informacje
o pierwszych klientach. Bogactwo dostępnych rozwiązań pozwala na tworzenie nawet wyjątkowo skomplikowanych rozwiązań. Co więcej, WordPress nadaje się również do przygotowania wczesnych wersji korporacyjnych startupów, gdzie odpowiednio zabezpieczony, spisze się w tej roli doskonale. Ponadto, korzystając z takiego podejścia, możemy tworzyć rozwiązanie podstawowe i generować dowolną liczbę podobnych mu wersji.

Tadeusz Tutak z Inspire Labs

Komentarze

Janusz Kamiński

4 stycznia 2018 Odpowiedz

WordPress jest dobry produktem i dlatego według kilku ostatnich lat jest całkowitym liderem rynku. 🙂

Komentarze

Dodaj komentarz

*
*