FINRA UI
Design system & Accessibility
Design System
Our design system supports an enterprise suite of applications including products for government and brokerages with over 620k firm users. Our team drove the initiative of migrating the existing design system from Adobe XD to Figma. The migration wasn’t simply about a software upgrade, it was centered around maturing our design practice. We modernized our builds in Figma using the latest technologies, re-built for flexibility and scalability as well as improved accessibility support through theming.
Strategy: Build Trust
The design system needed to be migrated to Figma to reduce our licensing costs for the Adobe Suite providing savings to the business, but we took the opportunity to make significant improvements. We focused on innovating our process which drove even more efficiencies as well as improved collaboration, creation and delivery of product designs. We didn’t just rebuild or copy and paste files, we re-imagined the design system from the atomic level up.
Thought Leadership & Engagement
We included thought leadership into the early phases of the project by facilitating engaging branding workshops that involved the client directly in the creative process. These workshops not only enhanced our client's confidence but also enabled us to leverage their valuable insights, ultimately resulting in a brand strategy that was not only impactful but also firmly aligned with their vision and objectives.
Research & Ideation
Our strategy included conducting comparative and competitive analysis which informed our design process and helped us identify best practices, design trends and user expectations. We balanced these learnings against the client's desire to create a timeless brand knowing they wouldn’t be able to update it frequently.
Competitive Analysis
We presented moodboards to the client to gather feedback and validate whether our direction aligned with the client's vision. The moodboards were well received and helped propel the next round of explorations. We facilitated a workshop around stock photography and illustration to define photography standards in alignment with the brand vision.
Moodboards
Simultaneously we were tasked with overhauling the user experience for login. The previous experience was confusing, full of text and visual noise and complexity. We worked from a UX flow and took a modern approach starting with medium fidelity mockup highlighting the improvements to the experience. We took feedback from stakeholders and tech partners to adapt our experience based on feedback, technical constraints and a phased approach. We were agile in our approach, we move fast and are always ready to pivot.
Quick & Agile UX Work
Combining all of the pieces of the visual design into login mockup screens helped display how the brand pieces would work together. Client communication throughout the process was frequent and interactive which led to a design review process where the first draft was approved immediately. It was much easier to meet the client expectation with such close collaboration.
Branding and Visual Design
Design System & Theming
We worked closely with our developers to set up an architecture to support the theming of our design system. This would allow us to share components, features and enhancements across both brands maximizing our efficiency. We didn’t just focus on color, we examined spacing, layouts, elevation and style to ensure maximum flexibility for the future. We went though the process of checking each of the colors in the established palette to ensure they met 508 compliance.
This foundational work ensured we didn’t need to re-build or manage a separate design system for the client but share a tech and design stack that could support both. Our engineers were close partners in deciding our approach and which areas to focus on in our theming work. A benefit of this theme work was the ability to support additional themes which could be used for further brand work in the future, legacy systems intending to onboard and for accessibility efforts.
