Kako smo dizajnirali Foursquare Swarm 5.0

Obnavljanje naše životne aplikacije

Tijekom posljednjih osam mjeseci, Swarm tim je naporno radio na istraživanju, prototipiranju i izgradnji prema Swarmu 5.0. U utorak smo lansirali. (Idi sada preuzmi Swarm 5.0.) Bio je to veliki poduhvat u koji je bilo uključeno puno ljudi. Suosnivač Foursquare-a Dennis Crowley već je podijelio zašto smo napravili te promjene, što znači da mogu objasniti što smo, naime, bili spremni sve ovo vrijeme.

Kao dizajner proizvoda koji radi na Swarmu, neki od djela koja sam posebno radio za 5.0 uključivali su pojednostavljivanje informacijske arhitekture, ažuriranje našeg internog vodiča za stil, redizajniranje početnog zaslona i profila. Više o svemu tome u nastavku.

Početak

Naš prvi prioritet bilo je pojednostavljenje. Znali smo da Swarm ima puno pravih komada, ali oni možda nisu organizirani na najintimitivniji način. Plan je bio napraviti neke promjene, a zatim ih testirati sa stvarnim potrošačima u stvarnom vremenu - i naučiti i graditi na tim povratnim informacijama.

Jedno od prvih, najneposrednijih poduhvata istraživanja korisnika bilo je to što smo čuli da je Swarmov vizualni jezik mlađi od našeg osnovnog demo programa gradskih istraživača, u dobi od 25 do 45 godina. Osim pojednostavljenja, znali smo da se moramo usredotočiti na to kako se Swarm sada osjećati moderno.

Nekoliko ideja za skice

Radili smo na stvaranju različitih ideja, koje su dolazile u obliku skica, žičanih okvira i niskofidnih iteracija dizajna. Neprestano smo procjenjivali, bilo da je tiskalo stvari i vješala ih na zid ili izrađivala brze statičke prototipove.

Nakon brojnih iteracija, došlo je vrijeme da se još jednom podijelite s ljudima izvan Foursquare zidova. Proveli smo nove krugove korisničkih istraživanja, koji su nam dali do znanja da se sudionicima sviđa da smo uklonili mnogo složenosti aplikacije.

Konačni krom app

Te su skupine također voljele redizajnirani dnevni zapis (više o ovoj temi pogledajte Dennisov post), koji smo stavili prednje i središnje mjesto, kao i funkciju univerzalnog pretraživanja, koja se sada nalazi na vrhu zaslona. Bilo je jasno da smo na dobrom putu.

Ažuriranje našeg internog vodiča za stil

Swarm je oduvijek imao sjajan temelj vizualnog dizajna i nismo ga htjeli izgubiti razmišljajući o 5.0 i šire.

Tipografija, boje i simboli Skica u našem internom vodiču za stil

Umjesto toga, odlučili smo uspostaviti robustan vodič za stil koji nam je pomogao da prihvatimo ažuriranu informacijsku arhitekturu. Toliko je važno držati tim dizajnera na istoj stranici tijekom procesa ponavljanja, pa sam stvorio vodič za stil života koji je uključivao stilove i komponente za višekratnu upotrebu koje bismo svi mogli dijeliti.

Ikone u našem internom vodiču za stil

Bilo je malo teško započeti, uglavnom jer nismo točno znali kakav će biti čitav vizualni smjer za Swarm 5.0, ali znao sam da želimo pojednostaviti jezik. Također smo znali da će se ovaj stilski stil s vremenom razvijati (kakvog ima) dok smo nastavili graditi na značajkama.

Jednom kad smo imali nekoliko glavnih komada na mjestu, stvari su se počele valjati.

Sljedeće: Redizajniranje početnog zaslona

Redizajnirani početni zaslon

Kao što sam spomenula, znali smo da želimo na površini prijava korisnika na vrlo istaknut način stvoriti osobni životni dnevnik. Istražili smo više iteracija početnog zaslona. Razvili smo smjernice za dizajn koji su raspon raspolagali od prilično sigurnih do ludih. Željeli smo razmotriti cijeli spektar i iscrpiti sve ideje.

Stalno smo se vraćali ideji jedinstvene linije koja povezuje sve korisničke prijave i to je ono što sada vidite u aplikaciji. Konceptualno nam se dopala ideja da okomita crta lako ilustrira mjesta na koja idete. Usmjerava se do Swarm 5.0 fokusa, koji je uključen u životno bilježenje i sjećanje gdje god idete.

Kartica i karta za pregled početne stranice

Karta na početnom zaslonu bila je dana: znali smo da će karta, koja pokazuje svaku prijavu korisnika, uvijek biti istaknuta i interaktivna.

Ažuriranje dva dinamična feeda Swarma

Nakon što smo odlučili pojednostaviti Swarmov vizualni jezik, odlučili smo ažurirati postojeće dinamičke feedove u Swarmu kao naš sljedeći prioritet. Budući da smo povijest prijavljivanja podizali na početnu stranicu aplikacije (umjesto da to predstavlja podizgled na vašem vlastitom profilu), stanice s feedovima za prijavu potrebne su da se podudaraju s tim kako su izgledale ćelije za prijavu vaših prijatelja. Znači, početni zaslon (kartica Vremenska crta) trebao bi se osjećati vrlo slično kartici Prijatelji, jer oba naglašavaju prijave. To je bilo teško iz nekoliko razloga.

Usporedbe krmnih stanica na karticama Vremenska traka i prijatelji
  1. Željeli smo povezati ikone kategorije na početnom zaslonu kako bismo stvorili okomite linije, što stvara vezu između mjesta koja posjetite. To je bilo teško jer nam je trebalo rješenje koje je surađivalo s brojnim vrstama ćelija. Zaključili smo veliku količinu paddinga s lijeve strane prijave kako bi okomita linija mogla krenuti ravno niz ekran.
  2. Ove ćelije također su morale jasno artikulirati da možete potvrditi ili negirati jeste li bili na nekom mjestu ili ne. Da bismo to uzeli u obzir, stvorili smo sive (nepotvrđene) posjete koji su prikazani na vremenskoj traci. Oni se namjerno ističu, tako da možete brzo potvrditi ili negirati da ste bili na tom određenom mjestu - i zatim se vratiti istraživanju svijeta.
  3. Također, ne želite da se vaš vlastiti avatar ponavlja više puta na kartici Vremenska traka, pa smo trebali shvatiti kako da se kartica Timeline osjeća kao težina slična kartici Social Feed. Koristili smo ikonu kategorije unutar kruga na kartici Vremenska traka, što nam je pomoglo u dosljednosti između kartica.

Redizajniranje profila

Jedna fraza koja je izrečena prilično često bila je da bi profil neke osobe trebao snimiti životni dnevnik iz 10.000 stopa.

U profilu 5.0 profil je trebao istaknuti statistike i elemente koji su najvažniji. Ponovno je karta vrhunska značajka; trebalo mu je dati dovoljno prostora. Također smo znali (anegdotski) da ljudi već vole dijeliti svoje karte na Facebooku i Twitteru. Odlučili smo da je prikazivanje velike nativne karte s narančastim iglama na vrhu profila najjasniji način isticanja mjesta koja ste bila. Smjestili smo se na kartografskom izgledu za neke statistike za koje smo mislili da bi vas najviše trebalo zanimati.

Nekoliko različitih stanja na kojima bi profil mogao biti

Drugi izazov na stranici profila bio je određivanje statistika koja treba biti najistaknutija. Na kraju smo se složili da su prijave, mjesta, kategorije (s vlastitom arhitekturom i elementima dizajna), pruge i gradonačelnici bili najuvjerljiviji uvidi na temelju povratnih informacija novih i dugogodišnjih korisnika Swarma.

Dva ključna savjeta za dizajn

Velika izdanja se ne događaju bez nekoliko velikih poduzimanja. Evo mojih:

  1. Uključite inženjere na početku. Nešto u čemu se i dalje trudim biti što bolji inženjeri koji su uključeni ranije u proces dizajniranja. Ponekad su se odluke donijele brzo i siguran sam da sam mogao uštedjeti neko vrijeme provjeravajući rane dizajne od nekoga tko ima malo više tehničkog znanja da mi kaže je li moja ideja previše suluda i potencijalno izvan okvira projekta , Borio sam se s tim ponekad, uglavnom zbog brzine kojom se kretao cijeli tim. Ponekad sitna dizajnerska odluka može imati velik tehnički utjecaj. Na meni je da nastavim uključivati ​​inženjere ranije da to shvatim.
  2. Dijelite rano, dijelite često i razvrstajte se među neredima. Za sebe kažem da ulazi u svaki projekt i / ili značajku na kojoj radim (mada nisam uvijek sjajan u tome). Postoji puno ljudi i timova koji žele biti uključeni u rane smjernice dizajna, ali to nije uvijek povratna informacija koja je djelotvorna. Ponekad je teško prerezati nešto od toga za dobivanje jasnog i smislenog mišljenja. Uvijek je dobro zapamtiti da je, kao što je važno za dijeljenje, vaš posao dizajnera preuzeti sve povratne informacije i koristiti ih za donošenje informiranih odluka.

posljednje

Osvrnuvši se na sve planiranje, prototipiranje, istraživanje, projektiranje i izgradnju - pokretanje Swarm 5.0 bio je ogroman podvig. Inženjerski tim napisao je mnogo prikaza u jezgri Swarma i gotovo svaki je ekran na neki način promijenjen. 20+ ljudi bilo je posvećeno radu na Swarmovom timu u posljednjih osam mjeseci, uključujući Sam Brown-a i Jacka Osbornea, koji su pomagali na dizajnerskim poslovima.

Soooo što čekaš !? Preuzmite Swarm 5.0 sada. Nadamo se da će vam se svidjeti.