Flopster Mobile App
Design & Development

CLIENT Flopster
DELIVERABLES Design & APPDevelopment
LIVE WEBSITE www.flopster.com

À PROPOS DE'FLOPSTER

Flopster est une application mobile native révolutionnaire qui aide les propriétaires d'animaux à localiser les établissements amis des animaux dans leur région. La carte virtuelle indique les endroits où les animaux peuvent manger (cafés et restaurants), jouer (parcs et plages) et séjourner (hôtels et campings).

L'accueil des utilisateurs de l'application Flopster était essentiel au succès de l'application, car il permet de combler le fossé entre le fait de captiver les amoureux des animaux pour qu'ils essaient l'application et de les convertir en utilisateurs investis, ainsi que d'éprouver un fort sentiment d'appartenance en tant que membre d'une grande communauté.

Lieux accueillant pour les animaux près de chez vous avec des offres spéciales !

ÉNONCÉ DU PROBLÈME:

Nous devons afficher tous les établissements amis des animaux à proximité sur une carte virtuelle dans l'application, ainsi que leurs informations, leurs évaluations et leurs commentaires. Nous nous sommes efforcés de faire simple mais pas trop, car notre équipe fait partie de la communauté des amis des animaux, ce qui a rendu plus difficile la mise en œuvre des meilleures stratégies d'expérience utilisateur.

LE DÉFI:

NOS RÉALISATIONS:

Ainsi, les concepteurs de DA Studio ont analysé les préférences en matière de couleurs et la manière dont la psychologie sous-jacente à la couleur et à la structure squelettique de l'application mobile Flopster affecterait l'approche de l'expérience utilisateur que nous envisagions de mettre en œuvre. Cette approche a eu un impact significatif sur la perception et l'interaction d'un amoureux des animaux avec le caractère innovant de Flopster. L'utilisateur est au centre de l'ergonomie mobile, et il est également le facteur décisif du succès d'une application.

PROCESSUS DE CONCEPTION

01 DÉCOUVREZ
  • Entretien avec l'utilisateur
  • Recherche sur les utilisateurs
  • Analyse concurrentielle
02 DEFINIR
  • Carte de l'empathie
  • Carte du voyage
  • Persona
03 IDEE
  • Flux d'utilisateurs
  • Tri des cartes
  • Architecture de l'information
04 DESIGN
  • Cadre filaire
  • Conception visuelle
  • Prototype
05 TEST
  • Test d'utilisabilité
  • Test de flux d'utilisateurs
  • Essais de conception

LE FLUX D'UTILISATEURS ET LE WIREFRAMING

Nous avons commencé à concevoir des maquettes filaires une fois que nous avions acquis suffisamment d'informations. Deux itérations du prototype ont été créées. Ouf, cela a demandé beaucoup de réflexion et d'étude ! Il est maintenant temps de passer au travail graphique ! Nous avons dessiné quelques maquettes avant de nous lancer. Après toutes les recherches, le brainstorming et le wireframing, il était enfin temps de numériser les versions finalisées.

ONBORDING

ONBORDING

FONCTIONNEMENT DE LA CARTE

L'interface utilisateur est simple et fonctionnelle pour chacun. Lorsqu'un utilisateur arrive sur chacun des écrans d'accueil, il a une idée claire de sa localité, par rapport à son environnement. Chaque application est extrêmement réactive : l'utilisateur peut pincer et faire glisser l'écran pour avoir une vue d'ensemble de la carte.

DÉCOUVRIR DES LIEUX DANS LA CARTE

Aider les consommateurs à se rendre dans une zone donnée est un scénario courant pour les applications mobiles. Il peut s'agir d'un restaurant ou du point de départ des plus incroyables randonnées adaptées aux animaux domestiques. Nous pouvons utiliser les applications cartographiques intégrées d'iOS et d'Android pour y amener rapidement nos utilisateurs.

DÉCOUVRIR LES DÉTAILS DE LA BOUTIQUE

L'écran commence par une option permettant de revenir aux résultats de la recherche, de partager cette zone particulière ou de la présélectionner pour plus tard. Les utilisateurs peuvent également glisser pour afficher les photos ou cliquer sur l'image pour accéder à une galerie.

L'utilisateur peut partager la page avec ses amis ou sa famille.

Le composant suivant à l'écran est le cartouche, qui comprend le nom de la rue commerçante, le type e-commerce (centre commercial/rue/etc), la cote moyenne, les heures d'ouverture, les spécialités et le montant moyen que les gens dépensent pour faire du shopping dans cette zone.

PROFIL D'ANIMAUX MULTIPLES

Nous avons envisagé de permettre aux utilisateurs d'établir des profils pour plusieurs animaux dans leur compte afin qu'ils puissent suivre leurs animaux grâce à une liste de leurs animaux et de leurs coordonnées.

Modèle de processus:

Agile Methodologies (Scrum).

Outil utilisé:

Design: Zeplin, Figma

Mobile Apps: Android Native, IOS Native

Backend: PHP Laravel & MYSQL Database

Durée du projet:
10
Semaines
18+Pages web

BRANDING

BRANDING

Palette de couleurs
Brand Typface

Aa

SF Pro

AaBbCcDdEeFfGgHhIiJjKkLMmN
nOoPpQqRrSsTtUuVvWwXxYyZz

0123456789
!*@$%&#)/.,

Titre Intitulé
Chef de file Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum
Paragraph Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry
Bouton En savoir plus

MAQUETTES HAUTE FIDÉLITÉ