Coface | Design System

— PROCESS

One of the main goals was to bring more UX within Coface’s processes. From that goal came the idea that large companies like Coface need more accessibility, simplicity and efficiency for these processes. Coface was definitely lacking in the UX department not just in staff numbers but also tools and UX involvement in agile projects. Based on a future version of Coface’s website and Coface’s official graphic charter, key idea was to build a design system using atomic design method in order to bring a faster UX workflow for upcoming Coface applications evolution and developer teams. As an UX designer, it’s my role to build a coherent and useful design system that can significantly improve the productivity inside Coface and to better answer international clients needs.

For a better organization and workflow of the design system, I built a full style library including colors, typography, spacing, logo rules and icons. This basis allows me to create or manage each and every component. By using Figma functionalities, I built small components first and then bigger organisms according to atomic design principles. From components, I created variants with different states, sizes and resolutions. It’s essential for a complete and functional design system. I used the same process for the other 4 design systems (more details in other pages).

Every components, variants and organisms with properties and styles can be used to make generic templates or pages. Here’s an example of what I’ve made for account settings pages. Later on these templates have been used by other UX designers to improve their workflow on side projects. Templates can be easily updated by changing each variants and adding new custom styles.

— After Thoughts

WHAT I DID WELL

I worked months on this design system beside other projects. I also worked closely with my coworker Gregory who’s also an UX designer who helped me a lot with ideas, methodology and technical support. As the main designers on this project, we tried to find the best way to build a coherent and useful design system for designers and developers. I didn’t know at first where it could lead but after many updates this design system gonna be very helpful for building new applications interfaces and faster integration process.

WHAT I WOULD DO DIFFERENTLY

As a team we struggled a lot with getting the right structure and operational system because it has never been done before inside Coface. Also Figma’s version didn’t have the same functionalities back then so I would definitely start differently today. Globally I would make a less specific design system which means simpler styles and more standard pages for a versatile use.