Introduction

Salut lecteur moyen! Dans cette étude de cas UI UX, je vais présenter la conception de mon application mobile. « Stash&Store » est le nom de ma deuxième application mobile. Il se compose de diverses fonctionnalités qui aident l'utilisateur à trouver un espace de stockage adéquat pour ses articles et/ou à monétiser son propre espace excédentaire. J'aspirais à être innovant et créatif et à rendre cette application aussi conviviale, intuitive, fonctionnelle et unique que possible.

Problème

Au début du projet, j'avais en tête un problème spécifique que j'avais l'intention de résoudre. Cependant, après quelques réflexions supplémentaires, j'ai réalisé que "Stash & Store" pouvait effectivement être une application multifonctionnelle résolvant des problèmes quelque peu différents pour différents types de personnes. Voici les problèmes que j'aspirais à résoudre d'une manière ou d'une autre :

• Manque d'espace de rangement chez les gens
  Dans le monde moderne, les gens manquent d'espace de vie et encore moins d'espace de rangement.
• Prix ​​élevés des box de stockage et des entrepôts
  Ceux qui envisagent de louer des espaces de stockage sont très souvent découragés par le prix élevé des loyers. Les entrepôts spécialisés peuvent souvent être très coûteux.
• Excédent d'espace inutilisé
  Les personnes possédant un excédent d'espace se retrouvent parfois seules avec des dépenses pour leur espace inutilisé.

Conscient des problèmes susmentionnés, j'ai commencé à faire des recherches. La première chose que j'ai faite a été, comme toujours, d'analyser les candidatures et les produits de la concurrence. En faisant cela, j'ai trouvé quelques idées sur ce que je pourrais ajouter à mon application, mais plus important encore, j'ai trouvé des défauts et des lacunes dans les applications de compétition. Mon objectif final était de créer la meilleure et la plus unique des applications à cet effet ! En plus d'inspecter les applications de compétition, je voulais apprendre à connaître l'utilisateur. Tout au long du processus de conception, penser à l'utilisateur et à ses besoins a été ma priorité absolue.

Persona de l'utilisateur

Après avoir examiné en profondeur les problèmes de base que mon application résoudrait et mené des recherches approfondies sur les besoins des utilisateurs potentiels, l'étape suivante consistait à identifier le personnage d'utilisateur idéal.

Réflexion

Après avoir identifié la personnalité de l'utilisateur, j'ai participé à quelques séances de remue-méninges. À ce stade, j'ai noté presque toutes les idées qui me venaient à l'esprit. J'ai fait ces notes dans FigJam et les ai transférées plus tard sur une page spéciale Figma spécialement désignée pour ces idées.

Comme vous pouvez le voir sur la capture d'écran ci-dessus, il y avait une section pour le brainstorming pur alors qu'il y avait aussi des sections pour des parties principales spécifiques de l'application.

Carte UX

Après avoir trouvé diverses idées, j'ai construit une carte UX. Il existe trois couleurs de cadre dont chacune représente une partie distincte de l'application.

Planche d'inspiration

En ce qui concerne les éléments de l'interface utilisateur de mon application, j'ai créé un grand tableau d'inspiration comprenant un grand nombre d'écrans et de plans variés provenant de différentes applications. Bien que ce soit peut-être quelque peu contre-intuitif, je me suis inspiré des applications de voyage, des applications de médias sociaux, des applications de cuisine, des applications de navigation, etc. J'ai prêté attention à tous les éléments de l'interface utilisateur - couleurs, champs de saisie, menus, icônes, boutons, polices, illustrations, cartes, etc. En substance, toutes les applications partagent une bonne quantité des mêmes éléments d'interface utilisateur.

J'ai enregistré de nombreux clichés de Dribbble, Mobbin, Behance et de plates-formes similaires sur ma page "Inspiration Board" dans Figma. J'ai classé tous les clichés selon leur objectif. De cette façon, il y avait plusieurs sections distinctes contenant différents types de plans.

Je me suis également assuré de laisser des notes sous forme de commentaires Figma sur les prises de vue pour me rappeler la chose exacte qui a attiré mon attention. Je savais qu'il me suffisait de réajuster et d'imiter les travaux de divers autres grands designers pour que mon application soit superbe ! Les applications dont je me suis inspiré étaient principalement utilisées dans le monde entier et elles ont été conçues par certains des meilleurs experts au monde !

Wireframes Lo-Fi

J'ai créé trois sections filaires. Le premier est universel et c'est le processus d'intégration. Les deux autres sections étaient des wireframes de différentes vues d'application , une pour les hôtes et une pour les clients . Une fois l'application téléchargée et l'utilisateur enregistré, il peut toujours facilement passer de l'une à l'autre. Dans les captures d'écran ci-dessous, il est visible que presque tous les écrans ont été introduits dans ce wireframe.

Une fois que j'ai terminé les wireframes, j'ai eu une idée beaucoup plus claire de la façon dont j'allais poursuivre le projet. Aussi, pour ne pas oublier mes pensées lors du wireframing, j'ai laissé des commentaires Figma dans certaines zones de l'écran pour me rappeler mes plans pour un élément de design spécifique.

Système de conception

La police de caractères que j'ai utilisée en combinaison avec la couleur du thème s'est avérée être la meilleure solution. Ce ton de couleur verte évoque la confiance, l'optimisme et la positivité générale dans l'esprit des utilisateurs. D'autre part, DM Sans en tant que police de caractères transmet un sentiment de modernité, de professionnalisme et de clarté. Les lignes épurées et les coins arrondis donnent à l'application une sensation conviviale et accessible, tandis que les arêtes vives suggèrent un sentiment de précision.

Pour une productivité accrue dans le processus de conception, j'ai créé des styles de texte et de couleur. De cette façon, il était plus facile et plus rapide de décider de la couleur de certains éléments de l'interface utilisateur et de décider de la police que j'utiliserais à un certain endroit. La création de styles m'a également énormément aidé plus tard à apporter des modifications au design.

En ce qui concerne les icônes, pour conserver un design cohérent dans toute l'application, j'ai utilisé un seul pack d'icônes et un seul type d'icône. Le nom du pack d'icônes est "Heroicons" et il contenait presque toutes les icônes dont j'avais besoin dans un format SVG (vecteur). Les icônes que je n'ai pas trouvées, j'ai dessiné avec un outil stylo dans Figma. Je me suis assuré qu'ils étaient cohérents en taille et en trait avec les icônes du pack d'icônes mentionné précédemment.

Source du pack d'icônes :
https://heroicons.com/

En ce qui concerne les illustrations que j'ai utilisées, elles ont également été tirées de la même source d'illustration. Encore une fois, la cohérence de l'interface utilisateur est très importante !

Source illustrations :
https://storyset.com/time

Conception finale

Comme mentionné dans le chapitre "Lo-Fi wireframes", "Stash&Store" comprend deux vues d'application . Le premier est axé sur le client et le client est le type d'utilisateur qui recherche du stockage à louer via l'application. Cette vue d'application est censée aider le client à trouver facilement des offres de stockage. La deuxième vue de l'application est destinée aux hôtes qui cherchent à louer leurs espaces. Dans ce cas, "Stash&Store" sert l'utilisateur de manière spécifique qui facilite la gestion de ses offres.

Le processus d'intégration en soi est relativement le même pour chaque application. Dans ce cas, l'utilisateur dispose bien sûr de deux options principales - s'inscrire ou se connecter. Lors de la création d'un compte, les utilisateurs sont invités à spécifier l'utilisation qu'ils souhaitent faire de "Stash&Store". Ceci est inclus car l'utilisateur peut être intéressé par une seule vue d'application. Selon son choix, il poursuit le processus d'inscription.
Ceux qui procèdent en tant qu'hôtes sont invités à répertorier immédiatement leur offre ou à ignorer cette partie et à y revenir plus tard. Les hôtes devraient également prendre une photo de leur carte d'identité émise par le gouvernement pour vérifier leur identité.
Pourtant, le seul processus de vérification obligatoire pour tous les utilisateurs est la vérification par e-mail.

Une fois le processus d'inscription du client terminé, les utilisateurs sont dirigés vers l'écran Explorer, qui sert également d'onglet Accueil. À partir de là, ils peuvent rechercher un stockage en entrant un emplacement souhaité et ils peuvent filtrer leurs résultats de recherche. La carte affiche les repères d'emplacement du stockage disponible. Une fois l'un d'entre eux cliqué, dans la partie inférieure de l'écran apparaît une carte donnant des informations générales sur ce stockage.
Une autre fonctionnalité importante de cet onglet est la fonctionnalité "Placer un point". En cliquant sur le bouton dans le coin inférieur droit, une petite épingle de localisation apparaît au centre de l'écran. Il reste au centre pendant que l'utilisateur fait défiler la carte. Lorsque l'utilisateur place la broche à l'emplacement souhaité et appuie à nouveau sur le bouton en bas à droite, tous les emplacements de stockage à proximité de la broche placée apparaissent à l'écran.

Après avoir trouvé un stockage approprié, les clients peuvent envoyer une demande de disponibilité en ligne. Comme on le voit dans le deuxième écran ci-dessus, les clients sélectionnent la date de début souhaitée et ils peuvent également écrire une note à l'hôte. Il est important de mentionner qu'il appartient toujours à l'hôte d'approuver entièrement la demande du client.
Une chose que j'ai introduite dans l'application qui aide les clients à décider du stockage, ce sont les puces de réussite . Ces puces apparaissent sur l'écran de stockage et elles représentent une certaine forme de garantie pour le client que le stockage qu'il a trouvé est sûr et fiable. Les hôtes sont ceux qui obtiennent ces puces grâce à la vérification de compte et à un certain nombre de transactions conclues.

Une fois que le client a réservé un espace de location, il peut trouver l'offre dans le deuxième onglet - mes locations. Dans cet onglet, ils ont un aperçu de toutes les offres qu'ils ont faites. Cliquer sur l'une des cartes ouvre un écran où la personne peut voir son offre mais, plus important encore, où elle peut modifier et/ou annuler sa réservation. Dans les deux cas, il leur est demandé de confirmer leur action afin de ne pas faire d'action accidentelle.

"Messages" est le troisième onglet de cette application. Il est également présent dans la vue de l'application hôte car il est plus ou moins universel. L'utilisateur peut rechercher dans les chats, supprimer des conversations ou les archiver. De plus, dans le cas de la vue de l'application des clients, les utilisateurs peuvent envoyer des questions fréquemment posées pré-générées (comme indiqué dans le troisième plan ci-dessus).

Les écrans de profil pour les deux vues d'application sont relativement similaires. En haut des deux écrans se trouve le bouton qui modifie la vue de l'application. J'ai voulu que ce bouton soit facilement accessible. De plus, si l'hôte n'a pas entièrement vérifié son compte, il est rappelé et encouragé à effectuer la vérification. C'est le but de ce bouton vert vibrant en haut du deuxième écran.

Dans la vue de l'application des hôtes, l'une des choses les plus importantes est la gestion des réservations. Pour assurer une expérience transparente aux hôtes, j'ai donné la priorité à la conception d'un système intuitif de gestion des demandes qui leur permet de visualiser et de gérer facilement les demandes.

L'ajout et la modification d'offres sont également cruciaux pour les hébergeurs. Il devrait être facile d'ajouter des espaces, de modifier des listes et de consulter des avis.

Concernant l'onglet "messages" dans la vue des hôtes, il en va de même pour les deux vues de l'application. Cependant, les discussions sont divisées/séparées entre les deux vues différentes de l'application.

Conclusion

En résumé, l'application Stash&Store est conçue pour résoudre le problème des options de stockage sécurisées et abordables pour les personnes qui ont besoin d'espace supplémentaire pour leurs effets personnels. Grâce à l'application, les locataires peuvent facilement trouver et réserver des espaces de stockage, tandis que les hôtes peuvent monétiser leur espace inutilisé.

Si vous avez aimé mon étude de cas, assurez-vous d'applaudir cet article 50 fois.
Conseil de pro : essayez d'appuyer sur le bouton Clap :)

Contact

N'hésitez pas à me contacter :)
[email protected]
https://www.linkedin.com/in/danis-okic-745a4919a/
https://www.instagram.com/danees6/