Od informacji po prototypowanie — Transcript

Lekcja pokazuje, jak przejść od hipotez produktowych generowanych przez Miro AI do modyfikowalnych prototypów aplikacji fitness.

Key Takeaways

Miro AI umożliwia szybkie prototypowanie aplikacji na podstawie user flow i promptów tekstowych.
Prototypy są w pełni modyfikowalne, co eliminuje potrzebę zaawansowanych umiejętności designerskich.
AI generuje różne wyniki, dlatego precyzyjne promptowanie jest kluczowe dla powtarzalności.
Prototypy zawierają interaktywne przepływy między ekranami, co ułatwia prezentację koncepcji.
Narzędzie jest w wersji beta, więc mogą występować drobne błędy, ale funkcjonalność jest bardzo praktyczna.

Summary

Prezentacja procesu tworzenia prototypów aplikacji na podstawie user flow wygenerowanego przez Miro AI.
Omówienie funkcji 'Prototypuj' w Miro, która pozwala tworzyć prototypy z promptu tekstowego lub ze zrzutu ekranu.
Wybór typu aplikacji (telefon, desktop, tablet) oraz liczby ekranów (pojedynczy lub wieloekranowy).
Przykład aplikacji fitness z ekranami: logowania, mapy zajęć, szczegółów zajęć, płatności i potwierdzenia rezerwacji.
Każdy element interfejsu w prototypie jest modyfikowalny bez potrzeby znajomości narzędzi designerskich.
Miro generuje przepływy między ekranami, co ułatwia wizualizację ścieżki użytkownika.
Prototypy mogą mieć drobne niedoskonałości, ale dobrze oddają funkcjonalność i wygląd aplikacji.
AI działa probabilistycznie, więc wyniki generowania mogą się różnić przy kolejnych próbach.
Im bardziej precyzyjny prompt, tym lepsza powtarzalność i jakość generowanych prototypów.
Prototypy można łatwo dostosować do potrzeb klienta, użytkowników czy interesariuszy biznesowych.

Full Transcript — Download SRT & Markdown

Speaker A

W tej lekcji, bardzo praktycznej, przejdziemy sobie od hipotez produktowych wygenerowanych nam przez Miro AI do konkretnych prototypów aplikacji, które będziemy w stanie modyfikować i pokazać na przykład naszym klientom, użytkownikom czy interesariuszom biznesowym.

Speaker A

Więc zaczynajmy. Tak jak pokazywałem w poprzedniej lekcji, Miro na podstawie transkryptów rozmów z użytkownikami wygenerował nam kilka pomysłów na user flow, czyli w jaki sposób ta ścieżka użytkownika ma wyglądać w aplikacji. Mamy pięć różnych pomysłów, więc wybieramy naszą pierwszą hipotezę produktową,

Speaker A

którą wygenerował nam Miro i która nam najbardziej odpowiada. Wybieramy w lewym górnym rogu przybornik "Stwórz z AI".

Speaker A

I tutaj mamy funkcję "Prototypuj". Ona jest jeszcze w wersji beta, ale jak na wersję beta działa całkiem dobrze.

Speaker A

I możemy w tej opcji prototypowania stworzyć prototyp albo z promptu tekstowego, co zaraz uczynimy, albo ze zrzutu ekranu, co pokażę wam za chwilę.

Speaker A

Więc wybieramy, że chcemy to zrobić za pomocą promptu tekstowego. No i później on nas pyta, jaki rodzaj aplikacji to ma być.

Speaker A

Czy na telefon, desktop, czyli na laptopa, komputer, czy na tablet. Wybieramy oczywiście telefon. No i pyta nas, czy to ma być prototyp pojedynczego ekranu, czy kilku ekranów. Ponieważ ta hipoteza produktowa, którą sobie tutaj stworzyliśmy, ona opiera się na user flow,

Speaker A

czyli na przepływie użytkownika, na ścieżce użytkownika i mamy tutaj kilka pomysłów na kilka ekranów, to zrobimy sobie aplikację wieloekranową, czyli zaznaczam tutaj multiscreen flow.

Speaker A

I oprócz tego on oczywiście potrzebuje tego promptu tekstowego. Czyli napiszemy mu tak: "Na podstawie user flow, poniżej przygotuj prototyp aplikacji fitness." I wklejamy tę naszą hipotezę produktową tutaj.

Speaker A

Klikamy Enter i w międzyczasie on generuje. Wygenerowanie takiego prototypu może potrwać chwilę, ponieważ on nie generuje tekstu jak w poprzednich przykładach, tylko faktycznie ekrany aplikacji, razem też z przepływami pomiędzy nimi, więc to może chwilę potrwać. Ale proponuję, żebyśmy zobaczyli,

Speaker A

co przygotowałem przed naszą lekcją. Czyli on tutaj generuje, a w międzyczasie spojrzymy sobie na aplikację, którą wygenerowałem dla was przed dzisiejszą lekcją.

Speaker A

Wygenerowałem ją na podstawie trochę innej hipotezy produktowej, podobnej bardzo, ale również wynikającej z tych transkryptów z rozmów z użytkownikami.

Speaker A

Dlaczego innej, a nie tej samej? I tutaj warto wspomnieć o tym, że AI jest narzędziem probabilistycznym, tak?

Speaker A

Czyli tak naprawdę nie ma gwarancji, że on wygeneruje nam za każdym razem te same wyniki, ponieważ on operuje na skali prawdopodobieństwa. Czyli on próbuje tak naprawdę odgadnąć na podstawie naszej instrukcji dla niego, co jest poprawną odpowiedzią. I czasem on może zgadnąć trochę

Speaker A

bardziej w lewo, trochę bardziej w prawo. Te odpowiedzi mogą się różnić o 5%, czasem o 10%.

Speaker A

Wszystko zależy od tego, jak precyzyjny jest prompt. Jak widzieliście dzisiaj, mój prompt generujący hipotezy produktowe był dość precyzyjny, dlatego ta powtarzalność między tym, co przygotowałem dla was wcześniej, a dzisiaj - jest dość wysoka. Natomiast zobaczmy sobie tę aplikację, którą wygenerowałem dla was wczoraj.

Speaker A

Jak widzicie, jest ekran logowania, jest ekran mapy z podglądem zajęć i trenerów, jest ekran szczegółów zajęć, ekran płatności i wreszcie ekran potwierdzenia umówienia zajęć.

Speaker A

No i teraz co jest szczególnie interesujące w Miro, jeżeli chodzi o prototypowanie, to to, że każdy element tego interfejsu, który tutaj widzicie, jest modyfikowalny. Co to oznacza?

Speaker A

Spójrzmy tutaj na ten konkretny ekran naszej aplikacji fitness. Widzimy tutaj ekran podglądu zajęć Zenith Yoga Studio z trenerką Sarah Mitchell.

Speaker A

I to, co jest tutaj szczególnie interesujące, to poza tym, że mamy tutaj kompletny interfejs użytkownika, czyli widzimy tutaj szczegóły dotyczące zajęć, takie jak godzina, czas trwania, jaki poziom trudności tych zajęć, ile zostało pozostałych miejsc i oczywiście guzik do umówienia wizyty. To co jest szczególnie interesujące

Speaker A

i praktyczne w kontekście prototypowania, czy to aplikacji, czy stron internetowych, jest to, że każdy element tego interfejsu tutaj jest klikalny.

Speaker A

Czyli możemy sobie przesunąć imię i nazwisko Sary Mitchell razem z jej ocenami tutaj na prawą stronę.

Speaker A

Możemy przesunąć tutaj zdjęcie. Możemy w inny sposób ułożyć tutaj interfejs, na przykład przesunąć czas trwania w ten sposób, spłaszczyć go w ogóle, żeby on zajmował trochę mniej miejsca.

Speaker A

Generalnie rzecz biorąc, jesteśmy w stanie bawić się tym interfejsem i dokonywać w nim zmian z poziomu Miro, co oznacza, że nie potrzebujecie tak naprawdę ani znajomości narzędzi dla designerów, projektantów, ani umiejętności budowania aplikacji czy jakichś zaawansowanych prototypów. Czyli tak jak widzicie to,

Speaker A

co tutaj teraz robię na ekranie, mogę całkowicie zmienić tutaj tę sekcję Hero, gdzie zwiększymy sobie po prostu informacje o naszym trenerze, bo uznajemy, że dla naszych użytkowników jest ważne, żeby dobrze widzieć, kto tym trenerem będzie.

Speaker A

I widzicie, mamy zupełnie inny układ informacji na tej stronie. To, co Miro robi również w takim wypadku, kiedy tworzymy user flow, to tworzy również przepływy pomiędzy poszczególnymi ekranami.

Speaker A

Czyli tutaj, jeżeli mamy przycisk Get Started, czyli zacznijmy pracę z naszą aplikacją, on pokazuje, do jakiego ekranu ten guzik powinien prowadzić.

Speaker A

W tym wypadku do ekranu mapy z różnymi zajęciami. Przycisk Book Now powinien kierować, tak jak widzicie tutaj, do ekranu płatności. I ponownie, na ekranie płatności każdy element tego interfejsu jest modyfikowalny, więc możemy sobie zamienić miejscami tutaj metody płatności

Speaker A

i na przykład uznać, że karta jest pośrodku. Te prototypy nie są idealne, oczywiście, one mają jakieś tam artefakty, nie wszędzie wszystko będzie zawsze równe.

Speaker A

Tutaj, jak widać, na przykład to nie jest idealne kółeczko. Czasem będą jakieś rozjazdy, jeżeli chodzi o czcionki, ale co do zasady one są w stanie przekazać, w jaki sposób aplikacja powinna wyglądać i jakie funkcje powinna posiadać.

Speaker A

Omówiliśmy sobie przykład, który przygotowałem dla was wcześniej, natomiast spójrzmy na tę aplikację, którą wygenerowałem teraz na żywo w trakcie kręcenia dzisiejszej lekcji. Na podstawie ścieżki użytkownika, którą wygenerowaliśmy z transkryptów rozmów z użytkownikami, Miro przygotował nam taki prototyp aplikacji, a więc widzimy,

Speaker A

mamy pierwszy ekran, jest to ekran mapy. Zgadza się to z naszym pierwszym ekranem z listy pomysłów, ekran mapy, listy. I na tej mapie mamy zaznaczone zajęcia różnymi kolorami: joga, pilates, crossfit, taniec. Różne filtry, można przełączać się między mapą a listą. Poniżej od mapy mamy listę.

Speaker A

Jak widzicie, tak jak wiele aplikacji, mamy tutaj na dole taki przybornik, menu z głównymi opcjami. Po kliknięciu na przykład w zajęcia jogi, tak jak widzicie tutaj, strzałeczka nas prowadzi do zajęć, to znaczy do ekranu ze szczegółami, z podglądem tych zajęć, czyli zajęcia jogi

Speaker A

dla początkujących. Tutaj wygenerował jakiś guzik, ale prawdopodobnie powinno tutaj być po prostu jakieś zdjęcie poglądowe. I z tego ekranu, jak klikniemy "więcej informacji", wysyła nas na profil trenera, gdzie mamy informacje o naszym trenerze personalnym, który będzie prowadził te zajęcia: o mnie, certyfikaty,

Speaker A

styl prowadzenia zajęć, opinie od konkretnych osób i dostępne zajęcia u tego trenera. No i wreszcie ekran płatności.

Speaker A

Czyli Miro wygenerowało nam hipotezę, w której pomysł brzmiał tak, że mają być cztery ekrany: ekran mapy, listy, ekran szczegółów zajęć, profil trenera i ekran rezerwacji. I wywiązał się z tego zadania, wygenerował nam te ekrany. One nie są idealne,

Speaker A

bo ta funkcja jest w wersji beta nadal, ale im bardziej precyzyjny prompt, im więcej mu zadamy tego kontekstu, tym bardziej precyzyjnie on będzie generował te prototypy.

Speaker A

Natomiast tak jak w przypadku tego poprzedniego prototypu, wszystko tutaj jest modyfikowalne, więc jesteśmy w stanie tak naprawdę ten prototyp zmienić i dostosować do naszych potrzeb, dodać jakieś zdjęcia, zmienić obrazki, poprzekładać jego różne elementy.

Speaker A

Sł

Speaker A

które są w stanie modyfikować z poziomu tablicy na Miro. Stworzyliśmy sobie prototyp aplikacji z hipotezy wygenerowanej nam przez sztuczną inteligencję.

Speaker A

Generalnie rzecz biorąc, takie prototypy można tworzyć po prostu z promptów, które zadamy sztucznej inteligencji.

Speaker A

Ale to, co możemy zrobić również, to możemy stworzyć prototyp z istniejącej aplikacji. Czyli jeżeli już macie jakąś aplikację albo już macie jakąś stronę internetową, którą chcielibyście zmodyfikować tutaj w Miro, to również możecie to zrobić.

Speaker A

I pokażemy to na przykładzie istniejącej aplikacji, z której ja sam korzystam, czyli BodyVibes. I przed naszymi zajęciami zrobiłem kilka zrzutów ekranu z tej aplikacji.

Speaker A

Tutaj po prostu są konkretne zrzuty ekranu. Jak widzicie, to są po prostu obrazki, czyli mamy tutaj jakieś zajęcia, kickboxing, mamy listę zajęć. Tą listę zajęć można sobie filtrować po godzinie, po dniach.

Speaker A

Widać, ile miejsc jest wolnych. Jest jakiś ekran potwierdzenia rezerwacji i wreszcie mapa. Więc mając zrzuty ekranu naszej aplikacji mobilnej albo strony internetowej, ponownie wybieramy przybornik Miro AI, opcję Prototype.

Speaker A

I teraz zamiast promptu tekstowego wybieramy screenshot, czyli zrzut ekranu. A następnie rodzaj aplikacji, czyli mobile, desktop, tablet, tak jak w poprzednim przykładzie.

Speaker A

Wybieramy aplikację mobilną i teraz Miro nas prosi o wgranie zdjęcia. Mam tutaj przygotowanych kilka zrzutów ekranu, tak jak widzieliście, klikam Otwórz, one się uploadują i on w tej chwili przerabia zrzut ekranu, który mu wysłałem, na prototyp, który też będziemy w stanie modyfikować.

Speaker A

Kiedy on to robi, możemy spojrzeć sobie na przykłady, które wygenerowałem dla was wcześniej. Czyli tak jak widzicie, mamy tutaj ekran kickboxingu, mamy ekran zajęć i ekran mapy. Możemy je sobie nawet porównać jeden do jednego, czyli biorę zrzut ekranu z BodyVibes,

Speaker A

biorę listę zajęć i mapę zajęć i porównujemy. Jak widać, to co jest na dole, to są screenshoty z aplikacji, a to, co mamy na górze, to są prototypy przygotowane w Miro. Są drobne różnice, oczywiście, ale co do zasady funkcjonalności pozostają te same. I ponownie,

Speaker A

tak jak w przykładzie poprzednim, czyli aplikacjach, które wygenerowaliśmy sobie z promptów tekstowych, tak i tutaj możemy modyfikować sobie cały ten interfejs i dowolnie się nim bawić, zmieniać sobie przyciski, w jaki sposób one się będą układały, jaka będzie ich treść.

Speaker A

Generalnie rzecz biorąc, modyfikując sobie cały tutaj wygląd tej aplikacji, po to, żeby w bardzo tani, zasadniczo bezkosztowy sposób modyfikować interfejs i pokazywać go naszym użytkownikom czy użytkowniczkom i pytać, czy na przykład taki ekran kickboxingu, w sensie podglądu zajęć, spełnia wasze oczekiwanie,

Speaker A

czy jest bardziej czytelny, czy dzięki niemu macie więcej informacji, które chcecie znaleźć. Podobnie tutaj na przykładzie tej mapy, no mapa jest akurat zrzutem ekranu, tylko część z tych znaczków jest zaznaczona, że można je sobie przekładać. No ale dolna część tego

Speaker A

interfejsu oczywiście jest ruchoma i można nim zarządzać. Spójrzmy, w jaki sposób poradził sobie z wygenerowaniem prototypu na podstawie screenshotu.

Speaker A

To jest to, co się zadziało właśnie przed chwilą. Ten screenshot, który wgrałem mu. I jak widzicie, powtarzalność jest dość wysoka, czyli jeżeli porównamy sobie screenshot, który wygenerowałem przed lekcją, ze screenshotem, który wygenerowałem w trakcie lekcji, to widzicie, że tutaj one są praktycznie identyczne.

Speaker A

I też ponownie można sobie tutaj tymi elementami zarządzać, przekładać je, zmienić, nie wiem, rozmiar zdjęcia, jak duże chcemy, żeby były te zdjęcia, żeby podglądy tych zajęć były.

Speaker A

Przesuwać sobie, zmieniać kolory tego interfejsu i robić generalnie bardzo dużo różnych rzeczy z nim, dostosowywać go do naszych hipotez czy do potrzeb naszych użytkowników.

Speaker A

To, w jaki sposób ja pracuję z tego typu zrzutami ekranu, wygląda w taki sposób, że my często robimy zrzuty ekranu istniejących elementów naszej strony, czyli GOG-a, i na bieżąco, w trakcie spotkania razem z designerami, programistami, po prostu się

Speaker A

nim bawimy i modyfikujemy go. Ta funkcja jest szczególnie przydatna, kiedy prowadzicie warsztaty z klientami albo interesariuszami biznesowymi i chcecie oddać im kontrolę nad designem. W naturalny sposób interesariusze biznesowi czy klienci nie zawsze będą umieli obsługiwać narzędzia do designu. Dzięki Miro są w stanie

Speaker A

tak naprawdę myszką pozmieniać interfejs albo istniejącej, albo prototypowanej aplikacji zupełnie tak łatwo, jakby układali slajdy w PowerPoincie.

Speaker A

Z perspektywy współpracy z klientem czy z interesariuszami jest to dość rewolucyjne, a na pewno bardzo ułatwia moją pracę.

Speaker A

Przez ostatnie 30 minut przeszliśmy przez kompletny cykl. Od surowych danych z badań użytkowników do gotowych prototypów aplikacji. Co konkretnie udało nam się osiągnąć? Po pierwsze, wygenerowaliśmy konkretne hipotezy produktowe z chaotycznych transkryptów wywiadów z użytkownikami. Zamiast godzin ręcznej analizy

Speaker A

wykorzystaliśmy AI w Miro do automatycznego wyciągania kluczowych wniosków i przekształcenia ich w hipotezy produktowe. Po drugie, przetestowaliśmy funkcję OCR, która w kilka sekund przekształciła zdjęcie tablicy z fizycznymi karteczkami w edytowalne cyfrowe notatki.

Speaker A

To coś, co normalnie zajęłoby kilka godzin ręcznej roboty. I po trzecie, na podstawie zebranego feedbacku stworzyliśmy od zera prototyp aplikacji fitness, pokazując kompletne user flow od ekranu głównego po proces rezerwacji, a dodatkowo wzięliśmy istniejącą aplikację i dostosowaliśmy ją do potrzeb

Speaker A

naszych użytkowników. Jak widzieliście, wszystko to zajęło naprawdę kilkanaście minut. To pokazuje, jak potężnym narzędziem jest Miro w połączeniu z AI do prototypowania i przetwarzania danych z badań nad użytkownikami.

Speaker A

Miro wypełnia idealną niszę pomiędzy tradycyjnym designem a nowoczesnymi AI builderami. Dla osób, które chcą powarsztatować z designem i przejść przez proces myślowy, ale niekoniecznie od razu tworzyć działające prototypy, to doskonały wybór. Jesteśmy w stanie w jednym miejscu wygenerować prototypy w formie obrazków,

Speaker A

pobawić się nimi na spotkaniu zespołu, a później te zrzuty ekranu czy user flow można po prostu skopiować do narzędzi takich jak Lovable, V0 czy Bolt i one z tych designów są w stanie stworzyć działającą aplikację.

Speaker A

Jeśli chcecie oszczędzić czas i przewarsztatować różne podejścia do UX-u czy funkcjonalności waszych produktów, Miro to świetny krok pomiędzy zebraniem feedbacku od użytkowników a budowaniem działających aplikacji.

Speaker A

AI fundamentalnie zmienia sposób, w jaki budujemy produkty cyfrowe. Największą korzyścią nie jest to, że maszyny robią za nas całą pracę, ale to, że zostaje nam więcej czasu na myślenie, co tak naprawdę zbudować, jak najlepiej rozwiązać problemy użytkowników. Mniej czasu marnujemy

Speaker A

na tworzenie zaawansowanej dokumentacji czy specyfikacji, bo jeden obraz rzeczywiście wart jest tysiąca słów. Dzięki temu możemy szybciej zacząć testować z użytkownikami prototypy wysokiej jakości i efektywnie skrócić cały proces produkcji oprogramowania nawet o 50% lub więcej.

Speaker A

Jak widzicie, to przyszłość budowania produktów. Szybka iteracja od pomysłu, przez prototyp, do działającej aplikacji z użytkownikiem w centrum całego procesu.

Speaker A

Jestem przekonany, że już niebawem sami będziecie korzystali z aplikacji stworzonych w taki sposób. Mam nadzieję, że jesteście równie zainspirowani tym tematem, jak ja.

Speaker A

Korzystam z tych narzędzi na co dzień i liczę na to, że chociaż część z was też ich spróbuje.

Speaker A

Ja nazywam się Wojtek Strzałkowski i w razie pytań jestem do waszej dyspozycji. Zapraszam do kontaktu.

Topics:Miro AIprototypowanie aplikacjiuser flowhipotezy produktoweaplikacja fitnessprojektowanie UXinterfejs użytkownikanarzędzia AIprototypy wieloekranowepromptowanie AI

Frequently Asked Questions

Jak działa funkcja 'Prototypuj' w Miro AI?

Funkcja 'Prototypuj' pozwala tworzyć prototypy aplikacji na podstawie promptu tekstowego lub ze zrzutu ekranu. Użytkownik wybiera typ aplikacji i liczbę ekranów, a Miro generuje interaktywne ekrany z możliwością modyfikacji.

Czy prototypy generowane przez Miro AI są w pełni gotowe do użycia?

Prototypy są funkcjonalne i modyfikowalne, ale mogą zawierać drobne niedoskonałości, ponieważ narzędzie jest w wersji beta. Służą głównie do wizualizacji i prezentacji koncepcji aplikacji.

Czy potrzebne są specjalistyczne umiejętności, aby modyfikować prototypy w Miro?

Nie, każdy element interfejsu w prototypie jest klikalny i można go łatwo przesuwać lub zmieniać bez znajomości zaawansowanych narzędzi designerskich czy programowania.

Get More with the Söz AI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

App Store Google Play

Or transcribe another YouTube video here →