Expadon 2 - France AgriMer
Challenge : conducting a project with former users
France AgriMer is the national establishment of agricultural and sea products. They demanded Capgemini to create a plateform « Expadon 2 » where producers can request certificates from competent authorities in order to export their products. Imagine you are a wine producer and you want to export your wine to China, before this website creation you needed to fill forms by hand and send it by postmail. Today, everything is possible and accessible direct from the website!
The goal of the project was to reduce processing times, improve the products’ traceability and improve the competitiveness of french producers.
The desire for a user-centrered approach was real but due to lack of time, financial resources and support, the team and I had to carry out this project without any users. Our chance, stakeholders were former users.
7 months (Dec. 2017 - Jun. 2018)
UX / UI designer & frontend developer
- 1 Product Manager
- 1 UX/UI designer & frontend developer
- 3 Product owners
- 8 Developers
Design question
How to optimize certificate processing times?
Research
I conducted a 2-day workshop with the France AgriMer stakeholders and Product owners in order to :
- Understating the relationship between the different services and there vastness
- Roles and responsibilities of members at each level
- Day to Day tasks that need to be accomplished
Certificate
My 2-day workshop make me imaginate a « certificate journey » as we do for a user, in order to sum up what we said in those workshops and to identify painpoints. So I mapped out an end-to end certificate journey of a producer request to visualize how many steps there was and who were involved in the process. After overviewing the request experience, I synthesized an initial hypothesis that the interfaces must reflect the status of the process, what are the pending documents, what is the destination of the products and what are the rules of the importing country.
Proto-persona
I also created 5 proto-persona (without insights, only based on what stakeholders thought they know), in order to have an exhaustive panel of the users. What I discovered is that on of my persona was based in a different country so practices, langage, ways of understanding a certificate can be different (check above Chang Li - in green - check point). Another one was with disabilities because in French law, companies must hire people with disabilities.
So I synthesized another hypothesis : foreign controller using the plateform had to know where the certificate came from at a the first sight, and the website should be adapted to people with disabilities.
Wireframing
The Product Manager split the process in 2 parts :
- 1 : the website from where producers request their certificate
- 2 : plateform where controllers (France AgriMer employees) control requests
I worked on the first part. So I started creating high-fi concepts for primary use cases and I conducted a focus group workshop with stakeholders (who are former users) to verify my layout hypothesis and my navigation flow. Once we had confidence in the design, we began digitalizing designs.
Graphic design
Remember we said that we need the website to be accessible (AA) for people disabilities. One of the graphic challenges were to keep the original color of Expadon (a former project) which is orange. Because orange is one of the color the less accessible, I needed to find a trick. So I implemented a style switcher.
Colors
Our primary palette is comprised of blue, orange and neutral colors in order to comply with RGAA AA-level standard contrast ratios.
Typeface
France AgriMer insisted to have a neutral typeface so I almost exclusively used Roboto across the website.
Illustrations
I also proposed a set of illustrations to have a less formal render, a more up-to-date website.
Frontend development
I implemented a design system in SASS to be more confortable for developers to implement my code in their Angular environnement. I respected the RGAA AA-level guidelines and made an audit after developers’ implementation to verify they didn’t forget any code for RGAA. I also made a documentation for them to understand everything on RGAA.
Project Learnings
Adaptability is key
No UX research was at the beginning a painpoint for me. So I needed to adapt my vision to get the more informations about the project, about ways to deliver certificates, about users. The chance was that stakeholders were former user of the plateform, so I think my researches and the way I built the plateform is not so far as the way users will use the product. I am still trying to implement user tests.
Documentation & communication is essential
It was the first time for developers to implement RGAA AA-level code. So I organized workshops to explain what’s RGAA, why it’s essential and how to implement guidelines. I also made a documentation to explain RGAA.
What's next ?
Website should be online current 2019 and 2nd part of the project is realized by Nicolas Dagot based on my research and hypothesis.