În Studii de caz

Studiu de caz: ViewFlux

viewflux

ViewFlux este un serviciu online pentru designeri și agenții, cu ajutorul căruia designerii pot colabora, colecta feedback și crea prototipuri fidele pentru website-uri și aplicații chiar din faza de design. Deși este deocamdată în variantă BETA, deja se bucură de peste 1000 de utilizatori, adunați în mai puțin de o lună. Mai mult decât atât, a figurat în rubrica „Sites of the week” pe Abduzeedo.com.

ViewFlux
Client ViewFlux
Developer Five Tailors
Dată lansare 22 Octombrie 2013
Domeniu de activitate Consultanță de branding și comunicare
Tehnologii folosite
  • PhotoShop, Illustrator, Xara Designer Pro;
  • HTML 5, CSS3, JavaScript.
Echipă
  • Creative & UX Direction: Andrei Gadoiu;
  • Graphic Design: Andrei Gadoiu & Andrei Bacter;
  • Developer: Alex Drimbe;
  • Consultancy: Jan Lukacs.

ViewFlux, pe scurt

Platforma a fost creată din dorința de a rezolva problema comunicării dintre designer/agenție și client. Astfel, ViewFlux își propune să ofere o soluție la această problemă, oferind un spațiu în care, pe perioada unui proiect de design, pot fi stocate fișierele și discuțille pe marginea proiectului respectiv, împreuna cu cerințele clienților.

În plus, designerii pot crea prototipuri prin intermediul cărora clienții vor avea parte de o experiență interactivă a site-ului sau aplicatiei lor chiar în browser, încă din faza de design. Un alt avantaj este faptul că platforma păstrează toate versiunile fișierelor și comentariile aferente, oferind atât o perspectivă de ansamblu asupra întregului proces de design, cât și posibilitatea de revenire la o versiune mai veche.

Deși se adresează atât designerilor independenți, cât și agențiilor, ținta principală a ViewFlux este resprezentată de freelanceri.

02-overview

Începutul

Proiectul a luat naștere în iulie 2012, în urma unei inițiative derulate de FiveTailors, o agentie de branding și custom web development din Oradea. Inițiativa a constat într-un concurs de idei organizat de membrii agenției, concurs la finalul căruia ViewFlux a fost aleasă drept idee câștigătoare din 18 idei înscrise.

Structura inițială a proiectului, așa cum a fost prezentat la acel moment era următoarea:

03-structura-initiala

Provocări generale

Prima provocare a fost cercetarea riguroasă a concurenței, pentru a putea da o identitate clară produsului și a îl diferenția. Cu toate că la început existau doar 2-3 produse concurente relevante, pe parcursul dezvoltării au fost identificate peste 10 produse relativ similare, fapt care a adus și schimbări în procesul de dezvoltare.

Provocări au fost și în ceea ce privește partea de dezvoltare: inițial, exista o echipă de colaboratori dedicată părții de dezvoltare, însă în final, aplicația a fost creată de un singur developer, fapt care a cauzat extinderea perioadei de dezvoltare față de estimările făcute la început.

Pe parcursul dezvoltării, o provocare destul de mare a fost identificarea unui echilibru între adăugarea de feature-uri noi și perfecționarea funcționalității de bază. Bineînțeles, odată cu introducerea de funcții noi pe parcursul dezvoltării, au intervenit și modificări de concept.

Design

Fiind un serviciu adresat designerilor, ViewFlux nu putea să stea rău la acest capitol. Să vedem așadar în cele ce urmează cum a fost aleasă și dezvoltată identitatea vizuală a platformei.

Logo

Alegerea numelui de „ViewFlux” a fost o provocare, varianta finală fiind hotărâtă după două luni de brainstorming. Înainte de a se ajunge la varianta finală de logo, s-au făcut câteva zeci de propuneri, unele dintre ele bazându-se mult pe ideea de „flux” și „vizual”, însă aceasta s-a dovedit a nu fi cea mai bună abordare. Iată doar câteva dintre schițele făcute la început:

04-logo-proposals

După toate aceste încercări nereușite, s-a hotărât schimbarea direcției și introducerea în simbol a componentei principale a serviciului: „feedback”. Astfel, logoul a fost construit pe baza simbolului asociat acțiunii de „Comment”, în care s-a introdus și inițiala „V”, textul ce însoțește simbolul fiind ulterior construit în așa fel încât să se potrivească cu simbolul creat.

S-a mers pe o variantă foarte simplă a logoului și din punct de vedere cromatic, alegându-se o singură culoare pentru acesta: alb sau gri închis. Logoul final, pe care îl vedeți mai jos, a fost realizat cu ajutorul Xara Designer Pro X.

05-logo

Interfață

Elementele de interfață au fost realizate cu ajutorul Adobe Photoshop. S-a pornit de la ideea ca interfața trebuie să fie cât mai simplă, pentru ca accentul să cadă pe proiectele și pe imaginile încărcate de designeri. Astfel, s-a mers pe utilizarea unor elemente geometrice simple (linii, dreptunghiuri și cercuri), iar din punct de vedere cromatic s-a ales o paletă restrânsă: gri și portocaliu.

Într-o primă etapă, interfața conținea exclusiv lista de proiecte, însă pe măsură ce lucrurile au evoluat, s-a făcut simțită nevoia introducerii unor elemete suplimentare, elemente care în abordarea inițială nu aveau loc.

06-schita-aplicatie

În final, s-a ajuns la o interfață compactă, organizată pe două coloane: în partea stângă sunt informațiile specifice fiecărei secțiuni, iar în dreapta, zona de lucru. S-a încercat păstrarea acestei structuri în toată aplicația.

interfata

Elemente de interfață

Interfața a fost construită pe baza unei structuri cu care designerii sunt deja familiarizați:

    • tool-uri pe partea dreapta (similar Photoshop, Illustrator, etc.);
    • proiectele sunt prezentate sub formă de carduri;
    • notificări vizuale pentru comentarii și vizualizări similare cu cele de pe Dribble și Behance.
07-design-elements

După cum spuneam și puțin mai sus, s-a încercat păstrarea aceluiași stil în aplicatie și în site, astfel că stilul butoanelor, fonturile folosite, culorile și stilul componentelor este comun.

Elementele din interfață sunt în cea mai mare parte flat și într-o singură culoare, culoarea principală fiind una neutră – griul – pentru ca accentul să cadă pe zona de lucru și pe designurile încărcate în sistem, nu pe designul interfeței.

În ceea ce privește fonturile, s-a optat pentru câteva dintre cele oferite de Google prin Google Fonts, iar în locurile în care e nevoie de avataruri pentru utilizatori, s-au folosit măști circulare.

08-avatars

Icoanele folosite au fost realizate special pentru aplicație, fiind realizate cu ajutorul Adobe Illustrator și Xara Designer Pro X. S-a păstrat și pentru acestea stilul flat, monocrom, cu o abordare cât mai simplistă. Grosimea liniilor din icoane a fost aleasă în concordanță cu liniile separatoare folosite în aplicație.

09-icons

Visual Feedback

În ceea ce privește partea de feedback vizual, au fost create 3 tool-uri diferite: punct, dreptunghi (pentru marcarea unei zone din design) și săgeată (pentru concentrarea pe anumite detalii). Fiecare dintre acestea are asociat (la click) un box ce conține discuția corespunzătoare zonei marcate.

10-tools

Prototyping

Pentru partea de prototyping, s-a folosit un stil de controale similar cu cel descris mai sus, însă cu mici modificări. Pentru a putea distinge Hotspoturile (zonele de comentarii) de Linkspoturi (zonele cu diferite trimiteri prin click), s-a hotărât ca pentru acestea din urmă să se folosească dreptunghiuri pline, dar semitransparente. Similar chenarelor pentru comentariile de la tool-ul de „Feedback”, și acestea au asociat un „box” de unde poate fi selectat fișierul la care să trimită.

11-linkspots

User Experience

S-a ales lipsa meniului în aplicație, considerându-se mai util un bread-crumb care îți arată tot timpul unde te afli.

Coloana din partea stângă este coloana în care se afișează tot timpul informații și de unde se fac acțiuni, păstrarea acestei structuri ajutând utilizatorul să înțeleagă mai bine modul de folosire. Pentru a îmbunătăți experiența cu lucrul pe un anumit fișier de design, toate opțiunile aferente tool-urilor se deschid într-un panel lateral (la click pe tool-ul respectiv); s-a ales varianta aceasta în detrimentul pop-up-urilor, lăsându-l pe user să vadă ce posibilități are, fără să îi întrerupă lucrul.

Pentru îmbunătățirea procesului de învățare, după primul login (și ulterior din contul utilizatorului) se poate face un tur care explică toate funcțiile importante ale aplicației.

În ceea ce privește experiența clientului cu aplicația, acesta primește doar un link generat de designer, unde vede totul într-o manieră mult simplificată. De asemenea, și clientul este îndrumat în momentul în care accesează link-ul pentru prima dată.

Programare

Pe partea de frontend, s-a început cu Ember JS framework, dar s-a trecut ulterior la Backbone JS framework, datorita vitezei sporite și a comunității mai dezvoltate. Un avantaj al folosirii Backbone este că în final, codul minified are sub 10 kB.

Pe partea de backend, s-a construit un API de tipul REST, folosind php Zend Framework, care și stă la baza aplicației. De altfel, creatorii ViewFlux plănuiesc ca în viitor să facă public API-ul, deschizându-se în acest fel către integrarea cu alte servicii.

Pentru a putea trimite și vizualiza instantaneu comentariile adăugate, s-au folosit websockets prin NOD JS, asta însemnând că designerul și clientul pot comunica „vizual” pe marginea designului, similar unui sistem de chat.

Provocări în procesul de development:

În primul rând, după cum am menționat și în partea de început a acestui articol, cea mai mare provocare a fost dezvoltarea întregii aplicații de către un singur programator.

O altă provocare a fost găsirea unei soluții pentru a putea lăsa clienții să comenteze fără să se înregistreze în prealabil în sistem, adică fără să aibă un cont, ci doar un nume și o adresă de e-mail. Soluția identificată de dezvoltator a fost crearea unor utilizatori temporari, care sunt adăugați în sistem doar în momentul în care se aduce un prim comentariu.

În loc de concluzie, un fun fact

Feedback-ul legat de designul aplicației și al site-ului ViewFlux a fost obținut cu ajutorul ViewFlux.