Un ghid pentru a accepta provocările și a excela la stagiul tău de design UX

Publicat: 2022-03-10
Rezumat rapid ↬ Există stagii de practică în fiecare industrie imaginabilă – de la HR la banking de investiții – dar cum ar putea arăta un stagiu de design UX? În acest articol, Erica vorbește despre stagiul ei la o agenție din Granada, care erau sarcinile ei, toate provocările cu care s-a confruntat și cum și-a depășit teama de a încerca pur și simplu ceva nou.

Aceasta este povestea despre stagiul meu de user design. Nu spun că stagiul tău va fi ceva ca al meu. De fapt, dacă pot spune un lucru pentru a-ți modela așteptările, ar fi acesta: fii gata să le lași pe toate deoparte. Mai presus de orice, amintiți -vă să vă acordați spațiu și timp pentru a învăța . Îmi împărtășesc povestea ca o amintire a cât de mult m-am chinuit și cât de bine a mers totul în ciuda dificultăților mele, astfel încât să nu mă opresc niciodată să încerc și nici tu nu o vei face.

Totul a început în mai 2018, când am coborât din avion în Granada, Spania, cu un bagaj lângă mine, un laptop în spate și niște spaniole foarte ruginite în cap. A fost prima mea oară în Europa și voi fi aici pentru următoarele trei luni, făcând un stagiu în design UX la Badger Maps. Eram încă destul de verde în UX, învățând despre asta de abia un an în acest moment, dar mă simțeam pregătit și dornic să câștig experiență într-un cadru profesional.

Urmăriți cum am învățat cum să aplic cunoștințele tehnice pentru a finaliza sarcinile practice de proiectare care mi-au fost atribuite:

  • Creați un sistem de design pentru aplicația noastră iOS folosind Sketch;
  • Proiectați o nouă caracteristică care să afișeze erori care apar la importurile de date;
  • Aflați elementele de bază HTML, CSS și Flexbox pentru a-mi implementa designul;
  • Creați animații cu Adobe Illustrator și After Effects.

Acest articol este destinat începătorilor ca mine . Dacă sunteți nou în design UX și doriți să explorați domeniul, citiți mai departe pentru a afla dacă un stagiu de design UX este cel mai potrivit pentru dvs.! Pentru mine, munca pe care am ajuns să o finalizez a depășit cu mult așteptările mele. Am învățat cum să creez un sistem de proiectare, cum să compromit designul cu nevoile utilizatorilor, provocările implementării unui nou design și cum să creez niște „momente de încântare”. Fiecare zi la stagiu a prezentat ceva nou și imprevizibil. La încheierea stagiului meu, mi-am dat seama că am creat ceva real, ceva tangibil și parcă tot ceea ce mă luptam s-ar fi pus brusc la locul lor.

Lectură recomandată : Cum să obțineți un stagiu de design grafic de primă clasă

Mai multe după săritură! Continuați să citiți mai jos ↓

Capitolul 1: Lego

Prima mea sarcină a fost să creez un sistem de design pentru aplicația noastră iOS existentă. Am creat sisteme de design în trecut pentru propriile proiecte și aplicații, dar nu le-am făcut niciodată retrospectiv și niciodată pentru un design care nu era al meu. Pentru a finaliza sarcina, trebuia să fac inginerie inversă a machetelor din Sketch; Mai întâi ar trebui să actualizez și să optimizez fișierul pentru a crea sistemul de proiectare.

Captură de ecran cu organizarea unui fișier de design în programul Sketch.
Lucrul cu organizarea fișierului Sketch pentru a crea un sistem de proiectare. (Previzualizare mare)

Tot în acest moment oportun am aflat că programul Sketch de pe computerul meu era depășit de aproximativ un an și jumătate. Nu știam despre niciunul dintre simboluri, suprascrieri și alte caracteristici din versiunile mai noi. Lecție învățată: mențineți software-ul actualizat.

Simboluri de subsol și suprascrieri în programul Sketch.
Crearea subsolurilor și lucrul cu înlocuiri în Sketch. (Previzualizare mare)

Înainte de a-mi face griji cu privire la pagina de simboluri, am trecut prin planșa de grafică a modelelor, asigurându-mă că sunt actualizate și fidele la versiunea curentă a aplicației. Odată ce am făcut asta, am început să creez simboluri și înlocuiri pentru diferite elemente. Am început cu antetul și subsolul și am trecut de acolo.

Ca regulă generală, dacă un element ar apărea în mai multe pagini, l-aș face un simbol. Am adăugat diferite pictograme sistemului de design pe măsură ce am mers, construind biblioteca. Cu toate acestea, a devenit rapid clar că sistemul de design evolua și se schimba mai repede decât puteam încerca să-l organizez. La jumătatea drumului, am încetat să mai păstrez simbolurile organizate, optând în schimb să mă întorc și să le reorganizez după ce am terminat de recreat fiecare pagină. Când am încetat să mai merg înainte și înapoi între machete și simboluri și să-mi mai fac griji cu privire la organizarea ambelor, am putut lucra mai eficient.

A fost ușor să ajungi să apreciezi suprascrierile și simbolurile din Sketch. Caracteristicile au făcut programul mult mai puternic decât eram obișnuit și au crescut capacitatea de funcționare a fișierului pentru proiecte viitoare. Sarcina de a crea sistemul de proiectare în sine m-a provocat să mă scufund adânc în program și să înțeleg toate detaliile designului aplicației noastre . Am început să observ mici inconsecvențe în spațiere, dimensiunea pictogramei sau dimensiunea fontului pe care le-am putut corecta în timp ce lucram.

O descriere a ceea ce arată imaginea pentru textul alternativ
O legendă care va fi afișată sub imagine. (Previzualizare mare)

Pasul final a fost să te întorci în pagina de simboluri și să organizezi totul. Am curățat toate simbolurile, le-am șters pe cele care nu erau folosite și orice replici. În ciuda faptului că a fost puțin obositor, acesta a fost un pas foarte valoros în proces . Parcurgerea simbolurilor după ce am analizat documentul mi-a oferit șansa de a reevalua modul în care am creat simbolurile pentru fiecare pagină. Gruparea lor m-a forțat să mă gândesc la modul în care erau legate în aplicație.

Trecând prin acest proces de gândire, mi-am dat seama cât de dificil a fost să creez un sistem de denumire. Aveam nevoie să creez un sistem suficient de larg încât să cuprindă suficiente elemente, suficient de specific pentru a nu fi vag, și care ar putea fi înțeles cu ușurință de un alt designer. Mi-au trebuit câteva încercări până să ajung la un sistem funcțional de care am fost mulțumit. În cele din urmă, am organizat elementele în funcție de locul în care au fost utilizate în aplicație , grupând piese precum liste. A funcționat bine pentru o aplicație precum Badger, care avea modele distincte pentru diferite caracteristici ale aplicației. Produsul final a fost un fișier mai organizat, cu care ar fi mult mai ușor de lucrat pentru orice iterații viitoare de proiectare.

Design nou cu anteturi mai mari, inspirat de aplicațiile native Apple.
Modernizarea designului cu noi modele de antet. (Previzualizare mare)

Ca piatră de temelie a acestui proiect, am experimentat cu modernizarea designului. Am reproiectat anteturile în întreaga aplicație, bazându-mă pe aplicațiile native Apple pentru inspirație. Din fericire, echipa a fost încântată și de asta și ia în considerare implementarea modificărilor în actualizările viitoare ale aplicației.

În general, lucrul unui fișier Sketch până la astfel de detalii a fost o experiență neașteptat de utilă. Am plecat cu o înțelegere fundamentală mult mai bună a lucrurilor precum dimensiunea fontului, culoarea și spațierea, în virtutea refacerii fiecărei pagini. Exercițiul de copiere a designului existent a necesitat o atenție minusculă la detalii, care a fost foarte satisfăcătoare. Era ca și cum aș fi montat un model Lego: aveam toate piesele și știam cum trebuie să arate produsul final. Trebuia doar să organizez totul și să le adun împreună pentru a crea produsul finit. Acesta este unul dintre motivele pentru care îmi place să fac design UX. Este vorba despre rezolvarea problemelor și punerea laolaltă a unui puzzle pentru a crea ceva pe care toată lumea să-l poată aprecia.

Design final pentru o nouă caracteristică pentru aplicația web pentru hărți bursucul.
Design tablou de bord pentru aplicația web Badger. (Previzualizare mare)

Capitolul 2: Designul

Următoarea parte a stagiului mi-a permis să intru în buruieni cu niște lucrări de design. Sarcina: proiectarea unei noi pagini de import pentru aplicația web Badger.

Echipa lucra la reproiectarea badger-ului la integrarea CRM pentru a crea un sistem care să permită utilizatorilor să vadă orice sincronizare a datelor și să își gestioneze singuri conturile. Conexiunea actuală implică o mulțime de muncă practică de la CSA și AE bursuc pentru a se configura și întreține. Oferind o interfață pentru ca utilizatorii să interacționeze direct cu importurile de date , am dorit să îmbunătățim experiența utilizatorului pentru integrarea noastră CRM.

Design curent pentru procesul de import.
Proces existent: utilizatorii care integrează în prezent Badger cu conturile Salesforce nu pot gestiona fluxul de informații între cele două. Nu pot vedea erorile în datele importate în Badger și nici nu pot vedea cu ușurință starea importului lor. În dreapta este vizualizarea erorilor existentă pentru utilizatorii care importă prin foi de calcul. Dorim să îmbunătățim această experiență de utilizator și să o facem accesibilă și utilizatorilor integrați în Salesforce. (Previzualizare mare)

Scopul meu a fost să creez o pagină care să afișeze erori care apar în orice import de date, care, de asemenea, comunica utilizatorilor cum și unde să facă modificările necesare la datele lor. Dacă au existat mai multe erori asociate cu un singur import sau utilizatorii ar dori să vadă toate erorile simultan, ar trebui să poată descărca un fișier Excel cu toate aceste informații.

Obiective

  1. Creați o pagină de import care informează utilizatorul despre starea unui import în proces;
  2. Furnizați o înregistrare istorică a sincronizărilor contului între Badger și CRM cu erori detaliate asociate cu fiecare import;
  3. Furnizați linkuri către CRM pentru fiecare cont care are o eroare de import în Badger;
  4. Permiteți utilizatorilor să descarce un fișier Excel cu toate erorile restante.

Poveștile utilizatorilor

Client Badger cu cont CRM :
În calitate de client cu un CRM, vreau să pot conecta CRM-ul meu la bursucul meu și să vizualizez toate sincronizările datelor, astfel încât să fiu conștient de toate erorile din proces și să pot face modificări după cum este necesar.

Bursucul :
În calitate de bursuc, doresc ca utilizatorii să poată gestiona și vizualiza starea integrării lor CRM, astfel încât să pot economisi timp și muncă manuală, ajutând și remediand utilizatorii care își sincronizează bursucul cu conturile lor CRM.

Înainte să mă aprofundez cu adevărat în design, a trebuit să ne gândim pentru a decide ce informații să arătăm și cum:

  1. Importuri în vrac versus importuri continue
    În funcție de tipul de utilizator, există două moduri de a importa date în Badger. Dacă se face prin foi de calcul, importurile ar fi grupate și am putea vizualiza importurile în grupuri. Cu toate acestea, utilizatorii integrați cu CRM-urile lor ar trebui să aibă datele lor Badger actualizate în mod constant pe măsură ce au făcut modificări în CRM. Designul trebuia să poată face față ambelor cazuri de utilizare.
  2. Importați înregistrări
    Deoarece aceasta era o caracteristică nouă, nu eram absolut siguri de comportamentul utilizatorului. Astfel, a decide cum să organizăm informațiile a fost o provocare. Ar trebui să le permitem utilizatorilor să caute un defilare infinit într-o listă a istoriei lor? Cum ar căuta ei un anumit import? Ar trebui să poată? Ar trebui să arătăm activitatea zi de zi sau lună de lună?

În cele din urmă, am reușit să facem doar o estimare optimă pentru fiecare dintre aceste probleme - știind că am putea face ajustările corespunzătoare în viitor, odată ce utilizatorii au început să folosească funcția. După ce m-am gândit la aceste probleme, am trecut la wireframing. Am avut ocazia să proiectez ceva complet diferit și acest lucru a fost atât eliberator, cât și provocator. Designul final a fost o culminare a elementelor individuale din diferite modele care au fost create pe parcurs.

Proces de design

Cea mai grea parte a acestui proces a fost să înveți să o ia de la capăt. În cele din urmă, am învățat că forțarea a ceva în designul meu doar în scopuri estetice nu era ideală. Înțelegerea acestui lucru și eliberarea ideilor mele a fost cheia pentru a ajunge la un design mai bun. Aveam nevoie să învăț cum să o iau din nou și din nou pentru a explora idei diferite.

Trei explorări de design.
Primele câteva iterații: experimentați cu plasarea antetului, a butoanelor și a designului listei. Feedback-ul în acest moment și pentru următoarele câteva zile a fost constant așa cum ar trebui să fie: „hai să vedem ce altceva putem face”. Dar avantajele de a alerga ca un pui fără cap au fost că am dat din când în când de niște boabe de porumb de aur pe care le-am folosit în designul final. (Previzualizare mare)
O explorare a designului cu tematică albastră.
O explorare a designului care s-a întins puțin prea departe de aplicația bursuc. După aceasta, m-am întors puțin înapoi, dar designul final a beneficiat cu adevărat de explorarea unor idei atât de diferite. (Previzualizare mare)

Provocări

1. Utilizarea spațiului alb

De la început, trebuia să explorez ce informații doream să arătăm pe pagină. Au fost multe detalii pe care le-am putea include - și cu siguranță camera pentru a face asta.

Un tablou de bord care arată o mulțime de informații în exces.
Inițial, am fost foarte intimidat de perspectiva de a avea o mulțime de spațiu alb și un design minimalist, așa că am încercat din greu să vin cu informații de umplere, 75% dintre care utilizatorii noștri nu ar avea nevoie cu adevărat. Apoi am înghesuit totul în designul meu, permițând spațiu de respirație minim. O atitudine foarte bună pentru un urbanist din San Francisco; nu atât pentru crearea de design centrat pe utilizator. (Previzualizare mare)

Toate informațiile inutile au adăugat mult prea multă sarcină cognitivă și au îndepărtat de ceea ce utilizatorul era de fapt preocupat. În loc să încerc să scap de tot spațiul alb, trebuia să lucrez cu el. Având în vedere acest lucru, în cele din urmă am aruncat toate informațiile irelevante pentru a arăta doar ceea ce ne așteptăm ca utilizatorii noștri să fie cel mai preocupați: erorile asociate cu importurile de date.

Aceasta a fost versiunea finală:

Design final cu un design raționalizat al mesei cu activitate organizată pe lună.
Importuri organizate pe zi si luna. Aceasta a fost o organizare mai logică pentru scopurile noastre, mai ales că sincronizările dintre CRM și Badger au fost continue, nu doar la cerere. (Previzualizare mare)

2. Navigare

Următoarea provocare a fost să decizi între o bară laterală și un antet pentru afișarea informațiilor. Avantajele barei laterale au fost că informațiile vor fi vizibile în mod constant pe măsură ce utilizatorul derula. Dar a trebuit să ne asigurăm și că informațiile conținute în bara laterală sunt legate în mod logic de ceea ce se întâmplă în restul paginii.

Antetul a oferit avantajul unui design curat, cu o singură coloană. Dezavantajul a fost că a ocupat o mulțime de imobile pe verticală, în funcție de cât de multe informații erau conținute în antet. De asemenea, a prioritizat vizual conținutul antetului față de ceea ce era sub acesta pentru utilizator.

Explorarea proiectării cu o navigare de top.
Iterație care explorează navigarea de sus. Contra: utilizatorii ar parcurge lista de importuri pentru a vedea erorile și trebuie să deruleze înapoi pentru a vedea rezumatul. Conținutul și locația celor două celule din dreapta erau, de asemenea, confuze. Nu avea sens ca cele două celule să defileze cu restul paginii, deoarece erau un rezumat al tuturor informațiilor din stânga acesteia. Dar ar crea o experiență confuză pentru utilizator dacă nu ar defila. În general, organizarea informațiilor de pe pagină a fost nealiniată cu designul. (Previzualizare mare)

Odată ce am stabilit ce informații să afișez unde, navigarea din bara laterală a devenit decizia mai logică. Ne așteptăm ca utilizatorii să fie preocupați în primul rând de erorile asociate cu importurile lor și, cu un antet mare, prea mult din aceste informații ar cădea sub fold. Bara laterală ar putea fi apoi un container pentru un rezumat de import și activitate care ar fi vizibil pe măsură ce utilizatorul derulează.

Designul barei laterale: După ce m-am hotărât să am o bară laterală, s-a ajuns să decid ce informații să includ și cum să o afișez.

Cinci explorări diferite de design din bara laterală.
Diferite explorări ale designului barei laterale. Designul a devenit din ce în ce mai simplu pe măsură ce am restrâns informațiile pe care utilizatorii doreau să le vadă. (Previzualizare mare)

M-am străduit să creez un design care să fie interesant din punct de vedere vizual, deoarece erau puține informații de arătat. Din acest motiv, m-am trezit încă o dată să adaug elemente inutile pentru a umple spațiul, deși am vrut să dau prioritate utilizatorului. Am experimentat diferite combinații de conținut și culori , încercând să găsesc compromisul între design și utilizare. Cu cât am lucrat mai mult cu el, cu atât am reușit să analizez designul până la oasele goale. A devenit mai ușor să diferențiezi informațiile utile de materiale de umplere. Produsul final este un design simplificat, cu doar câteva statistici rezumative. De asemenea, oferă o mare flexibilitate pentru a include mai multe informații în viitor.

Design final pentru o nouă caracteristică pentru aplicația web pentru hărți bursucul.
Design final: Subtextul de sub butoane a fost eliminat și informațiile despre conturile create/conturile actualizate sunt plasate în propriul container și mutate în jos pentru a adăuga interes vizual. (Previzualizare mare)

Proces de import : pagina de progres a importului a fost creată după finalizarea designului paginii de import. Cea mai mare provocare de proiectare aici a fost să decideți cum să afișați sincronizarea importului în curs. Am încercat diferite soluții de la ferestre pop-up și suprapuneri, dar în cele din urmă m-am hotărât cu afișarea progresului în bara laterală. În acest fel, utilizatorii pot rezolva în continuare orice erori și pot vedea înregistrarea istorică a datelor contului lor în timp ce un import este în curs. Pentru a preveni orice întrerupere a importului, butoanele „Sincronizare date” și „Înapoi la Badger” sunt dezactivate, astfel încât utilizatorii să nu poată părăsi pagina.

Design final cu datele de sincronizare și butoanele de înapoi la bursuc dezactivate.
Sincronizarea datelor și butoanele Înapoi la Badger au fost dezactivate pentru a împiedica utilizatorii să întrerupă sincronizarea și să revină la aplicație. (Previzualizare mare)

Odată cu design-urile făcute, am trecut pe HTML și CSS.

Captură de ecran a programului de schiță și codul studioului vizual cu codul pentru design.
Începând să-mi codific designul. (Previzualizare mare)

Capitolul 3: HTML/CSS

Acest proiect a fost prima mea experiență cu orice tip de codificare. Deși am încercat să învăț HTML și CSS înainte, nu atinsesem niciodată un nivel de competență. Și ce modalitate mai bună de a începe decât cu o machetă a propriului design?

Înțelegerea logicii organizării unui document HTML mi-a amintit de organizarea documentului Sketch cu simboluri și suprascrieri. Cu toate acestea, asemănările s-au încheiat aici. Codarea se simțea ca un lucru foarte străin pe care încercam în mod constant să-mi înțeleg capul. După cum ar spune mentorul meu, „ În programare flexezi mușchi foarte diferiți decât în ​​design .” Cu produsul final în mână acum, sunt pe deplin convins că învățarea codificării este cel mai tare lucru pe care l-am învățat să-l fac de când am fost antrenat la olita.

Prima provocare, după configurarea unui document și înțelegerea elementelor de bază, a fost lucrul cu Flexbox. Designul pe care l-am creat implica două coloane una lângă alta. Porțiunea din dreapta a fost menită să deruleze, în timp ce partea stângă a rămas statică. Flexbox părea o soluție curată în acest scop, presupunând că o pot face să funcționeze.

Implementarea Flexbox a constat într-o mulțime de încercări și erori și copiere oarbă a codului în timp ce m-am amestecat prin diverse site-uri web, citind tutoriale și inspectând codul. Cu îndrumarea mentorului meu pe parcursul întregului proces, în cele din urmă am reușit să funcționeze. Nu voi uita niciodată momentul în care am înțeles în sfârșit că, folosind flex-direction: column , aș aduna toate elementele într-o singură coloană, iar flex-direction: row a ajutat să le plasez într-un singur rând.

Are atât de mult sens acum, deși înțelegerea mea inițială a fost exact opusul (am crezut că flex-direction: column ar pune elemente în coloane una lângă alta). În mod surprinzător, nici măcar nu am ajuns la această realizare decât după ce codul a funcționat. Mi-am revizuit codul și mi-am dat seama că nu îl înțeleg deloc. Ce m-a dat de cap? În CSS-ul meu, am codificat flex-direction: row în clasa pe care am numit-o column . Acest scenariu a fost destul de indicativ pentru modul în care a decurs restul primei mele experiențe de codare. Modelul meu mental a fost rareori aliniat cu logica codului și adesea se ciocneau și mergeau pe căi separate. Când s-a întâmplat acest lucru, a trebuit să mă întorc, să-mi găsesc concepțiile greșite și să corectez codul.

După ce am configurat Flexbox, trebuia să-mi dau seama cum să fac ca coloana din stânga să rămână fixă ​​în timp ce porțiunea din dreapta se derula. Se pare că acest lucru nu a putut fi realizat cu o singură linie de cod așa cum am sperat. Dar lucrul peste asta m-a ajutat să înțeleg relația părinte-copil care m-a ajutat enorm în restul procesului.

Tabelul cu designul importurilor care arată cronologia și pictogramele calendarului
Cronologie verticală cu pictograme calendar. (Previzualizare mare)

Codarea cronologiei verticale și a cadranului a fost, de asemenea, un proces. Cronologia a fost mai simplă decât anticipasem inițial. Am reușit să creez un dreptunghi subțire, să-i setez o umbră interioară și o umplere cu gradient și să-l atribui lățimii fiecărui jurnal de activitate.

Cadranul era complicat. Am încercat să-l implementez cu CSS pur cu foarte puțin succes. Au fost de câteva ori m-am gândit să schimb designul pentru ceva mai simplu (cum ar fi o bară de progres), dar sunt destul de fericit că am rămas cu el.

Imagine care arată modelele originale și finale ale cadranului.
Modele de cadran originale și finale. (Previzualizare mare)

O luptă majoră a fost obținerea discului de progres pentru a suprapune cercul de fundal de-a lungul graniței. Aici am schimbat puțin designul - în loc să am porțiunea descărcată a cadranului de progres, se suprapune peste tot. A fost un compromis între designul meu și cod pe care inițial nu am fost dispus să-l fac. După cum se dovedește, totuși, am fost mulțumit de rezultatul final și, odată ce mi-am dat seama de acest lucru, m-am bucurat să fac acel compromis. Apelul final a fost implementat prin JavaScript.

A existat un moment în procesul meu de codare în care am aruncat fiecare linie de cod pe care am scris-o vreodată în fiecare clasă pentru a încerca să o fac să funcționeze. Pentru a compensa această lipsă de retrospectivă, a trebuit să petrec destul de mult timp examinând și inspectând toate elementele pentru a elimina codul inutil . M-am simțit ca un proprietar care dă afară chiriașii care nu plăteau chirie. A fost cu siguranță o lecție învățată în menținerea unui nivel de menaj și în a fi judicios și atent cu codul.

Majoritatea experienței s-au simțit ca o traversare oarbă și o învățare retrospectivă. Cu toate acestea, nimic nu a fost mai satisfăcător decât să văd produsul finit. Parcurgerea procesului m-a făcut să interacționez cu munca mea într-un mod pe care nu l-am făcut niciodată înainte și mi-a oferit o perspectivă asupra modului în care este implementat designul. În toate așteptările mele pentru stagiu, nu am anticipat niciodată că voi putea codifica și crea unul dintre propriile mele modele. Chiar și după ce mi sa spus că voi putea face acest lucru în prima mea zi, nu am crezut decât după ce am văzut această pagină finalizată.

Capitolul 4: Lucrul cu Baby Bursuci

Ca parte a procesului de integrare a utilizatorilor Badger cu conturile lor CRM, aveam nevoie de utilizatorii noștri să se conecteze la CRM-ul lor, solicitându-i să-i redirecționăm din badger către site-ul CRM nativ. Pentru a preveni o trecere bruscă și zguduitoare de la un site la altul, trebuia să proiectez pagini de încărcare intermediară.

Design original pentru pagina de redirecționare cu logo-ul hărților bursuc și „Ne vedem mai târziu!” mesaj.
Una dintre primele modele ale unui exemplu de pagină de redirecționare statică. A fost simplu și și-a îndeplinit scopul, dar nu a făcut altceva. (Previzualizare mare)

Am început cu pagina ta de redirecționare statică comună. Au fost simpli și cu siguranță și-au îndeplinit scopul, dar nu am fost foarte mulțumiți de ei.

Provocarea a fost să creăm ceva simplu și interesant, care să informeze utilizatorul că părăsește site-ul nostru în doar câteva secunde, acesta era vizibil. Designul ar trebui să se prezinte, să explice de ce a fost acolo și să plece înainte ca cineva să se obosească să se uite la el. A fost în esență un exercițiu de speed dating. Având în vedere asta, m-am hotărât să încerc animațiile – în special pe cea a unui mic bursuc obraznic, inspirată de logo-ul existent.

Imagine care arată 7 iterații ale designului bursucului și cum s-a schimbat.
Evoluția „baby bursuc”. (Previzualizare mare)

Folosind logo-ul bursuc ca punct de referință de pornire, am creat diferite caractere bursuc în Adobe Illustrator. Logo-ul original mi s-a părut puțin prea sever pentru o animație de încărcare, așa că am optat pentru ceva puțin mai drăguț. Am păstrat pieptul roșu și trăsăturile feței din logo-ul original pentru coerență și am lucrat la crearea unui corp și a unui cap în jurul acestor elemente. Capul și dungile au durat ceva timp să se maseze în forme de care am fost mulțumit. Corpul a luat forma puțin mai ușor, dar a durat puțin mai mult pentru a găsi proporția potrivită între dimensiunea capului și a corpului. Odată ce l-am pus în cuie, eram gata să trec la animare.

Opriți cadrele de animație care animau puiul de bursuc.
Încercarea mea de a opri animația. (Previzualizare mare)

Primul meu instinct a fost să încerc o animație stop-motion. M-am gândit că va fi grozav - la Wallace și Gromit. Dar după prima încercare, apoi a doua, și toate cele care au urmat, a devenit clar că vizionarea acelui spectacol în copilărie nu m-a echipat pe deplin cu abilitățile necesare pentru a face o animație stop-motion.

Pur și simplu nu am reușit să obțin netezimea pe care mi-am dorit-o și au existat mici inconsecvențe care s-au simțit prea supărătoare pentru o animație de încărcare foarte scurtă. Animația rulează de obicei la 23 de cadre pe secundă, iar animația mea de bursuc avea doar aproximativ 15 cadre pe secundă. M-am gândit să adaug mai multe cadre, dar la sugestia mentorului meu, am decis să încerc animația personajelor.

Aceasta a fost prima dată când am animat ceva care avea mai mult de 5 părți în mișcare și a existat cu siguranță o curbă de învățare pentru a înțelege cum să animați un personaj bidimensional într- un mod vizual satisfăcător. Aveam nevoie să animez elementele individuale să se miște singure, independent de întreg, pentru a face mișcarea credibilă. Pe măsură ce lucram la animație, straturile pe care le importam au devenit din ce în ce mai granulare. Capul a trecut de la un strat la cinci pe măsură ce am învățat comportamentul programului și cum să fac mișcarea bursucului.

Am ancorat fiecare membru al corpului și am pus fiecare parte a corpului ca un copil pe stratul părinte al corpului. Am stabilit punctele de ancorare în mod corespunzător în partea de sus a coapselor și umerilor pentru a mă asigura că se mișcă corespunzător și apoi, folosind rotații și relaxare, am simulat mișcarea părților corpului. Capul era un pic cam complicat și necesita o mișcare verticală independentă de corp. Pentru ca saltul să pară mai realist, am vrut ca capul să atârne puțin în spațiu înainte de a fi împins în sus de restul corpului și să coboare puțin după restul lui. Am ajustat, de asemenea, unghiul pe care am încercat să-l fac să pară ca și cum ar fi condus cu nasul, îndreptat în sus în timpul săriturii și direct în timp ce alerga.

Picioarele excesiv de antropomorfe au fost abandonate de la desenele originale. Au fost una dintre ultimele modificări aduse puiului de bursuc. Nu m-am gândit cât de ciudat arată degetele de la picioare umane pe un bursuc.

Animația prezentată pe pagina care redirecționează utilizatorul înapoi la bursuc arăta copilul bursuc alergând înapoi la bursuc cu un rucsac plin cu informații din CRM.

Animație cu bursucul bebeluș care rulează înapoi la aplicația bursuc.

Și în sfârșit: bursucul confuz. Acest lucru a fost făcut pentru ultima pagină pe care trebuia să o creez: o pagină de eroare care anunță utilizatorul cu privire la complicații neașteptate în procesul de integrare. Și ce modalitate mai bună de a face asta decât un bursuc simpatic și confuz?

Imagine care arată patru iterații ale feței puiului de bursuc.
Explorarea de design a feței de bursuc. (Previzualizare mare)

Partea dificilă aici a fost combinarea profilului lateral al bursucului de desene animate existente și a logo-ului pentru a crea o formă de cap cu fața în față. Înainte de a începe acest proiect, nu văzusem niciodată un bursuc adevărat viu. Inutil să spun că Badger și-a găsit drumul în căutările mele de imagini pe Google luna aceasta. Am fost surprins să văd cât de plat este de fapt capul unui bursuc. În primele mele modele, am încercat să imit asta, dar nu am fost mulțumit de rezultat. Am mai lucrat cu forma, ajustând plasarea nasului, dungilor și urechilor pentru a obține rezultatul final:

Ochi vârtejți inspirați de oposumul din filmul Fantastic Mister Fox.

Acest proces de animație m-a forțat să-mi duc cunoștințele preexistente la un nivel superior. Trebuia să mă împing dincolo de ceea ce știam , mai degrabă decât să mă limitez cu ceea ce credeam că pot face. Am început inițial cu animația stop-motion pentru că nu aveam încredere în mine să fac animația personajelor. Dându-mi șansa de a încerca ceva nou și diferit, am reușit să realizez ceva care mi-a depășit propriile așteptări.

Patru modele în stil de desene animate bazate pe animația baby bursuc.
Modelele s-au extins de la bursucul original pentru copii pentru a fi tipărite și utilizate în jurul biroului și pe materiale de marketing. (Previzualizare mare)

Concluzie

Cele trei luni pe care le-am petrecut la stagiu au fost incredibil de îmbucurătoare. Fiecare zi a fost despre a învăța și a încerca ceva nou. Au fost provocări pentru tot ceea ce am făcut – chiar și cu sarcini cu care eram mai familiarizat, cum ar fi designul. De fiecare dată când cream ceva, eram foarte nesigur și îngrijorat de modul în care avea să fie primit. Au fost multe îndoieli de sine și multe idei aruncate.

Din acest motiv, a fost incredibil să fac parte dintr-o echipă și să am un mentor care să mă conducă în direcția corectă. Mi se spunea să încerc altceva a fost adesea singura încurajare de care aveam nevoie pentru a încerca altceva și a realiza ceva mai mare și mai bun. Îmi place să mă imaginez ca o rozătoare într-un joc de lovire a cârtiței, fiind lovită în cap din nou și din nou, dar mereu apare din nou și din nou. Acum, luptele și provocările au ajuns la sfârșit, vreau doar să o fac din nou.

Apreciez ceea ce am învățat și cum am fost împins să merg dincolo de ceea ce credeam că pot face. Este o nebunie să văd cât de departe am ajuns în câteva luni. Înțelegerea mea despre a fi un designer UX a crescut enorm, de la descoperirea caracteristicilor, până la elaborarea designului și apoi scrierea codului front-end pentru a-l implementa. Acest stagiu m-a învățat cât de mult mai am de învățat și m-a motivat să lucrez în continuare. Am ajuns să înțeleg că ceea ce pot face nu ar trebui să fie limitat de ceea ce știu să fac.

mascota bursucul