France AgriMer

National establishment of agricultural goods

France AgriMer is a branch of the French Ministry of Agriculture. France AgriMer represents the national establishment of agricultural and sea products. They wanted to create a platform where producers can request certificates from the competent authorities in order to export their products.
Imagine you are a wine producer and you want to export your wine to China, before the site creation you needed to fill forms by hand and send it by postmail, today, everything is possible and accessible from the website!

Rôle : UI/UX designer & frontend developer in a 12 people team
Main contributed in UI design & participated in ideation, wireframing, and flow chart.

 

Begining with user interviews, persona workshop & lifecycle

INTERVIEWS – After a talk with stakeholders to understand the project, I began user interviews to have a better idea of who are the users, when they’re involved in the process and to understand their needs and issues.

PERSONA – To be sure to have the same point of view with stakehoders, I animated a persona workshop. They had to work on personas which are involved in the process and try to define personas’s aims, persona’s issue and persona’s way of work.

LIFECYCLE – The lifecycle represents the process and the different moments of a certificate lifecycle.

 

 

Wireframe & prototype

We iterated our wireframe design by conducting informal usability testing with the low-fidelity prototype.

UI design, accessibility & frontend development

As I was in charge of the creation of new graphic orientations, I had to respect stakeholders wishes : orange as primary color, web accessibility for people with disabilities and a up-to-date UI.

UI DESIGN – Using orange and not feeling that it’s an alarming graphic design was a challenge. So, I used shades of blue to give a reassurance feeling to users and to highlight the orange color. I also created illustration to give a more up-to-date image to the website.

ACCESSIBILITY – The site should respect every rules of WCAG – RGAA, to be certified. I add a swith for colors to have better contrast, I implemented all rules in HTML/CSS such as alternatives for images, alternative texts for icons for example and headlines structure.

FRONT-END DEVELOPMENT – The site is responsive from mobile to desktop. I used Bootstrap to develop the interface and I used Gulp to automate my tasks such as compile SASS files, automatic refresh with browserSync or create dist folder.