În Studii de caz

Studiu de caz: Lumy, platformă de usability testing din România

Logo Lumy

Lumy este prima platformă de usability testing din România, care oferă informații exacte în legătură cu un website-ul sau o aplicație, înainte ca acestea să fie lansate pe piață.

Identificarea problemei

În cadrul departamentului de UX design al agenției REEA, s-a identificat necesitatea unui feedback real din partea pieței, înainte de lansarea unui site sau a unei aplicații, pentru a ști dacă produsul este într-adevăr adaptat nevoilor utilizatorilor. Obținerea acestuia poate fi dificilă și consumatoare de resurse, atât din punct de vedere financiar, cât și din perspectiva timpului necesar.

Ca răspuns la aceste probleme, a luat naștere proiectul de tip startup Lumy.ro.

Așadar, serviciile de usability testing pot ajuta la:

  1. înțelegerea comportamentului utilizatorilor în site sau aplicație;
  2. îmbunătățirea ratei de conversie;
  3. confirmarea sau infirmarea utilității unui produs digital, din perspectiva utilizatorilor;
  4. îmbunătățirea experienței de brand a utilizatorilor;
  5. descoperirea unor părți slabe ale produsului cauza acestora;
  6. creșterea vânzărilor;

Conturarea conceptului

În urma cercetării, s-a ajuns la concluzia că principalele elemente care trebuie să fie testate sunt navigabilitatea website-ului sau aplicației, relevanța conținutului, eficiența designului și ușurința cu care utilizatorii pot realiza anumite procese critice în cadrul produsului respectiv.

Utilizatorii care au conturi de testeri sunt remunerați pentru contribuția adusă procesului de testare, dar doar după activarea contului și completarea integrală a profilului. În cadrul platformei, există două tipologii de testeri: începător și avansați, singura diferență între aceste două conturi fiind accesul la diferite tipuri de teste. În funcție de dificultatea acestora, pentru fiecare test realizat, utilizatorului i se va aloca în cont un număr de puncte lumy.

Tipuri de teste de usability

Teste de tip heatmap

Acestea sunt folosite pentru a identifica unul sau mai multe elemente care atrag atenția utilizatorilor. Testerul va vizualiza pagina unui website, însă doar pentru 10 secunde și apoi va fi rugat să specifice care element îi atrage atenția la prima vedere.

Teste de tip clickmap

În cadrul testelor clickmap, testerii vizualizează o pagină a unui website sau a unei aplicații și sunt rugați să îndeplinească acțiuni simple, asemănătoare cu cele de la testele de tip task, pentru ca platforma să poată monitoriza doar click-urile pe care le realizează și durata necesară pentru îndeplinirea acțiunii respective.

clickmap

Teste de tip preferințe

Acest tip de test presupune afișarea a două designuri distincte, unul lângă altul, care reprezintă de fapt aceeași secțiune din cadrul unui website sau al unei aplicații. Cei care testează vor trebui să aleagă versiunea pe care o preferă. Acest tip de test este utilizat de companii în special atunci când doresc să aducă îmbunătățiri anumitor secțiuni ale unui website sau aplicații.

Teste de tip feedback

Acestea sunt considerate unele dintre cele mai eficiente teste, deoarece utilizatorii sunt liberi să își exprime părerile legate de website-ul sau aplicația pe care o testează. Ei sunt rugați să răspundă în scris la întrebări simple, legate de anumite acțiuni specifice pe care le-au făcut în site sau aplicație. Pe lângă transmiterea feedback-ului în scris, platforma monitorizează și timpul necesar pentru îndeplinirea acțiunilor și generează clickmap-uri și heatmap-uri. Acest tip de test este disponibil doar pentru testerii avansați.

Teste de tip video feedback

Acest tip de teste este asemănător celui prezentat anterior, singura diferență fiind aceea că feedback-ul este transmis în format video, audio și text. În același timp, se va efectua și înregistrarea video a monitorului de pe care utilizatorii efectuează testul. Pe lângă acestea, platforma va monitoriza timpul necesar pentru îndeplinirea acțiunilor și va genera clickmap-uri și heatmap-uri. Acest tip de test este disponibil doar pentru testerii avansați.

tester_video

UX Direction

Structurarea platformei desktop s-a făcut progresiv, implicând pe tot parcursul dezvoltării prototipului echipa de designeri și cea de dezvoltatori. Fiind un produs web complex, cu două tipologii de utilizatori (testeri și companii), s-a considerat necesară împărțirea site-ului în două sub-site-uri, fiecare din ele dedicat unei anumite categorii de utilizatori.

S-a stabilit să se folosească ribbon-ul pentru a notifica utilizatorii privind anumite informații esențiale legate de conturile lor pe site. Pentru aspectele legate de informațiile profilului utilizatorilor, s-a preferat varianta notificării in place, iar pentru toate funcționalitățile majore ce privesc realizarea de teste și comandarea de teste se folosește notificarea prin pop-up-uri.

Informațiile disponibile pe cele două sub-site-uri sunt grupate astfel încât utilizatorii să își poată administra cu ușurință contul, dar în același timp să aibă la îndemână informații pentru orice fel de neclaritate ar putea avea.

lumy

Design

Încă din stadiul de concepție s-a urmărit delimitarea celor două tipuri de utilizatori: testeri și companii, delimitare care s-a realizat în primul rând prin cromatică, folosind culorile verde și maro, iar colaborarea dintre utilizatori este simbolizată prin elementele vizuale din logo, și aici ne referim la așa-numitele speech bubbles. S-a mers pe varianta unui design flat, simplu și curat, care să evidențieze conținutul. Un alt aspect important este că designul a fost conceput să fie responsive, fiind accesibil atât pe desktop, cât și pe device-uri mobile.

design lumy

Implementare

Prima etapă a fost analiza proiectului, stabilirea unor obiective pe termen scurt și lung. În urma unor ședințe îndelungate de brainstorming, a fost realizat un wireframe, iar apoi s-a trecut la implementarea platformei cu cele două versiuni, cea destinată testerilor și cea pentru companii, proces desfășurat în mai multe faze:

  • versiunea pentru testeri și realizarea de teste video și feedback de către testeri prin intermediul aplicației Lumy Recorder;
  • versiunea pentru companii;
  • integrarea testelor de tip preferințe, clickmap, heatmap;
  • comenzi de teste pe partea destinată companiilor;
  • valorificarea câștigurilor testerilor;
  • versiunea platformei în limba engleză;
  • upgrade pe partea de companii străine;
  • implementare API pentru aplicația iOS.

Aceste etape au fost implementate în cadrul echipei .NET. În paralel, echipa iOS a implementat aplicația Lumy pentru iPhone și Lumy Recorder pentru iPhone. Totodată, s-a adaptat website-ul pentru telefoane mobile și tablete.

Ca si tehnologii folosite, putem enumera: Axure, MVC4, C#, MS SQL Server, Microsoft TFS, Node.js, HTML5, CSS3, MailChimp, NearForums, Scrum Project Management. Pe partea de iOS, s-au utilizat limbajele de programare Objective C și C++ și s-a folosit iOS SDK și OpenGL.

tipologie testetargetare testeri

Provocări

Partea cea mai solicitantă a startup-ului a fost dezvoltarea a ceea ce se numește „Lumy Recorder”, o aplicație desktop stand-alone. Aceasta se ocupă cu înregistrarea unor sesiuni de testare, în cadrul cărora se captează răspunsul în format text al utilizatorului, vocea acestuia și acțiunile petrecute pe ecranul acestuia. Datele capturate se transmit instantaneu către un server, care le stochează într-o bază de date centralizată.

Tehnologiile folosite pentru realizarea aplicației au fost următoarele:

  • pentru captura ecranului: filtru de captură ecran, împreună cu FFmpeg;
  • pentru captura audio: s-a folosit FFmpeg mapat cu Windows Core Audio pentru detecția și selectarea microfonului;

Comunicarea între browser și aplicație s-a făcut prin intermediul unui server local http. Comunicarea cu server-ul s-a făcut prin TCP. Pe parte de server pentru stocarea stream-ului de date, s-a folosit NodeJs, care pornește instanțe de FFmpeg.

Cele mai dificile acțiuni au fost identificarea unui mod eficient de captură a ecranului și comprimarea cât mai bună a fluxului de date audio și video. O altă situație solicitantă a fost maparea microfonului reprezentat în modul FFmpeg, cu cele existente deja în sistem.

De asemenea, îndrăzneață a fost și dezvoltarea Lumy Recorder pentru iOS. Prin intermediul acestei aplicații, testerii înscriși în cadrul platformei vor putea realiza teste de tip feedback și video, iar companiile vor primi o reacție reală pentru versiunile mobile ale website-urilor realizate.

Aplicația Lumy Recorder pentru iPhone a fost realizată utilizând limbajele de programare Objective C și C++ și folosind iOS SDK și OpenGL. O echipă formată din trei dezvoltatori a lucrat peste 600 de ore pentru a reuși publicarea în Apple Store. Cea mai complicată parte din dezvoltarea aplicației a fost realizarea capturii video, deoarece SDK-ul nativ nu permite captură video de pe browser, astfel că dezvoltatorii au fost nevoiți să găsească o altă metodă, folosind OpenGL.

În clipul de mai jos puteți vedea un exemplu de test video, realizat de pe un iPhone 5S: