Design System for FSRA
Building a modern Design System for the Financial Services Regulatory Authority of Ontario.
5-10 minute read
Client: FSRA
Year: 2022
Role: UX/UI Designer
Tools: Figma, Miro, Invision
Custom Drupal Theme
Custom Drupal Theme
The Financial Services Regulatory Authority of Ontario (FSRA) is a Crown agency which acts as the financial regulator for the province of Ontario, Canada and operates at arms-length from the Government of Ontario, and reports to the Legislative Assembly of Ontario through the Minister of Finance.
View WebsiteOur team conducted over 10 interview sessions with key groups, including communications, administration, enforcement, and consumer outreach, along with reps from all nine regulatory sectors. The insights gained helped us develop a series of 12 unique user personas and a draft architecture conveying structure (navigation), requirements, content (taxonomy terms), and functionality to support their user’s key tasks.
We then held multiple design workshops with the communications team and members from each sector to validate our assumptions, made refinements based on their feedback, and then tested with internal and external users.
The new structure and navigation ensures flexibility, scalability and ease of maintenance, and the visual design solution prioritizes readability and accessibility through clear content hierarchy, information flow, typography, AODA compliant colour contrasting.
I met with stakeholders, in this case the project managers and designers, to identify which patterns would lend themselves well to being re-used across other web products. We also discussed common patterns that might be missing. These original patterns would form the basis for our pattern library.
It took about about three months to build and iterate on it, and eventually to code the individual components. The specifications for the library live under FSRA UX Team.
These are the smallest and most basic building blocks. Our foundations include typography, colour, spacing, and borders. Elements include buttons, links, headings, inputs, etc.
The full FSRA digital colour palette (based on our visual identity for web, print, and social media) is made up of Primary, Secondary, and Neutral colour palettes.
FSRA’s vibrant primary palette colour represents strength and diversity.
These four complementary colours can be used in conjunction with FSRA’s primary palette. The neutral palette consists of tints of the secondary palette colours. It can be used for subtle backgrounds behind typography or graphics, or simply to complement the other colour palettes for additional variety. This palette can also be effective for communications that need a quieter, more reflective, or thoughtful voice.
There is a single web font used on the public website, 'Palanquin' Desktop and Mobile styles are documented below.
A soft 8px was used as a reference for vertical padding and margins on web and mobile products. Adjusting the number of columns depending on the viewport. In this case, mobile (iphone & ipad) @ 4 and 8 columns respectively. And web desktop @ 12 columns.
The components are created by combining basic elements – they can take on many forms like drop downs and tags.
I took the approved SVG illustrations and animated through GSAP for custom digital campaigns. An industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.
Just a couple of examples of how the patterns have been used to design FSRA web products. I was lead front-end developer and UI designer in the below examples:
Below are some success metrics on the above sample campaigns (Working with a Financial Planner):
Total visits
97,528
Unique visits
89,935
Conversion rate
11%
This common set of patterns has kept our products consistent with the FSRA brand. Our UX team learned a lot about communication and collaboration while working on our pattern library.
A living library. A design system needs constant development, maintenance and improvement. The biggest challenge has been to maintain one 'source of truth', and to keep the design library and coded components in sync. As we continuously use and expand it, we are making mistakes and learning as we go.
Designing for reusability. I learned the importance of coming up with a common language and documenting component specifications when working with a team of designers and developers. While it required a lot of work up front, having a set of patterns means we now have a smooth design, approval, build and launch process.
Here are a few of my most recent projects.
