Retour

Création application Android de paiement sans contact SG

Permettre aux client SG de payer en un geste simple.

Payer avec son mobile n’a jamais été aussi facile.

Paylib a accompagné les équipes de la SG pour réaliser la nouvelle version de l’application Android de paiement sans contact. Une refonte globale a été réalisé pour permettre aux utilisateurs d’avoir une expérience de paiement fluide, simple et optimale.

Entreprise

SG

Rôle

Head of design

Expertises

Research, Sketching, UI design, Illustrations, Animations.

Période

Janvier 2022 - Juillet 2022

Design process

1.

2.

3.

4.

Research

Audit UX
Benchmark

Strategy

Product roadmap
Définition MVP

Design

Sketching
Wireframes
UI design
Animations

Test

Prototype
Testing

Chorégraphie des interfaces

Un concept global qui comprend l'architecture de l'information (navigation) ainsi que des partis-pris fort directement lié au concept graphique.

Objectifs ?
  • Valider le concept de navigation dans l'app comme si c'était un espace physique réel.
  • Les animations et micro-intéractions découleront de manière homogène de cette proposition
A quoi cela sert ?
  • Augmenter la qualité de l'expérience perçue,
  • Permettre d'être plus immersif,
  • Mieux guider l'utilisateur dans sa navigation (l'espace physique permet un meilleur repérage),
  • Permet de garantir une prise de décision homogène sur l'intégralité de l'App.
Language commun :
  • Une transition = Une animation en 2 écrans,
  • Une micro-intéraction = Une animation au sein dans un écran.
Language commun :
  • L'application est un bureau.
  • Toutes les actions liées au paiement sont réalisables avec une main (contexte de paiement caisse)
  • Les actions principales sont au premier niveau de cette surface.
  • Les actions secondaires se déploient au dessus des actions principales.
  • Pour l'action de payer, on fait table rase du bureau des éléments secondaire pour un focus sur l'action de payer.
  • Au sein de l'application, la star c'est la carte bancaire, elle conserve sa taille, on ne la perd jamais de vu, elle est présenté sur des fonds unis.
  • L'application reprends les principes minimaliste (sobre, épuré, pas de fioriture), en évitant la surcharge textuelle au profit des micro-animations

Architecture principale
de l'information

Organiser de manière macro les parcours utilisateurs et le séquencage des étapes clés.

Sketching de l’app

Ateliers de co-création avec l’équipe produit et le client pour définir les écrans clés de l’application sous forme de sketching.

Parcours utilisateur

Nous nous sommes focalisés sur la défintion des parcours utilisateurs en itérant sur nos propositions initiales.

Associer une carte bancaire via l’app mobile de paiement SG grâce à la technologie NFC.

Wiframes

Des wireframes mid fidelity ont été réalisé avant de passer à la phase de design des écrans.

Design des écrans

Créer des écrans moderne en respectant le design system de la SG.

Tests utilisateurs semi-directifs

Nous avons réalisé une cartographie de tous les écrans et intéractions entre chaque parcours pour donner une meillleure visibilité du site map aux développeurs.

UX détailée

Afin de transmetre toutes les instructions aux développeurs Android et avoir un suivi avec la SG dans la validation des écrans. Nous avons mis à plat tous les parcours définitifs et apporter des spécifications focntionnelles.

Refonte eco-système 4.0
App Paylib

Voir le projet

Studyandwork, le career
builder des 14 30 ans.

Voir le projet