{"id":1689,"date":"2026-04-29T18:05:14","date_gmt":"2026-04-29T18:05:14","guid":{"rendered":"http:\/\/192.168.86.62\/?post_type=portfolio&p=1689"},"modified":"2026-04-30T04:17:36","modified_gmt":"2026-04-30T04:17:36","slug":"financial-platform-design-system","status":"publish","type":"portfolio","link":"https:\/\/www.rossomando.net\/index.php\/portfolio\/financial-platform-design-system\/","title":{"rendered":"Financial Platform Design System"},"content":{"rendered":"\n

Financial Platform Design System<\/h2>\n\n\n

Role:<\/strong> Lead UX\/UI Designer
Company:<\/strong> Allvue Systems<\/p>\n\n\n\n

Context<\/h4>\n\n\n\n

While working across multiple product workflows, our team relied on a shared Sketch file as a starting point. It lacked defined styling and system rules, so as designers worked independently, consistency began to drift.<\/p>\n\n\n\n

This led to frequent review sessions and rework to realign designs, slowing overall progress.<\/p>\n\n\n\n

During slower periods, I started building a design system in Sketch to bring more structure and consistency to our work. Over time, it evolved into a structured design system covering reusable components, interaction patterns, and visual standards across the platform.<\/p>\n\n\n\n

I also met regularly with a developer to share progress and provide visibility into the system. While the Sketch system became fairly robust, it was not fully aligned with development due to time constraints and the effort required to map it to their existing variables.<\/p>\n<\/div>

\"\"<\/figure><\/div>\n\n\n\n
\"\"<\/a><\/figure>
\n

My Contribution<\/h4>\n\n\n\n

As Lead UX\/UI Designer, I defined and built a comprehensive design system that addressed both visual consistency and interaction behavior across the platform.<\/p>\n\n\n\n

I also collaborated with two additional designers, providing guidance and structure for their contributions to ensure all components aligned with the system\u2019s standards and patterns. This allowed the system to scale more efficiently while maintaining consistency.<\/p>\n<\/div><\/div>\n\n\n\n

\n
Data Tables & Editing States<\/h5>\n\n\n\n

Established a consistent structure for dense financial data tables, including typography, spacing, and hierarchy.<\/p>\n\n\n\n

Defined clear interaction states for editing workflows:<\/p>\n\n\n\n