Compliancy made easier

Document reviews to submit an application is the highest point of drop-off for all onboarding flows. Forcing those documents to be provided in another language is confusing and disruptive for engineers, product, designers and the end user.
Role
Lead Product designer & content designer
company
RBC Royal Bank of Canada
duration
4 months
setting
Bank-wide designers + product and legal

About bill implementation

Problem

Create a component that can be applied to all onboarding scenarios across the bank, that ensured English banking clients are provided with both French and English legal documents (CoA) that they must agree to, to complete an application. This can cause a loss of revenue for the bank due to dropoff in applications. But the bank can also face significant financial penalties if they are not compliant.

Defining the Product

1
Ensure all English users in Quebec are provided both French and English options for Contracts of Adhesion (CoA)
2
CoA are documents that require users to agree to the terms as part of the application process. These documents were outlined by the legal teams.
3
French and English options have to be equally weighted in the UI and with interaction.
4
Every CoA needs to be provided in French and English, even if it not part of the final screen of the application,

Design progression

Early stages

Different journeys across the bank put forward designers to lead for their respective journey but also represent requirements and use cases for their respective journey

Revise design process

The design team being up to 40+ people, leadership made the executive decision to put responsibility on me for Consumer banking, the largest journey in the bank and mobile, which would influence all journeys.

Consumer Banking (retail)

Led by me, I worked with two designers to solve for an intuitive design integration, which we shared with mobile and shared to other journeys after final approval including business banking.

Presentation

Led all decisions which was supported by Product. On-going meetings and emails with legal and executive leadership, I  addressed all legal/use case requirements and how it was accounted for in the design

Advocate

Advocated for the user experience and impact to the business. Addressing all legal and use case requirements I was able to demonstrate compliancy and a delightful exoerience with every interaction and design choice.

Share out

Created final screens with agreed upon content, including final information architecture for all other legal content and agreements. Using annotated flow from BAU to Bill101/96 flow to communicate to engineering all details for development. Also presented to other design teams across bank to understand how to implement.

Design considerations

Create reusable component

A design solution that can be applied to all onboarding experiences across the bank and can work with other legal requirements.

Accessibility language concerns

Screen reader users having a screen go from one language, the expected language (EN) to another unexpected language

Limit potential dropoff

Users find legal text overwhelming, having to accept legal terms for something they have already set when they joined the bank can be assumed annoying.

Reduce user confusion

Not all users are aware of the various bills and regulations. Users seeing legal text in a language they did not understand could have caused confusion, hesitation or lack of confidence in agreeing to terms.

Banking error

Language preference for the user is determined on entry to the bank. Clients are rarely seeing multiple onboarding flows to know this experience is standard. Why are they being asked to agree to getting documents in the a language they already selected as their preferred?

Final iteration

Owned the decision making for all aspects of this Bill based on the user having clarity and it remaining a fluid experience. In keeping within the constraints set out by legal all decisions were advocated to legal by identifying user behaviour and patterns that was seen in previous research exercises.

Reusable component

For the final iteration, prioritized the component to be seamlessly added to any onboarding document review screen.

Not national experience

Minimized interruption for the user by only limiting the Bill101/96 component for Quebec residents. For users that do not have to add their residential address, their default experience included the Bill 101/96 component.

French and non-Quebec residents

Users whose preferred language is French or English users that do not have a Quebec residential address, will see BAU screens. These users will not see the Bill101/96  component and be provided with the documents in both languages.

Include interactions to provide clarity

For French legal content on the English screen, an expand/collapse functionality (an action for user to make a choice on) is included so users can understand the French language on the screen is a direct translation of the English content on the screen.

Equally weighted

Legal did not see a simple toggle for FR and EN as an equally weighted experience. Link text in both FR and EN allows the user to switch between English documents and French documents

Contained with documents

This bill applies directly to the documents and not for the product the user is applying for in the application. By containing this Bill within the documents' section further allowed for its reusability to be implemented in various onboarding flows but it also helps provide further context and relevance for the user and what they are agreeing to.

Remove confusion

Not all documents in the document review screen are considered CoA. To simplify the experience for the user, for engineers and future state experiences, we applied the Bill101/96 experience to all documents. So a user with the Bill101/96 component will be able to view all documents in FR and EN even if it is not considered a CoA.

Bill 101/96 consent language

The consent language requires the user to acknowledge and request all documents to be provided in English. This makes sense with the English documents but when the user switches to the French documents, it can be very confusing, so consent language is not included. Technical limitations prevented us from adding steps to change their preferred language to French.

Impact & Strategic Outcomes

Since implementation the Bill101/96 has been implemented in numerous onboarding flows across the bank. As seen here, the component is added without any disruption to the rest of the document review screen.
Successfully established a bank-wide regulatory design standard for Bill 101/96. By designing a flexible, reusable component rather than a one-off screen, I enabled multiple product teams across the organization to achieve compliance with zero design debt.
Streamlined the implementation process for subsequent product launches, allowing engineering teams to integrate the component into various onboarding journeys without requiring custom UI work.
Despite adding significant legal requirements and French/English document toggles—traditionally high-friction points—data post-implementation showed no impact on drop-off rates.
The solution ensured 100% compliance with Bill 101/96, protecting the bank from significant financial penalties while maintaining a "delightful" and fluid user experience.
Successfully advocated for the use of expand/collapse interactions to manage cognitive load, preventing the English-speaking user from being overwhelmed by unexpected French legal text while still meeting the "equally weighted" legal requirement.
Ensured the multi-language component met WCAG 2.1 AA standards, specifically solving for screen reader behavior when transitioning between English and French content to prevent user disorientation.
Resume
LinkedIn
Terri Persad
Product Designer
COPYRIGHT 2021
ALL RIGHTS RESERVED