Project summary
The organization faced a fragmented product experience: a newly designed client portal contrasted with dated internal systems, creating inconsistency across platforms. To address this, a unified design system was introduced to consolidate the look and feel, and I led the effort to establish cohesion across all products.
Context
This was done for a financial institution that had been around for 30 years at the time. They generally dealt with things on paper and were moving over to digital applications.
Outcome
Typography
The existing system lacked text variables, which led to inconsistent font sizes and colors across pages—only the H1s were applied consistently. I began by establishing a clear and scalable typographic hierarchy to create consistency throughout the product.
Colours
The existing brand colors were retained, but adjusted slightly to improve accessibility. An additional, darker colour was introduced ensuring primary buttons stood out more while maintaining the brand identity.
WCAG
A key goal was ensuring all new components met at least WCAG 2.1 Level AA accessibility standards. Although we had no internal users requiring this at the time, it ensured the product was prepared for anyone who might need it in the future.
Interim screens
While waiting for the full overhaul to become a business priority, incremental updates were made to improve usability in both existing and newly introduced features. Elements requiring clearer hierarchy, such as nested tabs, were refined to make the UX more intuitive.
Components
Components were aligned with the client portal for consistency, with adjustments or additions where needed to accommodate the more complex workflows in the advisors’ system compared to the clients’ view-only experience.