de Jurn W

Cum mi-am construit proiectul secundar și am obținut 31.000 de utilizatori în prima săptămână

Îmi place să construiesc proiecte secundare. Vederea propriilor idei prind viață este uimitor.

Proiectele secundare oferă o ieșire creativă și sunt o modalitate excelentă de a învăța și experimenta lucruri noi.

Dacă proiectul tău secundar decolează, s-ar putea transforma chiar într-o pornire. Multe companii cunoscute au început ca proiecte secundare – Twitter, Slack, GitHub și Instagram pentru a numi doar câteva.

Recent, am lansat un nou proiect secundar și am putut obține 31.000 de utilizatori în primele 7 zile de la lansare.

ad-banner

Site-ul pe care l-am construit se numește Screely. Vă permite să transformați instantaneu o captură de ecran într-o frumoasă machetă de design, fără a fi nevoie să utilizați șabloane Photoshop sau Sketch.

În acest articol, vă voi spune cum am luat ideea, cum am construit-o și cum am reușit să obțin 31.000 de utilizatori în primele 7 zile.

Găsirea unei idei

Ideea pentru Screely a venit dintr-un chat de grup de designeri și dezvoltatori care împărtășesc și discută despre proiectele lor. De multe ori împărtășesc capturi de ecran pentru a cere feedback sau pentru a arăta lucrările terminate.

Dar a existat o persoană ale cărei capturi de ecran au ieșit în evidență. A împărtășit imagini frumoase în loc de capturi de ecran simple, ca toți ceilalți.

S-au asemănat mai mult cu desenele pe care le vedeți pe Dribbble sau Behance.

Cum mi am construit proiectul secundar si am obtinut 31000 de
Un exemplu de captură de ecran

S-a dovedit că a creat un șablon personalizat în Sketch pentru a adăuga aceste efecte.

Am vrut să fac capturile de ecran să arate similar. Dar nu am vrut să-mi proiectez propriile șabloane și trebuie să încărc fiecare captură de ecran nouă în Sketch.

Știam despre Carbon, un instrument care generează instantaneu o imagine frumoasă a dvs. cod, dar am vrut ceva similar pentru al meu capturi de ecran.

Nu am putut găsi un site web care să facă acest lucru, așa că am decis să îl construiesc singur.

Definiți produsul dvs. viabil minim (MVP)

Primul lucru pe care îl fac când încep să lucrez la un produs nou este să definesc un MVP.

Există câteva definiții diferite despre ceea ce este un MVP. De obicei, este descris ca un produs cu cel mai mic număr de caracteristici care încă rezolvă problema.

Limitarea la construirea doar a unui MVP este foarte important din două motive.

În primul rând, vă împiedicați să petreceți mult timp construind un produs fără să validați ideea și să știți dacă este ceva ce alții vor să folosească.

În al doilea rând, vă împiedicați să adăugați la nesfârșit mai multe funcții și să vă modificați produsul.

Nu sunt lucruri rele, desigur. Dar aceasta este o capcană periculoasă care poate duce la lucrul la produsul dvs. luni sau ani înainte de a-l lansa vreodată.

„În dezvoltarea produsului, produsul minim viabil (MVP) este un produs cu caracteristici suficiente pentru a satisface clienții timpurii și pentru a oferi feedback pentru dezvoltarea viitoare” – Wikipedia

Cu cât vă expediați MVP-ul mai repede, cu atât vă puteți valida mai repede ideea și vă puteți îmbunătăți MVP cu feedback-ul utilizatorilor.

Pentru Screely, am definit MVP ca:

  • Un utilizator ar trebui să poată alege un fișier de imagine local (jpg, png)
  • Sistemul ar trebui să genereze o imagine cu o fereastră de machetă, o umbră de cutie și o culoare de fundal
  • Un utilizator ar trebui să poată schimba culoarea de fundal
  • Un utilizator ar trebui să poată descărca imaginea generată

Bineînțeles că au existat o mulțime de alte caracteristici pe care mi-aș fi dorit să le adaug: trageți și fixați o imagine, fundaluri de gradient sau posibilitatea de a trimite pe Twitter imaginea generată.

Dar niciuna dintre acestea nu face parte din funcționalitatea de bază. Și, așa cum am spus mai devreme, este important să vă limitați la MVP, sau veți începe să intrați în această interminare a caracteristicilor.

Pregătirea

Înainte de a-mi lansa editorul de text, am explorat potențiale soluții tehnice și argumentele pro și contra.

După ce am făcut câteva cercetări, am luat în considerare 3 opțiuni diferite:

  1. Utilizați un element de pânză HTML și JavaScript
  2. Utilizați elemente DOM obișnuite și utilizați HTML pur și CSS
  3. Generați imaginea pe partea de server și întoarceți rezultatul final

Fiecare opțiune avea avantajele și dezavantajele sale.

De exemplu, redarea imaginii pe partea serverului ar evita problemele de compatibilitate între browser-uri. Însă, ca utilizator, nu aș vrea ca capturile de ecran să fie trimise la un server, deoarece nu știu dacă sunt salvate sau utilizate în vreun fel.

Ar necesita, de asemenea, să rulez un server, în timp ce aș putea găzdui gratuit o soluție front-end pură Netlify. Deci, opțiunea trei a fost eliminată.

Cu primele două opțiuni rămase. În cele din urmă am decis să folosesc HTML-ul <canvca> element și painting pe pânză cu JavaScript simplu. În plus, pentru că nu mai folosisem elementul de pânză HTML și proiectele laterale sunt o modalitate excelentă de a învăța lucruri noi, eram înclinat să merg pe această cale. ?

Să începem să construim

Cea mai interesantă parte a oricărui proiect.

Am început imediat cu funcționalitatea de bază. Nu am petrecut timp pe un nume / domeniu, design, siglă sau pe configurarea rețelelor sociale. Le puteți face mai târziu.

La 1 oră de la proiect am avut lucrurile de bază.

  • Un nume de substituent – capturi de ecran sexy (este ceea ce am numit aceste imagini în chatul de grup)
  • O intrare de fișier
  • A generat <canvca> element cu imaginea pe care o selectez cu un fundal colorat și cu fereastra falsă adăugată
Cum mi am construit proiectul secundar si am obtinut 31000 de
Funcționalitatea de bază a aplicației

Am codificat totul și a funcționat doar cu o captură de ecran (specifică). Nu puteți schimba culoarea de fundal sau utilizați o captură de ecran cu dimensiuni diferite ale imaginii.

Am îmbunătățit produsul de acolo, începând cu capacitatea de a gestiona capturi de ecran de diferite dimensiuni.

De asemenea, am început să adaug alte caracteristici pe care le definisem pentru MVP, cum ar fi adăugarea unui selector de culori pentru a schimba culoarea de fundal și un buton de descărcare pentru imaginea generată.

1611282733 706 Cum mi am construit proiectul secundar si am obtinut 31000 de
Demonstrarea selectorului de culori

Acum că toate cerințele MVP pe care le-am stabilit la început au fost îndeplinite, a venit timpul să lansăm (da, deja)!

Pregătirea pentru lansare

În acest moment, MVP-ul meu nu era altceva decât un titlu de substituent, un buton HTML și o mică listă de lucruri pe care am vrut să le adaug după lansarea MVP.

Cum mi am construit proiectul secundar si am obtinut 31000 de
MVP, nu este gata de lansare (încă)

După alegerea unui nume (Screely), cumpărarea domeniului .com și realizarea unei pagini de destinație, acesta a fost rezultatul:

1611282734 23 Cum mi am construit proiectul secundar si am obtinut 31000 de

Am adăugat, de asemenea, o opțiune de e-mail și un link către un cont Twitter pentru a mă asigura că pot rămâne în legătură cu utilizatorii după lansare.

Un alt lucru pe care l-am adăugat a fost un buton de chat din partea dreaptă jos, astfel încât utilizatorii să poată vorbi cu ușurință cu mine. Am primit feedback valoros despre produs, rapoarte de erori și sugestii de funcții acolo.

Există multe opțiuni pe care le puteți folosi pentru a încorpora un chat pe produsul dvs. Am folosit Drift, dar puteți folosi și alternative precum Intercom sau Olark.

Construiți în aer liber

O scurtă notă laterală despre lansarea proiectului: lansarea nu ar trebui să fie un eveniment de o zi în care vă împărtășiți proiectul și sperați la cele mai bune.

„Lansarea” dvs. începe în ziua în care începeți să lucrați la ideea dvs. Ar trebui să începeți să vă promovați proiectul încă din prima zi.

Când am început să lucrez la Screely, am scris pe Twitter despre progresele mele la doar o oră după ce am început. De asemenea, am trimis pe Twitter actualizări regulate în timp ce construiam MVP.

Acest lucru ajută la răspândirea conștientizării despre noul dvs. produs, îi atrage pe oameni curioși și vă ajută să obțineți feedback.

Nu vă simțiți jenat de a arăta un produs neterminat. Oamenilor le place să-i vadă pe alții construind lucruri interesante și înțeleg că este nevoie de timp pentru a construi proiecte interesante.

Lansa

Am postat Screely în Product Hunt, Hacker News, Reddit, Designer News și alte câteva site-uri web.

Nu voi intra foarte în profunzime despre locul în care să vă postez produsul și cele mai bune practici pentru fiecare platformă, deoarece aceasta este o postare pe blog.

Cel mai important lucru este că ajungeți la publicul țintă. Pentru Screely, acesta a fost în principal designeri, dezvoltatori și scriitori tehnici.

Vânătoare de produse

Lansarea Product Hunt a mers extrem de bine și a depășit toate așteptările mele. Screely a ajuns să devină # 1 produs al zilei cu 1032 voturi pozitive.

1611282735 525 Cum mi am construit proiectul secundar si am obtinut 31000 de

Screely a fost # 1 produs al zilei, # 1 produs al săptămânii și # 4 produs al lunii. Aceasta a însemnat că va apărea și în buletinul informativ zilnic și săptămânal al Product Hunt.

În total, Product Hunt a adus aproape 11.000 de vizitatori în prima săptămână!

Știri despre hackeri

Screely a început destul de lent, dar după câteva ore a sărit brusc pe prima pagină a Hacker News. Chiar dacă cea mai înaltă poziție a lui Screely a fost „doar” # 15, a rezultat totuși într-un volum mare de trafic.

1611282735 546 Cum mi am construit proiectul secundar si am obtinut 31000 de

Estimez că 5 -10k utilizatori au venit de la Hacker News.

Nu este clar exact câți utilizatori au venit de la HN, deoarece nu adaugă un ?ref= parametru la adresa URL. Am inclus o privire mai detaliată a surselor de trafic mai târziu în acest articol.

Știri de designer

A treia platformă cu cel mai mare succes (în ceea ce privește numărul de trafic) a fost designernews.com.

Abia a ajuns pe locul 2 pe prima pagină și acest lucru a dus la puțin sub 3k utilizatori noi.

Devin viral

Postasem Screely pe multe alte locuri, cum ar fi Reddit și Indie Hackers, dar precedentele trei au fost de departe cele mai de succes.

Un efect secundar interesant de a merge bine în locuri precum Hacker News și Product Hunt este că produsul dvs. apare în multe alte locuri – tweets, buletine informative, bloguri mai mici, agregatori și multe altele.

De exemplu, Screely a fost menționat de trucurile CSS către adepții lor de 360k.

Screely a fost, de asemenea, inclus în Codrops Collective # 416, un buletin informativ popular printre designeri.

În total, Screely a avut puțin sub 31.000 de utilizatori în prima săptămână.

1611282736 178 Cum mi am construit proiectul secundar si am obtinut 31000 de
Stânga: numărul total de utilizatori pe zi, Dreapta: sursa de trafic. Sursa: Google Analytics

Îmbunătățiți-vă cu feedback-ul utilizatorului

Având în vedere succesul lansării, pot spune cu încredere că ideea a fost validată. Acum știu că merită să dedici mai mult timp acestui proiect.

Vă amintiți funcția de chat pe care am implementat-o ​​pentru a mă pregăti pentru lansarea Screely? Acesta a fost umplut cu cereri de caracteristici și feedback de la utilizatorii Screely.

Acum, că știți exact ce își doresc utilizatorii dvs., este ușor să știți ce caracteristici să lucrați și ce să acordați prioritate.

De exemplu, mulți utilizatori doreau să poată trage și plasa imaginea în Screely, așa că am adăugat mai întâi acea caracteristică.

1611282737 388 Cum mi am construit proiectul secundar si am obtinut 31000 de
Suport de tragere și plasare

O altă caracteristică deseori solicitată a fost aceea de a potrivi automat culoarea de fundal cu imaginea. Deci, aveți imediat un fundal care se potrivește capturii de ecran.

Am adăugat un script care analizează imaginea, generează o paletă de culori și alege cea mai dominantă culoare pentru fundal.

În afară de adăugarea de noi funcții și remedierea erorilor, îmi petrec și timpul lustruind designul.

Dacă doriți să primiți actualizări pe Screely. Urma @getScreely pe Twitter sau înscrieți-vă pentru actualizarea lunară a produsului prin e-mail screely.com.

Sfaturi pentru livrarea proiectelor laterale (mai rapid)

  • Nu te complica: Păstrați-vă MVP cât mai limitat posibil. Folosiți limbaje de programare cu care sunteți familiarizați în loc de orice cadru este la modă. Cu cât proiectul dvs. devine mai complex, cu atât este nevoie de livrare și obținerea primilor dvs. utilizatori.
  • Expediază zilnic: Este foarte important să menții impulsul în proiectele tale secundare. Încercați să lucrați la proiectul dvs. în fiecare zi. Refactorizați o singură funcție sau remediați o mică problemă CSS. Nu contează cât de mică este sarcina pe care o îndepliniți, continuați să livrați! Dacă omiteți o zi (se întâmplă), faceți-o o prioritate pentru a obține ceva, oricât de mic ar fi, a doua zi.
  • Luați comenzi rapide: Ori de câte ori este posibil, încercați să găsiți comenzi rapide pentru a livra produsul mai repede. Dacă puteți găsi o soluție open-source bună pentru o problemă, utilizați-o în loc să scrieți propria dvs. de la zero. Utilizați instrumente precum Netlify pentru a găzdui și implementa în loc să vă configurați propriul server.
  • Lansați înainte de a crede că sunteți gata: Nu te lăsa prins în perfecționarea produsului tău. Puteți scăpa cu mult mai mult decât credeți.
  • Programarea este un instrument pentru a vă aduce ideea în lume: Nu vă supraînțelegeți proiectul secundar. Utilizatorilor dvs. nu le pasă de stiva dvs. tehnologică, ceea ce contează pentru ei este beneficiul pe care îl obțin din utilizarea produsului dvs. Nu le pasă dacă utilizați Docker sau React, se concentrează asupra problemelor pe care le poate rezolva produsul dumneavoastră.
  • Știi suficient: Mulți oameni care învață să codeze amână lucrul la propriile proiecte. Ei cred adesea că trebuie să urmeze mai multe tutoriale, să cumpere mai multe cursuri și să citească mai multe cărți. Nu continua să înveți pentru totdeauna, începe să construiești! Chiar și dezvoltatorii experimentați încă caută lucruri „simple”, cum ar fi cum să eliminați un element dintr-o matrice.

Noroc si sa te distrezi!

Dacă vi s-a părut util acest articol, dați-mi câteva aplauze. ?

Sunt un designer olandez UI / UX independent și dezvoltator front-end. De asemenea, conduc câteva site-uri afiliate de succes și construiesc proiecte secundare pentru distracție și profit.

Dacă vrei să știi la ce lucrez în prezent, urmărește-mă pe Twitter sau verificați blogul meu.

Asigurați-vă că trimiteți un tweet la mine cu orice întrebări pe care le aveți, sunt întotdeauna bucuros să vă ajut!