Air Lookout est le projet parallèle qui a changé à jamais mon processus de conception

En février 2015, j'ai commencé à travailler sur une application iOS appelée Air Lookout . L'objectif de l'application était de simplifier et de supprimer tout obscurcissement des informations sur la qualité de l'air. Après plus d'un an de travail de nuit et de week-end, le revenu net total depuis son lancement en 2016 est inférieur à 1 000 $. Même avec ces chiffres, je revivrais chaque heure de travail.

La seule chose à laquelle je ne peux pas attribuer une valeur monétaire est la façon dont l'expérience de la création d' Air Lookout a complètement changé mon avis sur le processus de conception et de développement de chaque projet sur lequel j'ai travaillé depuis.

Une brève note sur la qualité de l'air

La qualité de l'air dans le monde est un problème sérieux. Peu importe que vous viviez dans une métropole remplie de voitures et d'autobus crachant des gaz d'échappement ou dans une petite ville où les arbres sont plus nombreux que les gens. La qualité de l'air affectera votre vie. Vivant à Salt Lake City, nous vivons une inversion en hiver. Une inversion est une couche d'air chaud qui emprisonne l'air froid, y compris les polluants atmosphériques produits. Cela crée une couche de smog dans la vallée du lac Salé. Ces inversions peuvent parfois durer des jours ou des semaines, et selon la météo, peuvent changer tous les jours.

Avant de lancer l'application terminée, illustrée ci-dessus, j'avais un million de questions que je devais comprendre avant même de pouvoir commencer à construire une conception basée sur des solutions et un minimum d'hypothèses.

La tâche globale de création d'une application sur la qualité de l'air était ardue. Cependant, quand je l'ai décomposé en plus petits morceaux, cela ne semblait pas aussi horrible. En fait, la première étape : créer un design rapide qui pourrait m'aider à comprendre l'organisation de l'information, est apparue assez simple. J'avais exécuté ce processus initial une centaine de fois auparavant pour de nombreux clients différents. Chaque projet commence par une structure filaire de tableau blanc, et le concepteur travaille pour créer une conception initiale à partir de celle-ci. Du moins, c'est ce que mes habitudes me disaient.

Le nombre d'hypothèses que j'ai faites dans le wireframe ci-dessus et les conceptions initiales que j'ai prouvées fausses pendant tout le processus est stupéfiant.

Faites semblant jusqu'à ce que vous le fassiez (littéralement)

J'ai téléchargé les quelques conceptions statiques que j'ai faites - après avoir créé mon croquis filaire - sur InVision. Avec cela, je pouvais ouvrir la fausse application tout au long de ma journée. Qu'est-ce que ça fait d'utiliser l'application pendant que j'attendais le dîner pour cuisiner ? Pendant que je montais dans ma voiture ? Très vite j'ai remarqué qu'il y avait beaucoup de questions récurrentes que j'avais. Que signifient encore les couleurs ? L'orange est pire que le jaune, n'est-ce pas ? Mais l'indice de la qualité de l'air (IQA) va de 0 à 500. Pourquoi? Et, surtout, les questions que je me posais toujours étaient : comment cela affecte-t-il ma journée ? Puis-je faire de l'exercice à l'extérieur?

Sur la base d'un grand nombre de questions récurrentes que j'avais sur les polluants et leur impact sur ma journée, j'ai commencé à ajouter de faux écrans dans Invision qui pourraient agir comme des "antisèches". Ce qui a commencé comme une simple définition de polluant, ne visait qu'à m'aider à me rappeler lors de la conception et du développement de l'application, a fini par être ajouté à l'application en tant que fonctionnalité finale. Désormais, dans l'application actuelle, appuyer sur un nom de polluant amènera un utilisateur à une définition avec une liste de sources d'informations et des liens vers plus d'informations (ce flux est illustré ci-dessous dans les captures d'écran de l'application actuelle). J'ai découvert que parfois des informations utiles au concepteur ou au développeur sont également utiles à un utilisateur .

Naturellement, comme indiqué dans l'esquisse filaire précédente, je me suis tourné vers une interface utilisateur pour ajouter et gérer des emplacements via le code postal. Mais, après avoir utilisé le faux prototype, j'ai trouvé ce processus ardu. Pourquoi s'embêter à ce que l'utilisateur passe par tout ce flux ? Et si j'allais à Park City pour une journée de ski ? Ou Antelope Island pour le trail ? La station de mesure de la qualité de l'air de Salt Lake City ne serait plus la plus proche.

Au quotidien, j'ai découvert que je ne me souciais que de la qualité de l'air à mon emplacement actuel, pas nécessairement de mon domicile . Et, heureusement pour moi, les iPhones sont livrés avec un GPS et une API de services de localisation de qualité grand public. Par conséquent, j'ai supprimé l'intégralité de l'emplacement Créer/Lire/Mettre à jour/Supprimer l'interface utilisateur et le flux de l'application. J'ai décidé qu'un aperçu de l'emplacement actuel serait le plus rapide et le plus utile pour tous. Les seuls utilisateurs que je pouvais imaginer que cela frustrerait étaient les utilisateurs expérimentés vérifiant plusieurs emplacements. Mais un rappel de mon objectif initial - simplifier la qualité de l'air - a renforcé ma décision.

Afin de tester cela, j'ai créé plus de faux écrans à tester dans InVision. Au lieu de puiser dans une fausse interface utilisateur et de visualiser le flux, j'ai configuré le prototype pour qu'il passe par les étapes automatisées de ma fausse mise à jour de la localisation GPS avec des transitions chronométrées. Ensuite, lorsque j'allais dans un café à North Salt Lake ou que je me rendais à Park City, j'ouvrais ma fausse application et la regardais se mettre à jour et me montrer de nouvelles données pour l'emplacement différent.

La première fois que j'ai utilisé ce nouveau prototype, je pouvais dire que c'était une énorme amélioration. Lorsqu'un appareil dispose de certaines fonctionnalités intégrées, l'utilisation de ces fonctionnalités peut se traduire par une meilleure expérience utilisateur en concevant moins d'interface . Il m'aurait été difficile d'arriver à cette conclusion si je n'avais jamais quitté Photoshop et n'avais pas imaginé que j'avais une véritable application de qualité de l'air sur mon téléphone.

Commencer par le code

Sur de nombreux projets clients, j'ai recommandé et supervisé des tests utilisateurs. Pour Air Lookout , ce n'était pas une option. Je savais déjà qu'il y aurait un faible profit et que les tests utilisateurs étaient assurément hors de mon budget. Je savais aussi que j'aurais des utilisateurs et des commentaires une fois que j'aurais lancé l'application. Tout ce que je pourrais faire pour simplifier l'application accélérerait cela. Dans mon esprit, je préférerais lancer une application plus simple et bien conçue et obtenir les commentaires des utilisateurs au lieu de m'attarder longtemps sur une application très compliquée avec de mauvaises hypothèses.

Mes habitudes m'ont dit que la prochaine étape après l'utilisation du prototype InVision aurait dû être l'itération de la conception. Cela aurait été le processus pour tout projet client de cette nature. Cependant, j'avais beaucoup de questions sur la qualité des données et je me demandais si j'étais capable d'obtenir les données de manière fiable sur mon iPhone en utilisant UIKit. Au lieu de retourner à Photoshop, j'ai ouvert Xcode.

Afin d'accomplir la fonctionnalité souhaitée, j'ai créé une application iOS à une vue très simple (et principalement cassée) qui afficherait des données réelles . Au départ, l'application ne se rafraîchissait même pas d'elle-même. J'ai dû tuer manuellement l'application et la rouvrir si je voulais de nouvelles données. Mais, au moins, il avait des données à jour et pertinentes (y compris ma position !).

… Et retour au design

Il y a eu beaucoup de décisions de conception que j'ai prises dans le code lors de la création de ce prototype brut qui a fini par rester. Le plus remarquable est le grand bloc de couleur indiquant la couleur AQI et le grand texte de localisation. Je n'avais jamais travaillé d'une manière où le processus de développement informait une conception visuelle comme celle-ci. Mais, je ne suis pas sûr que j'aurais découvert cela en travaillant dans un outil de conception traditionnel tel que Photoshop ou Sketch. Après tout, j'ai seulement changé la couleur d'arrière-plan parce que j'étais trop paresseux pour créer un autre UIView pour représenter la couleur AQI.

À partir de là, il était assez facile d'importer une capture d'écran dans Photoshop et de l'affiner davantage. Il était beaucoup plus rapide de jouer avec l'espacement et les tailles de caractères dans Photoshop au lieu d'attendre que l'application se recompile après chaque modification (d'autant plus que c'était de retour dans les 2 jours de Swift).

Le processus d'itération de conception pour de nombreuses vues ultérieures a fini par suivre un schéma très similaire à celui-ci. Je créerais un prototype de travail brut - en faisant des improvisations de conception rapides dans le code - je l'utiliserais pendant quelques jours ou quelques semaines, puis je recréerais et modifierais la vue dans Photoshop. Étant donné que j'ai déjà utilisé un prototype avant toute conception statique, j'étais un expert sur ce dont la vue avait besoin ou non et sur les priorités et la hiérarchie.

L'une des plus grandes surprises pour moi, de ce processus, a été de devoir construire un prototype fonctionnel qui affichait correctement les données et les lectures. J'ai fini par avoir une compréhension des données avant même de commencer la phase de conception statique. En tant que designer, comment pourrais-je même commencer à agir comme un expert en expliquant les complexités de la qualité de l'air si je ne comprends pas moi-même pleinement comment cela fonctionne. La création et l'utilisation de ces prototypes bruts m'ont donné cette expérience et cette expertise en peu de temps.

…Toujours

De nombreuses nuits, je faisais des allers-retours entre Photoshop et Xcode à plusieurs reprises. Finalement, je me sentais à l'aise d'utiliser l'outil le plus rapide pour le problème que je travaillais à résoudre. Parfois, c'était du code, et parfois c'était un outil de conception traditionnel comme Photoshop. Assez intéressant, Photoshop n'a pas toujours été l'outil le plus rapide pour trouver des solutions de conception visuelle, surtout s'il traitait de données dynamiques.

Autopsie

Après avoir lancé Air Lookout , il est difficile de dire si mes décisions étaient les bonnes. J'ai reçu quelques e-mails d'utilisateurs se plaignant de l'absence de la méthode traditionnelle de recherche et d'ajout d'emplacements. Je suis cependant heureux d'avoir opté pour cette approche plus simple. La recherche d'emplacement est toujours une fonctionnalité que je peux ajouter à l'application plus tard si suffisamment de commentaires d'utilisateurs le demandent. Je suis convaincu que ma conclusion - tirée de l'utilisation régulière de mon faux prototype - était la bonne décision.

De même, j'ai fini par prendre de nombreuses décisions de conception dans le code qui se sont retrouvées dans l'application finale. Sans les blocs de couleur (et de nombreuses autres décisions comme celle-ci), il y a de fortes chances que mon application ressemble à toutes les autres applications de qualité de l'air disponibles.

Si je devais recommencer ce processus, il serait intéressant de créer un prototype filaire interactif avec des composants UIKit d'origine. Ignorer essentiellement le prototype InVision et commencer par un prototype de code. À partir de là, il serait beaucoup plus facile de commencer la conception statique en sachant où les composants UIKit sont intéressants ou ternes et en ayant une compréhension complète des données et des relations de données avec lesquelles je dois travailler. Ensuite, au lieu de tapoter autour d'un faux prototype InVision, je pourrais avoir une expérience d'application plus réaliste avec des données réelles plus tôt.

Réalité et application

Dans le passé, en particulier lorsque je travaillais dans une agence, j'aurais recommandé une exploration et une itération approfondies de la conception avant de perdre le temps déjà limité d'un développeur à construire quelque chose basé sur des hypothèses précoces (en particulier tout ce qui devrait probablement être modifié ou amélioré plus tard ). Cependant, maintenant, je suis plus intrigué par la possibilité que les concepteurs et les développeurs travaillent ensemble pour créer un prototype d'application filaire exploitable avec des composants natifs pour tester et valider les premières hypothèses ou idées.

Peut-être qu'une équipe pourrait être constituée d'individus capables à la fois de conception et de développement pour faciliter cette partie du processus (et supprimer davantage la barrière sémantique entre les deux rôles). Je suis convaincu qu'il s'agit d'un processus de conception et de développement plus efficace qui donnera aux fondamentaux de la conception de tout projet interactif une base beaucoup plus solide.

Maintenant, le défi pour moi est de trouver comment vendre des clients sur ce processus non conventionnel.

Remarque : Air Lookout a été lancé en 2016 et peut être téléchargé depuis l'App Store.