CofaNet | Design System

— Project background

CofaNet is an intranet application that allow clients to manage their contracts and to prevent non-payment risks by displaying data about companies financial status and evolution. Since 2020 the entire user experience and interface have been changed to bring a modern look and more functionalities. Main issue is, no UX designers were involved before any development phase which means CofaNet needed a complete UX improvement. Each month, clients or product owners have requests about the evolution of user experience. To answer those needs best way is to build a detailed design system and to enhance collaboration with developers team for any integration or client requests.

— PROCESS

I used the same approach and methodology as for the Coface design system but with more details and specifications. Goal was to build an advanced design system for designers and developers team in order to speed up integration workflow. Each component and variant are based on real elements and interactions on CofaNet in order to build specific pages and realistic prototypes. I’ve built a file structure that can be understood by non-designers and easily reused for another application. Since our team operates in agile mode within 2-week sprints, it has to feel accessible and collaborative that’s why we started using Figma for every UX projects.

— Responsive First

Every page and organism have also been built for mobile and tablet resolutions. Our main project this year was to make CofaNet accessible on mobile for clients and new users. This specific part took less time by using our design system and working closely with developers before production delivery.

— After Thoughts

WHAT I DID WELL

I worked more than a year on this project, trying to optimize every part of it so it can feel like a tool not just a simple file. I was in charge of every aspect from making variants to responsive pages, I was putting all of my efforts in this subject. I can humbly say this is one of my best UX project to date. I worked daily with developers team to make sure mockups are feasible and understandable in order to succeed any integration project. I’ve had technical specifications for every component to better help developers in that way.

WHAT I WOULD DO DIFFERENTLY

I would definitely go further into variants properties and animations, building variables around pages or including a dark mode version. In addition we wanted to make a detailed documentation on Confluence but we got too many projects going on to manage everything. I also spent few times on interactive mockups because it wasn’t needed but I wish it was since it’s really the next stage of UI.