Tawuniya Insurance

Product Designer UX & UI

Nous étions une équipe constituée d'un chef de projet, d'un business analyste, d’un architecture back-office, d'un développeur front et moi même. Afin de bien qualifier les besoins du métier et des utilisateurs nous avions un référent (Product owner) chez le client qui participait à l'ensemble des phases de conception et de développement. Ces phases étaient basées sur la méthodologie Agile, donc sous forme de sprints. C'est lors du sprint 0 que j'ai été le plus impliqué, comme lors des workshops et de la conception des écrans. Le cas d'étude qui suit montre le travail réalisé durant ce sprint 0.

Tree-Logo
Default image

Contexte

Atlanti est une société financière privée à Genève qui jouit d'une très bonne réputation auprès de ses clients. Comme beaucoup de sociétés en suisse romande, elle œuvre pour que ses clients restes fidèles et se sentent accompagnés au mieux. N'ayant pas une présence forte ou des outils de gestion accessibles à leurs clientèle, elle ne pouvait pas répondre aux exigences et besoin de ses clients plus jeunes et plus connectés.

Méthodologie

Nous avons approché ce projet en plusieurs phases. Dans un premier temps nous nous sommes entretenu avec des experts de chez Atlanti afin de comprendre les enjeux de leurs métiers. Ce qui était intéressant de voir était que leurs besoin le plus important était de pouvoir rassurer un maximum leurs clients vis à vis de leurs investissement. Au delà de maintenir un compte et de suivre le marché des fonds d'investissement, les experts d'Atlanti conseillent chacun de leurs clients sur un investissement qui leurs convient. Il est donc important de pouvoir voir ces données dans l'application, cela rejoins aussi l'ADN d'Atlanti qui prône des investissements transparents.

Dans un second temps, nous avons pu dresser un inventaire de fonctionnalités attendues et réalisé des workshop afin d'affiner. Dans une logique de co-création et pour confronter nos idées nous avons invité de potentiels client à venir à un second workshop.

UX Design

Les parcours utilisateurs que nous avons recueillis lors de la phase de workshop étaient centrale en ce qui concerne la phase de conception. 

Nous nous sommes basés sur ceux-ci afin de créer les premier wireframes et valider les spécifications fonctionnelles. 

Afin que ce processus de validation soit le plus simple possible nous avons réalisés un prototype directement sur un smartphone grâce à des outils comme Adobe XD ou Figma.

Default image
Default image

Direction Artistique

Afin de maintenir une cohérence avec l’identité du client lors de la conception de produits digitaux, il était essentiel de comprendre comment les éléments de marque allait être appliqués.

C’est pour cette raison que nous avons travaillé en collaboration avec le lead de la direction artistique chez le client pour mettre en place une liste de règles concernant l’utilisation de la couleur, de la typographie et de l’imagerie.

Les choix de design sont un fruit d’une recherche conduite dans les bureaux du client afin de capturer l’ADN de la marque. Pour cette raison nous avons choisis de partir sur une piste qui reflette les intérieurs vitrés, boisés et luxueux d’une société florissante.

Default image

Maquettes & prototypes 

Les maquettes ont été crée sur Adobe XD en suivant les guidelines et spécificité des plateformes (devices) mobile.

Nous avons chois de pousser une approche atomique* lors de la conception donc l’ensemble des éléments (Couleurs, formes, typographies etc..) sont connectés et formes des composants modulables et facile à modifier que ce soit dans l’outil de conception ou en bien en développement pour de nouvelles versions.

Ce design système basé sur le design atomique* existe aujourd’hui et est développé sur le framework Flutter.

Voir la démo ici (lien XD).

*La notion d’Atomic design est une méthodologie de conception de produit. Voir le livre de Brad Frost “Atomic design” 

Processus de validation

Nous sommes passé par plusieurs phases de validations de la maquette grâce aux prototypes interactifs. Ces phases était découpée en fonctionnalités et parcours utilisateurs et permettait d’avoir des fonctionnalités prête au développement durant la phase de conception et d’avoir une “Definition of ready” claire.

Résolution

La combinaison de la méthodologie Agile et de l’Atomic design a permis de créer une application efficiente, rapide, intuitive pour les utilisateurs internes d’Atlanti et de leurs clients. Au-delà de la satisfaction utilisateur, notre client peut aborder les innovation avec plus de confiance en ayant une fondation robuste et des processus cadrés.

La combinaison de la méthodologie Agile et de l’Atomic design a permis de créer une application efficiente, rapide, intuitive pour les utilisateurs internes d’Atlanti et de leurs clients. Au-delà de la satisfaction utilisateur, notre client peut aborder les innovation avec plus de confiance en ayant une fondation robuste et des processus cadrés.

Default image

View my other projects

Atlanti Asset PotfolioProduct Design