Hide&Seek – App design

Hide&Seek

Hide&Seek est une application créée lors d’un projet d’école. Le brief : créer une application en lien avec la musique. Nous avons eu l’idée de créer une application pour retrouver ses trésors (clés, lunettes, voiture…) perdus tout en écoutant de la musique. En effet, plus le volume de la musique augmente plus l’utilisateur se rapproche de son trésor perdu.

Charte graphique

Afin de se différencier des autres, nous avons opté pour un fond coloré. Il représente légèreté et fun, qui sont les mots clés de notre application. Après plusieurs recherches sur les couleurs, nous nous sommes arrêtées sur un jaune lumineux, notre principale couleur. Pour contraster, nous avons choisis deux couleurs opposées : un noir profond et un blanc.

La typographie utilisée pour le titrage est la Verveine créée par Dalton Maag Ltd. Elle est manuscrite, assez folle. C’est exactement ce que l’on recherchait pour notre application.
La Lato, utilisé pour le labeur, a été créée par la fonderie tyPoland. C’est sans sérif, elle est droite, simple, épurée, ce qui contraste bien avec la Verveine.

Logo

L’application permet de retrouver ses objets perdus en musique. Une des fonctions principales est la géolocalisation. Nous avons donc rassembler ces deux éléments : l’épingle d’une carte et l’oreille qui permet d’écouter de la musique. Après plusieurs recherches et essais, nous sommes arrivés à ce logo.

L'application

Avant de designer l’application, nous sommes passés par une étape importante : le user flow. Celui-ci nous a permis de décider bien en amont du projet tous les écrans nécessaires afin d’avoir une navigation fluide dans l’application.
Concernant le menu, nous avions d’abord pensé a un menu burger. Comme il ne comprenait que très peu d’éléments, nous avons finalement choisi d’utiliser une TabBar, ce qui permet de naviguer plus facilement entre les différents écrans de l’application.

L’application Hide&Seek fonctionne avec la synchronisation d’un compte de musique (Deezer, Spotify, Musique…). Une fois le compte connecté, il sera possible de retrouver ses trésors perdus en musique. Avant de pouvoir les retrouver il faut les rentrer dans l’application. Par exemple, si l’utilisateur souhaite retrouver son animal, il lui suffit d’allumer le bluetooth de son téléphone pour connecter la puce de l’animal.

Les objets/animaux enregistrés se retrouvent dans la page « Mes trésors ». C’est à cet endroit que l’utilisateur pourra retrouver ses objets : soit en cliquant directement sur l’objet en question, soit par géolocalisation. La fonction « rechercher une personne » ouvre les contacts du téléphone.

Il nous est souvent arrivé de garer sa voiture à un endroit, d’aller se promener ou faire ses courses et d’oublier l’emplacement de sa voiture. La fonction « rechercher par géolocalisation » permet de placer le curseur là où la voiture se trouve. L’application enregistre cet emplacement et permet de retrouver facilement sa voiture en musique. Plus l’utilisateur s’approche de l’emplacement de sa voiture, plus le son de la musique augmentera.

Design system

Pour ce projet, un design system nous avait été demandé. Celui-ci nous a permis de garder une cohérence graphique tout au long des écrans créés.

Iconographie

Formes

Notre application avait pour objectif d’être fun, et de se démarquer des autres applications. Nous avons donc décidé de créer des formes naturelles pour la rendre plus atypique.

Illustrations

Dès le début, et tout en faisant nos recherches, nous avions décidés que nous n’allions pas utiliser de photos pour cette application. Nous trouvions que les illustrations étaient plus adaptées à ce projet. Les illustrations ont été faites à la main. Les contours des illustrations sont discontinus pour coller au côté décalé de notre application.

TabBar

Une fois la TabBar terminée, nous nous sommes demandé comment mettre en avant sa navigation. Plusieurs éléments dans l’application jouaient avec la superposition. Nous avons adopté ce même concept pour la TabBar. En effet, un fond coloré est superposé en arrière plan, ce qui indique sur quelle page se trouve l’utilisateur.