馃帹 uxowy.dev #9
9 min czytania

馃帹 uxowy.dev #9

Kr贸tszy tydzie艅 pracy w艂a艣nie si臋 ko艅czy, a w przysz艂ym tygodniu zn贸w wolny czwartek - 11 listopada. YEAH! B臋dzie wi臋cej czasu, 偶eby przejrze膰 rzeczy, kt贸re dla Ciebie przygotowali艣my 馃榾

Co dzisiaj?

  1. Jak sam zrobi艂 aplikacj臋 SaaS zarabiaj膮c膮 >聽$3聽000聽miesi臋cznie
  2. Zagadka 馃
  3. Ciekawy case study platformy typu digital-learning
  4. Kogo warto obserwowa膰 馃憖
  5. Mega kolekcja narz臋dzi i wiedzy od teamu Evernote

Dawaj, dawaj! 猬囷笍


Jak sam zrobi艂 aplikacj臋 SaaS zarabiaj膮c膮聽>聽$3聽000 miesi臋cznie

Biznes | 藕r贸d艂o, 藕r贸d艂o
殴r贸d艂o

Je艣li chcia艂by艣 kiedy艣 zrobi膰 w艂asny produkt w postaci platformy SaaS, musisz przeczyta膰 poni偶sze wnioski developera, kt贸ry sam stworzy艂 produkt zarabiaj膮cy aktualnie ponad $3 000 miesi臋cznie. I聽wci膮偶 ro艣nie.

Wnioski te, jak i wiele innych tre艣ci i film贸w (podlinkujemy je ni偶ej), to opis procesu:

  1. tworzenia aplikacji SaaS Inkdrop
  2. jako solo-developer
  3. autorstwa Takuya Matsuyama

Lista wniosk贸w:

Znajd藕 sw贸j problem, kt贸ry rozwi膮偶esz

albo problem, kt贸ry bardzo dobrze znasz.
U艂atwi Ci to dalsz膮 prac臋.

MVP

Stw贸rz MVP z corowym za艂o偶eniem aplikacji. Znajd藕 odpowiednie narz臋dzia i聽technologie, kt贸re Ci to u艂atwi膮 i sprawi膮, 偶e zrobisz MVP szybko.

Prywatni beta-testerzy

Nigdy nie przekazuj wersji beta do test贸w publicznych. Jak m贸wi DHH, tw贸rca Ruby on Rails i za艂o偶yciel Basecamp:

Don鈥檛 use 鈥渂eta鈥 as a scapegoat 鈥 Beta passes the buck to your customers. If you鈥檙e not confident enough about your release then how can you expect the public to be? Private betas are fine, public betas are bullshit. If it鈥檚 not good enough for public consumption don鈥檛 give it to the public to consume.

Znajd藕 prywatnych beta tester贸w i zbieraj feedback. Przy okazji sprawd藕, jak testerzy u偶ywaj膮 Twojej aplikacji, np. za pomoc膮 Hotjar lub Mixpanel. To pierwsze testy Twojego MVP 馃檪.

Wprowad藕 op艂aty sta艂e - model subskrypcyjny

艁atwiej utrzyma膰 platform臋 SaaS, kiedy wp艂ywaj膮 comiesi臋czne, regularne p艂atno艣ci od aktywnych u偶ytkownik贸w. Daj okres triala lub freemium (pakiet darmowy).

Rozwiej wszystkie w膮tpliwo艣ci i odpowiedz na ka偶de "dlaczego" u偶ytkownikom, kt贸rzy maj膮 co艣 do Twojego cennika 馃檪 Autor opr贸cz kr贸tkiego wyja艣nienia na stronie cennika, napisa艂 te偶 osobny post t艂umacz膮cy stawki i model cennika.

Do p艂atno艣ci mo偶esz u偶y膰 Stripe.

Landing Page

Sprawd藕 ulubione LP, np. Sketch, Stripe, Mixpanel, Airmail, Basecamp; przeanalizuj je i zapisz, co musi si臋 znale藕膰 na Twoim.

Mo偶esz zainspirowa膰 si臋 realnymi LP zebranymi na land-book.com (btw. tw贸rca Land-book'a jest Polakiem, pozdrawiamy 馃檪).

Tutaj wnioski by艂y takie:

  1. Quick explanation
  2. Demo (Screenshot, video, sample, demo app usable without registrations, etc)
  3. Major advantages and benefits
  4. Pricing
  5. Testimonials
  6. Call-To-Action

Autor postawi艂 na utworzenie promocyjnego video, kt贸re pokazuje jak wygl膮da produkt i jak z niego korzysta膰, bez konieczno艣ci przeklikiwania go samemu.

Utworzy艂 je sam, w Adobe After Effects i iMovie. Kupi艂 par臋 gotowych klip贸w na VideoHive, podk艂ad muzyczny na AudioJungle i bum - "Promotional video gotowy w par臋 dni i troch臋 dolar贸w" 馃檪

Zobacz, jak wysz艂o:

B膮d藕 blisko klienta, daj maksymalny support

To powinien by膰 Tw贸j priorytet. Szybka reakcja i pomoc to Twoja wielka przewaga w聽walce z wielkimi aplikacjami i korporacjami, gdzie na odpowied藕 cz臋sto si臋 czeka par臋 dni.

Je艣li tylko masz tak膮 mo偶liwo艣膰 - jak dostaniesz jakie艣 pytanie od u偶ytkownika, przerwij to, co robisz i odpisz jak najszybciej 馃檪 To zaprocentuje.

殴r贸d艂o
Building loyalties by providing quick and thoughtful user support is so effective to get paid users.

Utw贸rz prosty system zadawania pyta艅 i udzielania odpowiedzi, np. forum. Dzi臋ki temu, nast臋pni u偶ytkownicy gugluj膮cy jaki艣 problem, znajd膮 od razu odpowied藕. A聽przy okazji, zyskasz troch臋 organicznego ruchu z聽wyszukiwarek 馃檪

Opisuj proces i lekcje, kt贸re wynios艂e艣

Niezale偶nie od rezultatu Twojego projektu, zawsze warto zapisa膰 swoje do艣wiadczenia i lekcje nabyte podczas pracy nad nim. Na pewno to komu艣 si臋 przyda.

Blog to 艣wietne narz臋dzie marketingowe. A niekt贸rzy czytelnicy bloga stan膮 si臋 Twoimi p艂atnymi u偶ytkownikami: win-win.

Powolny, ale regularny wzrost jest dla Ciebie najlepszy

W przypadku nag艂ego wzrostu popularno艣ci mo偶esz nie wyrobi膰 z聽supportem. ...Albo serwery mog膮 nie wytrzyma膰.

Je艣li prowadzisz SaaS jako solo-developer, to powolny, ale regularny wzrost jest dla Ciebie najlepszy. Skup si臋 na jako艣ci i supporcie. 聽

殴r贸d艂o

Publikuj roadmapy i og艂aszaj strategi臋 produktu

Pokazuj膮c plany na przysz艂o艣膰 i etapy realizacji, sprawiasz, 偶e u偶ytkownicy oczekuj膮 ich i czuj膮, 偶e produkt "偶yje".

Im wi臋cej tre艣ci przekazujesz, tym wi臋cej dialog贸w i utrzymanych kontakt贸w (ponownie聽-聽b膮d藕 blisko klienta).

Dzi臋ki prowadzeniu bloga, publicznych roadmap i strategii produktu dajesz si臋 pozna膰, zwi臋kszasz zaufanie i szanse na kupno Twojego produktu. Dodaj do tego content-marketing i masz 艣wietne narz臋dzie do pozyskiwania klient贸w.

Jako艣膰 przede wszystkim

Dostarczaj jako艣膰 przez ca艂y czas 偶ycia produktu. Dzi臋ki temu zyskasz wielu klient贸w, kt贸rzy przyszli "z polecenia", nie trac膮c przy tym czasu i聽kasy na marketing.

Ignoruj hejt i konkurencj臋

Najgorzej, jak po uruchomieniu produktu nie ma 偶adnej reakcji ze strony rynku. Je艣li zebra艂e艣 ton臋 pozytywnych komentarzy - super. Je艣li zebra艂e艣 hejt - te偶 dobrze. To znaczy, 偶e rozwi膮zujesz w艂a艣ciwy problem.

Zamiast pr贸bowa膰 zadowoli膰 wszystkich, spr贸buj zadowoli膰 u偶ytkownik贸w, kt贸rym to si臋 podoba 馃檪

If you try to please everyone, you won鈥檛 please anyone.

Jako solo-developer nie tra膰 czasu na 艣ledzenie konkurencji. Je艣li jeste艣 w kontakcie ze swoimi u偶ytkownikami, wiesz dok膮d zmierzasz i jaki dok艂adnie problem rozwi膮zujesz. R贸b swoje 馃檪

Nie b膮d藕 perfekcjonist膮

Zaakceptuj to, 偶e co艣 nie jest perfekcyjne, a przysz艂y ficzer mo偶e mie膰 bugi. To normalne. Musisz si臋 z tym pogodzi膰 i i艣膰 do przodu 馃檪

To wszystkie wnioski autora.

A tutaj wspomniane wy偶ej linki, kt贸re warto obluka膰:
- portfolio autora: www.craftz.dog
- blog aplikacji Inkdrop: blog.inkdrop.app
- lista art. autora: medium.com/@inkdrop
- kana艂 YT, na kt贸rym jest mega du偶o warto艣ciowych film贸w: devaslife

Zobacz, jak dobrej jako艣ci s膮 tre艣ci i filmy Takuya Matsuyama na tym przyk艂adzie:


Chwila na zagadk臋 馃

Co tutaj jest nie tak?

To tabela jak co艣 馃憜 馃榾

Odpowied藕 znajdziesz na ko艅cu maila.


Ciekawy case study platformy typu digital-learning

UX, UI | 藕r贸d艂o

Ciekawy, bo przeprowadzony w ramach "nauki" procesu Design Thinking i聽z聽minimalnym udzia艂em os贸b trzecich. Proces ten nie zaj膮艂 te偶 du偶o czasu, przez co jest dla nas, developer贸w, ca艂kiem realny do przej艣cia.

Case study dotyczy platformy do nauki online dla przysz艂ych UX聽Designer贸w.

Rzu膰 okiem, jak wygl膮da艂 ten proces z u偶yciem Design Thinking:

1. EMPATHIZE

Wywiad z 1-2 osobami, kt贸re s膮 potencjalnymi odbiorcami naszego produktu, aby聽jak najlepiej pozna膰 ich problemy i oczekiwania. Przygotuj pytania i zanotuj wszystkie spostrze偶enia. Pogrupuj je w map臋 pokrewie艅stwa (affinity map).

  • Affinity Map
    Affinity mapping to pogrupowanie powi膮zanych ze sob膮 rzeczy zebranych podczas wywiad贸w.
Minimalistyczny Affinity Map wykonany w tym Case Study - kliknij w obrazek, aby zobaczy膰 go w pe艂nym rozmiarze.

Kim jest u偶ytkownik, jego potrzeby i nasze spostrze偶enia.

  • User Persona
    zawiera opis u偶ytkownika aplikacji - jego cele, motywacje, frustracje itd.:
Persona okre艣lona dzi臋ki poprzednim etapom procesu. Kliknij, aby powi臋kszy膰.

2. DEFINE

To okre艣lenie problem贸w, kt贸re b臋dziemy rozwi膮zywa膰.

  • Problem Statement
    doj艣cie do sedna problemu za pomoc膮 metody 5 Whys:
Ostatnia odpowied藕 to sedno problemu u偶ytkownika. Tutaj: "she likes something fun and can motivate her to get the job done"

Ko艅cowo, zdefiniowano problem statement jako: 鈥淎 student who likes UX, needs a fun learning platform solution to learn to be a UX designer鈥.

  • User Journey
    etapy szukania platformy learningowej przez Person臋:
Utworzony User Journey - kliknij, aby zobaczy膰 w pe艂nym rozmiarze.

3. IDEATE

Okre艣lenie rozwi膮zania problemu.

  • Rozwi膮zanie
    u偶yto metody How Might We, dzi臋ki kt贸rej na pytanie "How might we create a fun learning platform?" zrodzi艂y si臋 rozwi膮zania:
  1. spo艂eczno艣膰 - dialog i wymiana do艣wiadcze艅,
  2. chatbot - aby odpowiedzie膰 w przyjazdy spos贸b na najcz臋stsze problemy,
  3. gry - aby by艂 fun i przyswajanie wiedzy by艂o mi艂e i przyjemne,
  4. dashboard - aby zna膰 post臋p i zach臋ca膰 do dalszej nauki

  • Features Matrix
    dzi臋ki impact-effort matrix okre艣lono, kt贸re ficzery zostan膮 wykonane w聽pierwszej wersji produktu:

  • Pierwsze rysunki UI
    z u偶yciem metody Crazy'8, utworzono tylko 8 najwa偶niejszych ekran贸w aplikacji:
  • Wireframe'y - po od艂o偶eniu o艂贸wka z zadowalaj膮cym nas rezultatem mo偶na przej艣膰 do utworzenia cyfrowej wersji szkieletu aplikacji:

4. PROTOTYPE

Utworzenie dzia艂aj膮cego prototypu gotowego do test贸w.

  • Interface Design - wybrano kolorystyk臋, kt贸ra pobudza kreatywno艣膰 i聽zdolno艣膰 do rozwi膮zywania problem贸w. Fonty to Poppins dla nag艂贸wk贸w i聽Nunito dla standardowego tekstu.
  • Interactive Prototype - klikalny prototyp wykonano w Figmie, mo偶esz zobaczy膰 go tutaj.
  • UI Style Guide - utworzono prosty style guide platformy:

5. Test

Przygotowano scenariusze i pytania, kt贸re b臋d膮 zadane u偶ytkownikom testuj膮cym rozwi膮zanie:

Po testach wprowadzono poprawki w prototypie dot. wygl膮d dashboardu i聽zrobiono A/B Testing, aby wy艂oni膰 lepsz膮 wersj臋 - wygra艂a wersja druga.

To wszystko!

Tak wygl膮da艂 proces projektowania platformy online-learning przez Jihan Suraya, kt贸ra ma na swoim koncie wi臋cej UI/UX Case Study, je艣li chcesz zobaczy膰 wi臋cej.

Nie by艂 to proces zbyt rozbudowany, ale w艂a艣nie o to chodzi艂o. Jako developerzy nie mamy czasu na wielki i czasoch艂onny proces projektowy.

Celowo wymienili艣my te偶 wszystkie u偶yte metody i podlinkowali艣my do artyku艂贸w omawiaj膮cych je szerzej.

W my艣l zasady "s艂abe jest nadal lepsze ni偶 偶adne" - dzia艂aj 馃檪


Kogo warto obserwowa膰?

Gary Simon

Gary projektuje strony od 2000 roku, tworzy kursy z Designu, ale przede wszystkim - prowadzi kana艂 DesignCourse na YT. I to jest clou tego punktu. Przekazywanie wiedzy w lu藕ny, czasami nawet aktorski, spos贸b.

Na 100% dobrze si臋 u艣miejesz przy tym filmie: 馃槀

Przemek, nasz subskrybent, skomentowa艂: "ale freak z go艣cia" 馃ぃ

YouTube: DesignCourse
Twitter: designcoursecom
Web: designcourse.com


Mega kolekcja narz臋dzi i wiedzy od聽teamu Evernote

Resources | 藕r贸d艂o
evernote.design

Dodaj do swoich zak艂adek i odwied藕 za ka偶dym razem, kiedy potrzebujesz jakiego艣 narz臋dzia / 藕r贸d艂a plik贸w / 藕r贸d艂a wiedzy o聽designie.

Zobacz, jakie narz臋dzia i wiedz臋 znajdziesz w 艣rodku:

  • Design Inspiration
  • Design News
  • Design Systems
  • YouTube Channels
  • Design Podcasts
  • Free UI Resources
  • Free Icons
  • Free Illustrations
  • Designer Community
  • Designer Lists
  • Logo Maker Tools
  • Mockup Tools
  • Image Optimization
  • Color Tools
  • Gradient Tools
  • Stock Photos
  • Stock Videos
  • Music & Sound
  • Learn Design
  • Accessibility
  • Design Tools
  • Prototyping Tools
  • Animation Tools
  • Wireframing Tools
  • Collaboration Tools
  • Typography
  • Backgrounds, Patterns
  • Design Books
  • Bookmarks Manager
  • Marketplaces

Dodaj do zak艂adek: evernote.design


Zagadka - odpowied藕 馃憞

Co tutaj jest nie tak?

Z艂y UX 馃憜
Dobry UX 馃憜 殴r贸d艂o

Warto przeczyta膰 wi臋cej o tabelach z dobrym UX tutaj.


Weekend czas zacz膮膰!!! 馃帀

馃槀 殴r贸d艂o

PS. Je艣li ten mail by艂 dla Ciebie przydatny i znasz kogo艣, komu te偶 m贸g艂by pom贸c 鈥 prze艣lij mu tego maila 鈥 na pewno b臋dzie Ci za to wdzi臋czny 馃槏

Pozdrawiam i mi艂ego dnia!

Je艣li jeszcze nie ma Ci臋 na li艣cie 馃

Wysy艂amy jeden email tygodniowo, w ka偶dy pi膮tek, o godz. 12:00.
Warto艣ciowa wiedza o UI/UX dla developera mo偶e wyl膮dowa膰 do Twojej skrzynki.