FCODE - Tablet App Design
💳

FCODE - Tablet App Design

image

The contexte

Idemia is the world leader in augmented identity, it’s a French digital security company specialized in biometrics, identification and authentication, data and video analysis. With 15,000 employees worldwide, IDEMIA serves its customers in 180 countries. FCODE is a payment card developed by the company with a biometric fingerprint reader. It was built with the aim of offering users a way to pay in contact and without contact sums above 50 euros without the need to enter a PIN code. I was asked to intervene on the application in charge of registering the user's fingerprints when the user receives his payment card for the first time.
Objectives Build an application to enroll users' biometric fingerprints on a payment card.
📬
The missions ✔️ Challenge the usability of interfaces ✔️ Validate the interest of the features, as well as the relevance of the user paths ✔️ Emerge and collect complementary needs and barriers. ✔️ Recommend key paths and model them
👥
Project Team (Intern) 1 Lead designer, 2 Ux designers, 1 Project manager, 1 Dev fullstack
🏃🏿‍♀️
Sprint 2 weeks

Project planning

🏃
Sprint 1 - Kick Off - Realization of the mock-ups - Preparation of user tests - 1 Guerilla test - Analysis & Recommendations (modification of the mock-ups) 📦  Expected deliverables: 1 maintenance guide, mock-ups, design system, synthesis & ppt recommendation
🏃
Sprint 2 - Preparation of user tests - 1 Guerilla test - Analysis & Recommendations 📦  Expected deliverables: 1 interview guide, synthesis & recommendation ppt, mock-ups, design system

Step 1 : Understand

📒
A mvp of the project had already been done by the developer and a specification had been written by the project manager. The latter expected me to intervene on the user paths of the solution in order to challenge their intelligibility and accessibility

I first proceeded to an ergonomic audit of the interfaces and an analysis of the existing user path, then I made an experience map and a userflow to identify the context of use of the product.

Userflow
Experience map
Experience Map
Experience Map
⚠️
Problems detected : 1. Several courses were missing 2. Many inconsistencies were present in the sequence of courses
After this first analysis, I proposed a workshop with the client in order to exchange our understanding of the solution and co-create together the missing paths.

Step 2 : Co-construction workshop

I conducted a workshop on the Mural tool by presenting the userflow and the experience map in order to obtain details on the service thought by the project manager and to collect the developer's opinion in terms of feasibility.

Userflow
Userflow
At the end of this workshop, the following objectives had been achieved: - An understanding of the various technical specifications of the product - The improvement of the current workflow - The definition of the different paths to test - A list of wireframes to realize

Step 3 : Prototyping

Once all the paths were validated, I was able to create a design system based on Idemia's graphic charter and to create interactive mock-up with figma. I am not authorized to communicate the existing mock-up but you can have an idea of the solution by consulting the youtube video below communicated by Idemia.

Product demonstration video

Step 4 : Test

Once the interactive prototype was created in figma we decided to test it in guerrilla testing with users in order to challenge it. So I proceeded to write a test guide listing the objectives, the scope and the course of the test (pre-test questions, scenario, list of missions, post-test questions etc.). For each test, we make sure to record the session in audio (with the permission of the tested) in order to be able to quote user verbatims during our reviews. These user tests allowed me to discover various types of problems.

Guerilla Test
image
image

Step 5 : Analysis

I used an excel file to process my observation grid and process my data in the form of an atomic research. I was able to define the recommendations to be implemented to respond to the problems identified during the user tests.

Excel observation grid
Excel observation grid
⚠️
Problems detected : 1. The majority of users were unable to complete the main scenarios independently 2. The tutorial was misinterpreted 3. Confused functionality 4. Lack of guidance in the solution 5. Physical pain encountered during handling 6. Lack of confidence in the security of their data 7. A Ux writing sometimes too technical or imprecise

Step 6: Presentation of results

Once my first feedback was done, I was allowed to implement my recommendations on the figma models and conduct a second test session to check if the problems had been solved.

Where are we today ?

🚀
The mock-ups and the design system have been delivered to the project manager and the developer. The project is being declined on new devices.

Win This project was very interesting to work on because I intervened early enough in the project to challenge the user paths that had been defined by the developers, who were open to my recommendations. Discussing with the technical team is very important because it allows us to arbitrate the project and to remain realistic about the feasibility of the features we want to integrate as a designer. The guerilla-tests also allowed me to realize the indispensable character of user-tests in a project.

Frustration

The project was not organized in agility but in V-cycle, our intervention as a designer was therefore defined and limited in time.

This project allowed me to realize that a project is never finished and that it must enter a continuous iteration loop if we want to ensure the quality of the product in the long term.