O prima impresie buna este o invitatie.

reflect este o extensie de crom si firefox digitala care incurajeaza utilizatorii sa reflecteze asupra relatiei lor cu tehnologia.

Intr-o era a dezordinii digitale si a atentiei trecatoare, uneori este doar o privire. Pentru a profita la maximum de acest lucru, am vrut sa cream o interfata care sa imbunatateasca functia – toate facand apel la demografia noastra intentionata.

Incepeti sa terminati, urmatoarea postare contine totul. Inclusiv, dar fara a se limita la branding vizual, wireframing, testarea utilizatorilor si iterarea pe baza feedback-ului.

UMBLe bEgiNnIngS

Provenind de la linii orizontale punctate din Chicago pana la muntii Vancouver, echipa noastra s-a asamblat initial digital. Inainte de toate, proiectarea interfetei a fost un exercitiu pentru a testa echipa noastra dinamica, etica de lucru si potential.

Array

Din fericire pentru noi, a functionat! Mai ales intr-o echipa atat de mica, am avut norocul sa avem abilitati si valori complementare. In curand, ne-am adunat intr-un canal Slack si ne-am indreptat. Iata cateva portrete MS Paint create de artistul nostru intern, Jacky Zhao.

Jacky Zhao, Justina Chua, Anson Yu si Jennifer Tsai!

Exista putine propozitii pe care le veti auzi in timpul unei crize de furie si intr-o sesiune de idei. Una dintre care este urmatoarea:

“Care e problema ta?”

Pe scurt, aceasta este intrebarea principala din spatele cercetarii utilizatorilor. In calitate de studenti, membrii echipei noastre au constatat ca exista trei lucruri certe in viata: moartea, impozitele si amanarea. In urma unui sondaj efectuat de 150 de studenti cu privire la definitia lor a productivitatii, am reusit sa distilam nevoia utilizatorului intr-o declaratie de problema coerenta:

Cum am putea imbunatati relatia unui utilizator cu tehnologia prin scaderea utilizarii fara minte a internetului?

Desi ideea de reflectare s-a nascut dintr-o explozie de creativitate, am vrut totusi sa verificam daca ideea unui blocator de site-uri web care induce o reflectie era buna inainte de a ne scufunda in cladire. Prin chestionarea colegilor si colegilor, am constatat ca gaura de iepure a retelelor de socializare si a platformelor de streaming online a fost cea mai mare chiuveta.

Array

Desi serviciile mentionate anterior sunt foarte apreciate cu moderatie, utilizarea abuziva a acestora poate duce la pierderea timpului, frustrare si chiar epuizare.

Astfel, ideea a rezolvat problema intr-un mod suficient. Prin declansarea reflectiei, blocatorul previne in mod eficient utilizarea fara minte a internetului, permitand in acelasi timp o flexibilitate sanatoasa, care nu se mai aude in aplicatii precum Your Time si Cold Turkey

Din acest moment, am decis sa implementam ideea ca o extensie web, vazand cum se desfasoara majoritatea muncii legate de scoala si cariera pe computer, mai degraba decat pe mobil.

Instrumente

Pentru a crea aspectul extensiei, ne-am bazat pe o varietate de software diferite pentru a satisface nevoile noastre diverse.

  1. Dribbble (Inspiratie) – In calitate de hub pentru creatori si designeri, am folosit Dribbble ca termometru pentru a evalua tendintele actuale de proiectare si posibilele puncte de inspiratie.
  2. Coolori (planificare tematica) – Un instrument util care sugereaza palete de culori complet bazate pe una sau doua culori.
  3. Milanote (planificare tematica) – Un software periculos subevaluat care permite colaborarea in timp real intre membrii echipei. L-am folosit pentru a crea moodboard-uri.

    Array

  4. Figma (macheta si design) – Painea si untul procesului nostru de proiectare. L-am folosit pentru a crea machete UI, grafica pentru retelele sociale si active de marca.
  5. Adobe AfterEffects (Video Editing) – Un software puternic de editare pe care l-am folosit pentru a realiza animatii si tutoriale de integrare.
  6. Notiune de mentiuni onorabile (organizatie) – Desi nu a fost utilizata in mod explicit pentru proiectare, Notion a fost centrul nostru pentru active, cronologii si sarcini prospective.

Aceasta sectiune este impartita in doua parti, descriind mai intai rationamentul pentru designul vizual si apoi functional.

Moodboard

Functionalitatea cheie a reflectarii este de a sta intre utilizator si explozia de dopamina care poate aparea atunci cand vizitati un site web distractiv. Desi bine intentionat, este de inteles ca oamenii pot incepe sa dezvolte sentimente de frustrare sau chiar resentimente fata de extensie. Pentru a compensa acest lucru, echipa noastra a luat decizia constienta de a alege cel mai linistit si mai linistitor concept de design posibil – in esenta, versiunea UI / UX a unui parfum de lavanda.

Pe masura ce ne-am bazat pe aceasta idee, am ajuns la concluzia ca interfata ar trebui sa fie relativ minimalista, atat pentru accesibilitate, cat si estetica.

Sigla

Cand am redactat versiunile initiale pe hartie, ne-am concentrat in primul rand pe desenarea logo-urilor de stil abstract. Am decis o sigla cu semn de litera peste o sigla cu cuvant, deoarece am crezut ca dimensiunile au fost amabile pentru cadrele patrate. Acest lucru l-ar face mai usor de recunoscut ca favicon, fotografie de profil si multe altele.

La brainstorming, am vazut utilizarea recurenta a ecranelor, fetelor si becurilor. La finalul meu, am desenat totul, de la un logo AirBnb bootleg la doua fasole una langa alta.

Desi eu si Justina am facut o brainstorming independent una de cealalta, am schitat amandoi sigle constand din litera R cu un punct . In cele din urma am decis sa folosim aceasta idee datorita simplitatii sale practice.

Realizand un logo simplu dintr-o litera si un blob vector, acesta nu este doar recunoscut, ci usor de reprodus. In curand, am inceput sa presaram monograma in toate lucrurile reflectate, fie ca este spatiul nostru de lucru Slack sau macheta reala. Mai multe despre aceasta venire.

Tipografie

De la inceput, am stiut ca calea de urmat este un font sans-serif. In special, lizibilitatea ecranului si estetica moderna a fontului Circular au fost ceva care ne-a atras. A fost suficient de similar cu fonturile populare precum Futura si Montserrat, pastrand in acelasi timp o licarire de individualitate.

Ghid stilistic

Am inceput procesul creand mostre de referinta pentru a standardiza toate modelele incepand cu acest moment. De asemenea, ne-am jucat cu gradienti pentru a introduce un nivel de adancime in desenele vectoriale altfel plane

Interfata cu utilizatorul

Aceasta parte a fost atat de distractiva de facut. Inainte de a crea fluxul, am venit cu ideea noastra de Stea Polara. Am vrut sa proiectam suficient cat sa observe utilizatorul. Aceasta a insemnat planificarea ecranelor, a imaginilor si a microinteractiunilor pentru a fi intuitiva, dar neteda. Am inceput prin brainstorming wireframe-ul asteptat pentru integrare, incluzand, dar fara a se limita la, pagina de destinatie, intrarile utilizatorului si instructiunile.

Am experimentat diferite cazuri de test ale fluxului de integrare. Din filele noastre initiale, reducem continutul cu 50% prin crearea unui tutorial video, mai degraba decat prin explicatii verbale.

Pentru ecranul de integrare, am decis, de asemenea, sa nu colectam datele utilizatorilor din cauza oricaror probleme de confidentialitate care ar putea aparea. Desi regreta cercetarile viitoare ale utilizatorilor, a redus, de asemenea, cantitatea de frecare de la punctul de instalare la functia extensiei.

Pentru a imbunatati experienta utilizatorului, am sincronizat, de asemenea, progresia videoclipului tutorial cu derularea paginii. Aceasta este probabil una dintre partile mele preferate, deoarece intr-un mod subtil, insuflam ideea ca, mai degraba decat tehnologia noastra ne controleaza, noi suntem cei care ne controlam tehnologia. Daca doriti sa rulati pagina, descarcati extensia de aici

Restul paginilor au fost prototipate din cadrul original al hartiei. Am testat diferite variatii si alinieri pentru a vedea ce a functionat cel mai bine, am constatat ca utilizatorii au avut feedback-ul cel mai pozitiv atunci cand pagina bloc a fost facuta sa semene cu bara de cautare Google, chiar pana la aceleasi comenzi de la tastatura. Am decis sa nu stilizam in mare masura pagina de optiuni, deoarece trebuia sa fie un meniu concis de optiuni, fara niciun fior suplimentar pentru a distrage atentia de la functia sa practica.

Grafica pentru retelele sociale

Pentru retelele noastre sociale, am vrut sa recream aspectul produsului traditional impuscat. Aceasta a insemnat fundaluri mate, umbre subtile si utilizarea de machete de dispozitiv. Pentru a mentine consecventa lucrurilor, am aruncat in bloburile noastre de semnatura peste tot.

Pentru a ne potrivi cel mai bine formatului de grila de pe Instagram, am creat grafica alternativa care formeaza o imagine mai mare atunci cand suntem in flux. Desi subtil, ne-am gandit ca a fost un ou mic de Paste distractiv care a functionat in cele din urma pentru a forma o imagine coeziva.

Pentru viitoarea noastra campanie publicitara, am inceput sa exploram modul in care imaginile statice pot fi traduse in obiecte in miscare. Dupa o multime de curbe de experimentare si animatie, am ajuns in cele din urma pe un produs care a fost satisfacator. Un instrument util in acest proces a fost un site web numit Cubic Bezier!

Interfata site-ului web

Pe retelele noastre sociale, referim site-ul web ca un mijloc de a directiona instalarile aplicatiilor. La stabilirea informatiilor de pe site, am avut in vedere aceasta prioritate.

In plus fata de acel indemn special la actiune, restul site-ului a fost un hub pentru informatii de lansare, intrebari frecvente si linkuri sociale. Similar cu extensia in sine, am facut mai intai macheta in Figma pentru a fi recreata cu HTML / CSS.

Pe masura ce am actualizat primul design, nu ne-a placut modul in care textul in contextul de fundal a fost afectat negativ de contrast. Pentru a face site-ul web accesibil pe toate ecranele si toate abilitatile, am modificat sectiunea site-ului web pentru a avea in schimb tranzitii mai concrete.

Stralucire partea 1

Pentru a transmite informatii mai clar, am continut pictogramele noastre care pluteau pe un card clar conturat. Formatarea modificata s-a descurcat mult mai bine pe ecranele mobile, impingandu-ne sa schimbam restul site-ului web pentru a folosi si cardurile. Pe o nota cosmetica, ne-am schimbat culoarea fontului pentru a ramane consistenti si am inmuiat umbra.

Stralucire partea 2

Dupa ce am realizat prototipuri pentru prima schita a aplicatiei si a site-ului nostru web, am pornit sa gasim primul co-hort de beta testere. Toti acesti testeri au intrat in tinta noastra demografica a studentilor cu varste cuprinse intre 13 si 18 ani, cu niveluri diferite de fluenta tehnologica.

De la aceasta cohorta, am primit un fel de feedback gratuit. De exemplu, am pus intrebarea „Ce ti-a placut la extensie?”

Testerul nr. 5: Cat de usor este sa il comutati si sa il dezactivati, estetica, cat de usor este sa adaugati / eliminati site-uri web si alte lucruri de genul acesta (provenind de la o persoana fluenta foarte necomputer)

Testerul # 9: a fost foarte util – fiecare parte a acestuia parea cu adevarat planificata, ceea ce era uimitor! De exemplu, imi place ca puteti justifica accesarea unui site web discutabil, spre deosebire de activarea si dezactivarea intregii extensii. Mi-a placut in mod deosebit cronometrul, m-a fortat sa raman pe drumul cel bun si, daca am ajuns sa scad un pic pe un site web, cronometrul mi-a amintit de ceea ce faceam.

Tester # 12: imi place absolut alegerea culorii !!!!!!

Si pentru intrebarea „ Ce ati imbunatati despre extensie? ”, Am primit un feedback constructiv util.

Testerul nr. 1: am constatat ca nu mi-a intrerupt „5 minute” decat daca am reimprospatat pagina sau am navigat catre o alta parte a acesteia. Ar fi bine daca ar putea sa apara. De asemenea, cand va permite sa intrati pe un site web, mesajul despre „5 minute” este putin greu de citit … doar culoarea sau dimensiunea fontului de acolo!

Testerul # 4: Adaugarea de site-uri web la „lista de blocuri” a fost putin confuza la inceput si am uitat si eu cum sa o fac o zi tarziu

In cazul in care modificarile ar fi considerate a fi cuprinse in ceea ce am putea modifica, am ridica bilete pentru a raspunde preocuparilor fiecarui utilizator. Desi grupul focus al testerelor beta este acum dizolvat, acceptam continuu feedback-ul de la baza noastra de utilizatori prin intermediul formularelor de feedback, retelelor sociale si interviurilor scurte.

Accesibilitate

Vrem sa ne asiguram ca oamenii de toate abilitatile pot accesa extensia si site-ul web. Aceasta inseamna iteratia constanta a produsului nostru pentru a imprumuta bine cititoarelor de ecran si altor ajutoare. Pentru a afla mai multe, consultati Standardele de accesibilitate W3C!

Functii noi

Deoarece echipa noastra primeste feedback, suntem mereu in cautarea de a integra noi functii care ar putea imbunatati extensia. Fie ca este vorba de analize de date sau de ferestre pop-up de expirare, fiecare caracteristica noua vine cu un design nou.

Destul de amuzant, proiectarea unei aplicatii despre mindfulness, m-a facut din greseala sa am mai atentie la mediul inconjurator.

Ca cineva caruia ii place sa se grabeasca prin viata, petrecerea timpului pe design m-a determinat sa incetinesc si sa apreciez lucrurile mici din jurul meu. Oricat de branzos pare, ma apropii de mediul meu cu mai multa curiozitate, acordandu-mi timp sa ma gandesc la intentia din spatele desenelor de zi cu zi.

In afara de aceasta, am avut cateva alte oferte personale din acest proces.

  1. Pastrati-va fisierele organizate
  2. Consultati meniul de luat masa # 1
  3. Luati feedback cu o minte deschisa si o inima deschisa
  4. Mai presus de toate, gasiti placere in acest proces!

Speram ca aceasta postare de blog a reusit sa va ofere valoare intr-un fel. Daca doriti sa aflati mai multe despre noi, faceti o plimbare pe site-ul nostru web! ✨ http://getreflect.app/

Daca aveti intrebari suplimentare despre reflect sau despre acest articol, nu ezitati sa ne trimiteti un e-mail la [email protected]

ARTICOLE SIMILAREDE LA ACELAȘI AUTOR