Sådan designede vi Foursquare Swarm 5.0

Gendannelse af vores livslog-app

I løbet af de sidste otte måneder har Swarm-teamet været hårde på at undersøge, prototype og opbygge mod Swarm 5.0. Tirsdag lancerede vi. (Gå download Swarm 5.0 nu.) Det var en stor virksomhed, der involverede mange mennesker. Foursquare-medstifter Dennis Crowley har allerede fortalt, hvorfor vi har foretaget mig disse ændringer, hvilket betyder, at jeg kan forklare, hvad vi netop havde op til hele denne tid.

Som en produktdesigner, der arbejdede på Swarm, omfattede nogle af de stykker, jeg specifikt arbejdede med for 5.0, forenkling af informationsarkitekturen, opdatering af vores interne stilguide, redesigning af startskærmen og profilen. Mere om alt det nedenfor.

Kom godt i gang

Vores første prioritet var forenkling. Vi vidste, at Swarm havde en masse af de rigtige stykker, men de er måske ikke blevet organiseret på den mest intuitive måde. Planen var at foretage nogle ændringer og derefter teste dem med virkelige forbrugere i realtid - og lære og bygge videre på denne feedback.

En af de tidligste, mest øjeblikkelige afhentninger fra brugerundersøgelser var, at vi hørte, at Swarms visuelle sprog var yngre end vores kernedemo af byudforskere, 25-45 år. Så ud over forenkling vidste vi, at vi skulle fokusere på, hvordan man får Swarm til at føle sig moderne nu.

Et par tidlige skitseideer

Vi gik i gang med at udråbe en række forskellige ideer, som kom i form af skitser, wireframes og iterationer med lavtidelighedsdesign. Vi evaluerede konstant, hvad enten det var ved at udskrive ting og hænge dem op på en væg eller bygge hurtige statiske prototyper.

Efter adskillige iterationer var det igen tid til at dele med folk uden for Foursquare-murene. Vi gennemførte nye runder med brugerundersøgelser, som lod os vide, at deltagerne kunne lide, at vi havde fjernet en masse af appens kompleksitet.

Den sidste app-krom

Disse grupper elskede også den redesignede livslog (se Dennis's indlæg for mere om dette emne), som vi satte front og centrum, og den universelle søgefunktion, der nu er fremtrædende placeret øverst på skærmen. Det var tydeligt, at vi var på rette vej.

Opdatering af vores interne stilguide

Swarm har altid haft et fantastisk fundament for visuelt design, og det ønskede vi ikke at miste, når vi tænkte på 5.0 og derover.

Typografi, farver og tegnesymboler i vores interne stilguide

I stedet besluttede vi at etablere en robust stilguide, der hjalp os med at omfavne den opdaterede informationsarkitektur. Det er så vigtigt at holde designteamet på den samme side gennem hele iterationsprocessen, så jeg oprettede en levende stilguide, der inkluderede stilarter og genanvendelige komponenter, som vi alle kunne dele.

Ikoner i vores interne stilguide

Dette var lidt svært at starte, hovedsageligt fordi vi ikke nøjagtigt vidste, hvad hele den visuelle retning for Swarm 5.0 ville være, men jeg vidste, at vi ville forenkle sproget. Vi vidste også, at denne stilguide ville udvikle sig over tid (som den har), da vi fortsatte med at bygge videre på funktioner.

Når vi havde fået et par af de store stykker på plads, begyndte tingene at rulle.

Next up: Omdesign startskærmen

Den redesignede startskærm

Som jeg nævnte, vidste vi, at vi ville overflade en brugers indtjekninger på en meget fremtrædende måde for at skabe en personlig livsstil. Vi udforskede flere iterationer af startskærmen. Vi udviklede designvejledninger, der kørte spektret fra temmelig sikkert til skør. Vi ville overveje hele spektret og udtømme alle ideer.

Vi fortsatte med at gå tilbage til ideen om en enkelt linje, der forbinder alle brugeres check-ins, og så det er, hvad du ser i appen nu. Konceptuelt kunne vi lide tanken om, at den lodrette linje let illustrerer de steder, du rejser. Det stiger op til Swarm 5.0-fokus, som er på livelogging og huske overalt, hvor du går.

Hjemmeside-forhåndsvisningskort og kort

Kortet på startskærmen var en given: vi vidste, at kortet, der viser brugerens enhver indtjekning, altid ville være fremtrædende og interaktivt.

Opdatering af Swarms to dynamiske feeds

Når vi besluttede at forenkle Swarms visuelle sprog, besluttede vi at gøre opdatering af de eksisterende dynamiske feeds i Swarm til vores næste prioritet. Da vi hævede indtjekningshistorikken til appens startside (i stedet for at det var en undervisning på din egen profil), var det nødvendigt at tjekke ind-feedceller for at nøje matche, hvordan dine venners indtjekningsceller så ud. Betydning, at startskærmen (fanen Tidslinje) skal føles meget lighed med fanen Venner, da begge fremhæver check-ins. Dette var vanskeligt af nogle få grunde.

Sammenligninger af indtastningsfødeceller fra fanerne Tidslinje og venner
  1. Vi ønskede at forbinde kategoriikoner på startskærmen for at oprette lodrette linjer, hvilket skaber en forbindelse mellem de steder, du besøger. Dette var hårdt, fordi vi havde brug for en løsning, der arbejdede med de mange typer celler. Vi endte med at bruge en stor mængde polstring til venstre for check-in for at give en lodret linje mulighed for at gå lige ned på skærmen.
  2. Disse celler måtte også tydeligt formulere, at du kan bekræfte eller benægte, om du har været et sted eller ej. For at redegøre for dette oprettede vi grå (ubekræftede) besøg, der vises på tidslinjen. Disse skiller sig ud med vilje, så du hurtigt kan bekræfte eller benægte, at du var på det specifikke sted - og derefter vende tilbage til at udforske verden.
  3. Du ønsker heller ikke at se din egen avatar gentagne gange flere gange på fanen Tidslinje, så vi var nødt til at finde ud af, hvordan man får tabellen Tidslinje til at føle sig ens i vægt som fanen Social feed. Vi brugte et kategoriikon i en cirkel på fanen Tidslinje, hvilket hjalp med konsistensen mellem fanerne.

Omdesign profilen

En sætning, der blev sagt ganske ofte, var, at en persons profil skulle fange livsloggen fra et 10.000-fots syn.

I 5.0 er den nødvendige profil for at fremhæve de statistikker og elementer, der er mest vigtige. Igen er kortet en topfunktion; det skulle gives rigelig plads. Vi vidste også (anekdotisk), at folk allerede elskede at dele deres kort på Facebook og Twitter. Vi besluttede, at det at vise et stort indbygget kort med orange stifter (prikker) øverst i profilen var den mest klare måde at fremhæve de steder, du har været. Vi besluttede os med et kortlignende layout for nogle af de statistikker, som vi troede, du skulle bekymre dig mest om.

Et par forskellige tilstande, hvor en profil kunne være

En anden udfordring af profilsiden bestemte, hvilken statistik der skulle være den mest fremtrædende. I sidste ende blev vi enige om, at indtjekning, steder, kategorier (med sin egen arkitektur og designelementer), strejker og borgmesterskaber var den mest overbevisende indsigt baseret på feedback fra nye og langvarige Swarm-brugere.

To vigtige designtips

Store udgivelser sker ikke uden et par store takeaways. Her er mine:

  1. Bliv involverede ingeniører i begyndelsen. Noget, jeg fortsætter med at stræbe efter at være bedre til, er at få ingeniører involveret tidligere i designprocessen. Nogle gange blev der hurtigt taget beslutninger, og jeg er sikker på, at jeg kunne have sparet nogen tid ved at afprøve tidlige design af nogen med lidt mere teknisk viden til at fortælle mig, om min idé bare er for skør og potentielt uden for projektets anvendelsesområde. . Jeg kæmpede med dette til tider hovedsageligt på grund af den hurtighed, som hele holdet bevægede sig. Undertiden kan en lille designbeslutning have en stor teknisk indflydelse. Det er på mig at fortsætte med at engagere ingeniører tidligere for at finde ud af det.
  2. Del tidligt, del ofte, og sorter gennem rodet. Jeg siger, at dette går ind på hvert projekt og / eller funktion, som jeg arbejder på (selvom jeg ikke altid er god til det). Der er mange mennesker og teams, der ønsker at blive inkluderet i tidlige designretninger, men det er ikke altid feedback, der kan bruges. Nogle gange er det svært at gennemskære noget af det for at få en klar og meningsfuld mening. Det er altid godt at huske, at ligesom det er vigtigt at dele, er det dit job som designer at indtage al feedback og bruge den til at tage informerede beslutninger.

Endelig

At se tilbage på al planlægning, prototype, forskning, design og bygning - lancering af Swarm 5.0 har været en stor bedrift. Ingeniørholdet omskrev mange kernevisninger i Swarm, og næsten hver skærm blev ændret på en eller anden måde. 20+ mennesker var dedikeret til at arbejde på Swarm-holdet i de sidste otte måneder, herunder Sam Brown og Jack Osborne specifikt, som hjalp til med designarbejdet.

Sååå hvad venter du på !? Download Swarm 5.0 nu. Vi håber du kan lide det.