Air Lookout è il progetto collaterale che ha cambiato per sempre il mio processo di progettazione

Nel febbraio del 2015 ho iniziato a lavorare su un'app iOS chiamata Air Lookout . L'obiettivo dell'app era semplificare e rimuovere qualsiasi offuscamento delle informazioni sulla qualità dell'aria. Dopo oltre un anno di lavoro notturno e nei fine settimana, l'utile netto totale dal suo lancio nel 2016 è stato inferiore a $ 1.000. Anche con quei numeri, rivivrei ogni ora di lavoro.

L'unica cosa su cui non posso attribuire un valore monetario è come l'esperienza di creare Air Lookout abbia completamente cambiato la mia mente sul processo di progettazione e sviluppo per ogni progetto su cui ho lavorato da allora.

Una breve nota sulla qualità dell'aria

La qualità dell'aria nel mondo è un problema serio. Non importa se vivi in ​​una metropoli piena di auto e autobus che vomitano gas di scarico o in una piccola città dove gli alberi sono più numerosi delle persone. La qualità dell'aria influenzerà la tua vita. Vivendo a Salt Lake City, sperimentiamo un'inversione in inverno. Un'inversione è uno strato di aria calda che intrappola l'aria fredda, compresi gli inquinanti atmosferici prodotti. Questo crea uno strato di smog nella valle di Salt Lake. Queste inversioni a volte possono durare giorni o settimane e, a seconda del tempo, possono cambiare ogni giorno.

Prima di avviare l'app finita, mostrata sopra, avevo un milione di domande che dovevo capire prima ancora di poter iniziare a costruire un progetto basato su soluzioni e una quantità minima di ipotesi.

Il compito generale di creare un'app per la qualità dell'aria era scoraggiante. Tuttavia, quando l'ho scomposto in pezzi più piccoli, non sembrava così orribile. In effetti, il primo passo: creare un design veloce che potesse aiutarmi a capire l'organizzazione delle informazioni, è apparso abbastanza semplice. Avevo eseguito questo processo iniziale un centinaio di volte prima per molti clienti diversi. Ogni progetto inizia con un wireframe di lavagna e il designer lavora per creare un progetto iniziale da quello. Almeno, questo è quello che mi dicevano le mie abitudini.

Il numero di ipotesi che ho fatto nel wireframe di cui sopra e nei progetti iniziali che mi sono rivelato sbagliato durante l'intero processo è sbalorditivo.

Fingilo finché non ce la fai (letteralmente).

Ho caricato i pochi progetti statici che ho realizzato, dopo aver creato il mio schizzo wireframe, su InVision. Con quello, potrei aprire l'app falsa durante la mia giornata. Come ci si sente a usare l'app mentre aspettavo la cena per cucinare? Mentre stavo salendo in macchina? Molto rapidamente ho notato che c'erano molte domande ricorrenti che avevo. Cosa significano ancora i colori? L'arancione è peggio del giallo, giusto? Ma l'indice di qualità dell'aria (AQI) va da 0 a 500. Come mai? E, soprattutto, le domande che mi sono sempre posto sono state: come influisce questo sulla mia giornata? Posso fare esercizio all'aperto?

Sulla base di molte delle domande ricorrenti che avevo sugli inquinanti e su come potevano avere un impatto sulla mia giornata, ho iniziato ad aggiungere schermate false in Invision che potevano fungere da "cheat sheet". Quella che era iniziata come una semplice definizione di inquinante, intesa solo a ricordarmelo durante la progettazione e lo sviluppo dell'app, è stata aggiunta all'app come funzionalità finale. Ora, nell'app corrente, toccando un nome inquinante porterà un utente a una definizione con un elenco di fonti di informazioni e collegamenti a ulteriori informazioni (questo flusso è mostrato di seguito negli screenshot dell'app corrente). Ho scoperto che a volte le informazioni utili al progettista o allo sviluppatore sono utili anche a un utente .

Naturalmente, come mostrato in precedenza nello schizzo wireframe, ho gravitato verso un'interfaccia utente per aggiungere e gestire posizioni tramite codice postale. Ma, dopo aver usato il falso prototipo, ho trovato arduo il processo. Perché preoccuparsi che l'utente attraversi l'intero flusso? E se andassi a Park City per una giornata sugli sci? O Antelope Island per il trail running? La Salt Lake City, stazione di qualità dell'aria, non sarebbe più la più vicina.

Quotidianamente, ho scoperto che mi interessava solo la qualità dell'aria nella mia posizione attuale, non necessariamente la mia posizione di casa . E, fortunatamente per me, gli iPhone sono dotati di un GPS di livello consumer abbastanza buono e di un'API di servizi di localizzazione. Pertanto, ho rimosso l'intera posizione Crea/Leggi/Aggiorna/Elimina interfaccia utente e flusso dall'app. Ho deciso che una panoramica della posizione attuale sarebbe stata la più veloce e utile per tutti. Gli unici utenti che potevo immaginare che ciò avrebbe frustrato erano gli utenti esperti che controllavano più posizioni. Ma ricordare il mio obiettivo originale, semplificare la qualità dell'aria, ha rafforzato la mia decisione.

Per testare questo, ho creato più schermate false da testare in InVision. Invece di toccare un'interfaccia utente falsa e visualizzare il flusso, ho impostato il prototipo per eseguire i passaggi automatici della mia posizione GPS falsa che si aggiorna con transizioni temporizzate. Quindi, quando andavo in una caffetteria a North Salt Lake o guidavo fino a Park City, aprivo la mia app falsa e la guardavo aggiornarsi e mi mostravo nuovi dati per la diversa posizione.

La prima volta che ho usato questo nuovo prototipo, ho potuto dire che era un enorme miglioramento. Quando un dispositivo ha determinate funzionalità integrate, l' utilizzo di tali funzionalità può comportare una migliore esperienza utente progettando meno interfaccia . Sarebbe stato difficile per me raggiungere questa conclusione se non avessi mai lasciato Photoshop e non avessi immaginato di avere una vera app per la qualità dell'aria sul mio telefono.

A cominciare dal codice

Su molti progetti dei clienti ho consigliato e supervisionato i test degli utenti. Per Air Lookout , non era un'opzione. Sapevo già che ci sarebbe stata una piccola quantità di profitto e il test degli utenti era sicuramente al di fuori del mio budget. Sapevo anche che avrei avuto utenti e feedback una volta avviata l'app. Tutto ciò che potrei fare per semplificare l'app lo accelererebbe. Nella mia mente, preferirei lanciare un'app più semplice e ben fatta e ottenere il feedback degli utenti invece di lavorare a lungo su un'applicazione molto complicata con i presupposti sbagliati.

Le mie abitudini mi dicevano che il passo successivo dopo l'utilizzo del prototipo InVision avrebbe dovuto essere l'iterazione del design. Questo sarebbe stato il processo per qualsiasi progetto cliente di questa natura. Tuttavia, ho avuto molte domande sulla qualità dei dati e dubbi se fossi in grado di ottenere i dati in modo affidabile sul mio iPhone utilizzando UIKit. Invece di tornare a Photoshop ho aperto Xcode.

Per ottenere la funzionalità desiderata, ho creato un'app iOS con una vista molto semplice (e per lo più rotta) che visualizzava dati reali . Inizialmente, l'app non si aggiornava nemmeno da sola. Ho dovuto uccidere manualmente l'app e riaprirla se volevo nuovi dati. Ma almeno aveva dati aggiornati e rilevanti (compresa la mia posizione!).

...E torniamo al design

Ci sono state molte decisioni di progettazione che ho preso nel codice mentre realizzavo questo prototipo grezzo che alla fine è rimasto. Il più evidente è il grande blocco di colore che mostra il colore AQI e il grande testo della posizione. Non avevo mai lavorato in un modo in cui il processo di sviluppo informasse un visual design come questo. Ma non sono sicuro che l'avrei scoperto mentre lavoravo con uno strumento di progettazione tradizionale come Photoshop o Sketch. Dopotutto, ho cambiato solo il colore di sfondo perché ero troppo pigro per creare un altro UIView per rappresentare il colore AQI.

Da qui in poi, è stato abbastanza facile portare uno screenshot in Photoshop e perfezionarlo ulteriormente. Era molto più veloce giocare con la spaziatura e le dimensioni del testo in Photoshop invece di aspettare che l'app si ricompilasse dopo ogni modifica (soprattutto considerando che questo era tornato nei giorni di Swift 2).

Il processo di iterazione del design per molte delle viste successive ha finito per seguire uno schema molto simile a questo. Creerei un prototipo funzionante grezzo, realizzando rapide improvvisazioni di progettazione nel codice, lo userei per alcuni giorni o settimane e quindi ricrearei e modificherei la vista in Photoshop. Dal momento che ho già utilizzato un prototipo prima che avvenisse qualsiasi progetto statico, ero un esperto di ciò che la vista aveva bisogno o meno e dove dovrebbero essere le priorità e la gerarchia.

Una delle più grandi sorprese per me, da questo processo, è stata la necessità di costruire un prototipo funzionante che mostrasse correttamente i dati e le letture. Ho finito per avere una comprensione dei dati prima ancora di iniziare la fase di progettazione statica. Come designer, come potrei anche iniziare a comportarmi come un esperto nello spiegare le complessità della qualità dell'aria se io stesso non comprendo appieno come funziona. La creazione e l'utilizzo di questi prototipi grezzi mi ha dato quell'esperienza e competenza in un breve lasso di tempo.

…Per sempre

Molte notti, andavo avanti e indietro tra Photoshop e Xcode numerose volte. Alla fine, mi è sembrato comodo usare qualsiasi strumento mi sentisse più veloce per qualsiasi problema su cui stavo lavorando per risolvere. A volte era codice, a volte era uno strumento di progettazione tradizionale come Photoshop. Abbastanza interessante, Photoshop non è sempre stato lo strumento più veloce per trovare soluzioni di progettazione visiva, soprattutto se si trattava di dati dinamici.

Post mortem

Dopo aver lanciato Air Lookout , è difficile dire se le mie decisioni fossero giuste. Ho ricevuto alcune e-mail da utenti che si lamentavano della mancanza del modo tradizionale di cercare e aggiungere posizioni. Sono, tuttavia, felice di essere andato con questo approccio più semplice. La ricerca della posizione è sempre una funzionalità che posso aggiungere all'app in un secondo momento se un numero sufficiente di feedback degli utenti lo richiede. Sono fiducioso che la mia conclusione, tratta dall'uso regolare del mio falso prototipo, sia stata la decisione giusta.

Allo stesso modo, ci sono state molte decisioni di progettazione che ho finito per prendere nel codice che è finito nell'app finale. Senza i blocchi di colore (e molte altre decisioni come questa), ci sono buone probabilità che la mia app assomigli a tutte le altre app disponibili per la qualità dell'aria.

Se dovessi ripetere questo processo, varrebbe la pena costruire un prototipo wireframe interattivo con componenti UIKit di serie. Sostanzialmente saltando il prototipo InVision e iniziando con un prototipo di codice. Da lì, sarebbe molto più semplice iniziare la progettazione statica sapendo dove valgono o meno i componenti UIKit e avendo una comprensione completa dei dati e delle relazioni con i dati con cui devo lavorare. Quindi, invece di sfruttare un falso prototipo InVision, potrei avere un'esperienza app più realistica con dati reali prima.

Realtà e applicazione

In passato, specialmente quando lavoravo in un'agenzia, avrei consigliato un'esplorazione e un'iterazione del design approfondite prima di sprecare il tempo già limitato di uno sviluppatore con la costruzione di qualcosa basato su presupposti iniziali (soprattutto qualsiasi cosa che probabilmente avrebbe dovuto essere modificata o migliorata in seguito ). Tuttavia, ora, sono più incuriosito dalla possibilità che designer e sviluppatori lavorino insieme per creare un prototipo di app wireframe toccabile realizzato con componenti nativi per testare e convalidare qualsiasi ipotesi o idea iniziale.

Forse si potrebbe costruire un team di individui capaci sia di progettazione che di sviluppo per facilitare questa parte del processo (e rimuovere ulteriormente la barriera semantica tra i due ruoli). Sono fiducioso che questo sia un processo più efficiente per la progettazione e lo sviluppo che darà ai fondamenti di progettazione di qualsiasi progetto interattivo una base molto più solida.

Ora, la sfida per me è capire come vendere i clienti con questo processo non convenzionale.

Nota : Air Lookout è stato lanciato nel 2016 e può essere scaricato dall'App Store.