CofaNet : Improved UX
Role & Service
UX/UI designer and front developer for Coface BT
Timeline
From June 2022 to April 2023
Credits
© Coface 2022 / 2023
Bring accessibility, greater usability and responsive pages on CofaNet
That’s what it’s all about. Main challenges were to make CofaNet interface accessible, cohesive and mobile friendly. I worked closely with my coworker Gregory for months to bring this project to life. Based on a 2021 UX audit, we pointed out every aspect that needed to change and apply it directly on CofaNet interface which means we integrated this evolution ourselves on front-end part.
— Accessibility
As we worked on our design systems, we also wanted to make CofaNet interface accessible to visually impaired users by integrating specific tags on text, images, buttons and icons. It’s part of the latest rules recommended by W3C (World Wide Web Consortium), as for other companies, Coface must comply with these rules to avoid a heavy fine. CofaNet is powered by Angular, directly in code I added multiple arial labels with translation keys for all elements concerned. After pushing changes on Git and testing code before production delivery, attributes are visible inside Google’s inspector and by their bots which makes it easier for visually impaired users to navigate on CofaNet between each pages. Tags are viewable from any browser inspector (example below).
— Interface Changes
As the interface development on CofaNet was originally made without respecting Coface’s graphical charter. In order to have a clean and professional interface, we operated changes on fonts, texts, spacing, colors and icons. It includes Coface’s corporate colors and fonts but also a new icon library, LineAwesome, than can replace all Font Awesome 5 icons in order to bring a cohesive look. As we did before, we made our changes directly in Angular’s code, we also redefined code structure for setting files and integrated a new spacing workflow, then as usual we tested our pushed changes before production delivery.
Among new graphical charter changes and accessibility improvements, we needed to upgrade every elements and pages according to previoud UX audit we made. This involves evolution for usual clients and new users that don’t clearly understand how CofaNet works and that’s a big issue.
By changing icons, naming, key informations and user path, we’ve brought a more logical user experience and helped to earn more commitments from daily CofaNet users. We also updated Angular code structure again and how information can be found on most pages.
— RESPONSIVE
Based on my responsive prototypes using CofaNet’s design system, I was in charge of the responsive integration on Angular and testing before pushing the changes to developers team. For the better organization of the project, apart from development phase, I’ve written thirty user stories linked to an epic in Jira to track my progress on every page and screen resolution. It also enabled teams and product owners to monitor this project evolution.
It was essential to set up new breakpoints and attributes in order to adapt correctly all pages to different screen sizes (here’s an example on the right). Also pushing changes on Gitlab step by step, based on Jira’s stories, helped me to reduce mistakes and to test pages efficiently. Later on, I worked closely with developers to make sure no conflicts or bugs happened before delivery.
— After Thoughts
WHAT I DID WELL
I’ve been on this project for 3 months, it was really challenging for me cause it oscillated between development and UX with some project management. I also had to ensure my work was technically correct and matched responsive prototypes before any test delivery. Hardest part was to find my way in every single Angular files and establish links between elements. In the end, it’s all about organization, the right methodology and having trust in the team. That’s why we succeeded in making this project a reality at Coface.
WHAT I WOULD DO DIFFERENTLY
I really would have started differently by building user stories earlier or made different choices regarding breakpoints structure. But I’m glad I learnt from these mistakes. Taking over previous developers’s code and update it, it took me a while to assimilate it. It requires being patient and having a vision.