Recherche UX · Refonte · Suisse

Repenser un parcours numérique existant.

Entre janvier et avril 2026, j’ai travaillé sur le design UX/UI et l’innovation pour Hango, une application numérique suisse. La mission comprenait de la recherche UX, la revue des parcours utilisateurs, la conception d’interfaces et la réflexion sur leur implémentation.

Voir le projet en ligne, Hango.ch, s’ouvre dans un nouvel onglet

Rôle: Design UX/UI & Innovation
Période: Janv.–avr. 2026
Produit: Produit numérique existant
Lieu: Suisse

02 / Refonte UX

Hango.ch

Expérience mobile

01 / Problème

Où l’expérience en demande-t-elle trop à l’utilisateur ?

Une refonte part d’écrans en place, de contraintes et d’habitudes. La mission : revoir certains parcours, trouver où les interactions pouvaient être plus faciles à comprendre et à mener à bien, et concevoir l’alternative plus claire sans perdre de vue l’implémentation.

02 / Accès au produit

Trois portes d’entrée dans le produit existant.

Trois écrans authentiques montrent comment on entre dans le produit ; ce sont des portes d’entrée de l’app existante, pas des modifications de ma part.

OnboardingLa promesse — Dit à quoi sert l’app et demande une ville ou la position ; les chiffres sont le marketing du produit.

ConnexionApple, Google ou e-mail — Deux fournisseurs et un repli par e-mail, conditions liées sous le bouton.

Paywall Hango : illustration du pass, titre « Ton pass pour sortir moins cher », trois avantages, une formule annuelle et une mensuelle et le bouton d’essai de 14 jours — PaywallLe pass — Avantages, deux formules, un essai de 14 jours annulable à tout moment.

Écrans authentiques issus du fichier du projet · prix et chiffres sont le contenu du produit.

03 / Le parcours

Trois écrans, une séquence.

Trois écrans authentiques cadrent la séquence étudiée pendant la refonte.

Écran Découvrir de Hango : salutation, onglets Évènements / Établissements / Offres, filtres et une carte d’évènement avec sa photo, son prix et ses tags — 01 · DécouvrirÉvènements, établissements et offres à proximité — Ce qui se passe à proximité, avec des onglets évènements, établissements et offres, des filtres et une carte.

Détail d’évènement Hango : photo, titre, entrée gratuite au lieu de 9,90 CHF et le volet des offres disponibles avec un bouton « Utiliser l’offre » — 02 · Choisir une offreLe détail de l’évènement et ses offres — L’évènement avec sa photo, son titre et le volet des offres, chacune avec sa propre action.

Offre activée Hango : statut Activé, date et heure d’activation, l’avantage « 1 verre acheté = 1 verre offert » et la consigne de présenter l’écran au bar — 03 · Utiliser l’offreL’offre activée, présentée au bar — Statut, heure d’activation, l’avantage et la consigne de présenter l’écran au bar.

Écrans authentiques issus du fichier de design · la salutation du premier écran est anonymisée · aucun résultat mesuré n’est revendiqué.

Les offres là où la décision se prend
Problème
Une fois l’évènement ouvert, il faut comparer ses offres sans quitter le détail.
Principe UX
Recognition rather than recall (s’ouvre dans un nouvel onglet, en anglais) · Nielsen Norman GroupCet écran illustre le principe : les offres sont listées là où le choix se fait, rien à mémoriser.
Décision de design
Le design existant garde les offres dans le détail de l’évènement, une action chacune.
Preuve visuelle
Écran 02.
Résultat · statut
Produit existant · une observation, pas une modification de ma part.
Une offre activée qui annonce son statut
Problème
Au bar, la personne et le personnel doivent voir d’un coup d’œil que l’offre est valable.
Principe UX
Visibility of system status (s’ouvre dans un nouvel onglet, en anglais) · Nielsen Norman GroupCet écran illustre le principe : statut, heure et consigne sont le feedback.
Décision de design
Le design existant affiche « Activé », l’heure, l’avantage et la consigne.
Preuve visuelle
Écran 03.
Résultat · statut
Produit existant · une observation, pas une modification de ma part.

04 / De la réflexion à l’expérience

Un écran, quatre niveaux d’intention.

L’écran Découvrir lu à rebours, d’un croquis de sa structure à l’écran haute fidélité authentique.

Mode de lecture

Les états 01 à 03 sont des reconstructions pédagogiques réalisées à partir de l’interface finale pour que chaque niveau partage la même mise en page, pas des livrables historiques ; l’état 04 est l’écran authentique, salutation anonymisée.

Reconstruction illustrative des niveaux de fidélité

Croquis de l’écran Découvrir : blocs dessinés à la main pour l’en-tête, les onglets, les cartes d’évènements et la navigation basse

Reconstruction pédagogiqueStructure et flux

.ladder{display:none}

Wireframe basse fidélité de l’écran Découvrir avec des blocs gris pour chaque élément — 02 · WireframeArchitecture de l’information, basse fidélité

Version mid-fi de l’écran Découvrir avec les vrais libellés et contenus, en gris — 03 · Mid-fiHiérarchie et vrai contenu, sans couleur

Écran Découvrir authentique de Hango : interface sombre, onglet Évènements jaune, carte d’évènement avec photo, prix et bouton vert d’ajout à l’agenda — 04 · Hi-fiLe design livré, salutation anonymisée

Résultat.

Statut

Travail de recherche et de refonte UX/UI livré entre janvier et avril 2026. Aucun chiffre de complétion, d’utilisabilité ou de conversion n’est publié.

Réflexion.

Une refonte est d’autant plus solide que l’équipe peut expliquer non seulement ce qui a changé, mais pourquoi.