Welcome to the Broadridge Ceros design toolkit

Canvas settings: Desktop (wide screens) 1920 x (height can vary) Tablet (medium screens) 1366 x (height can vary) Mobile (thin screens) 750 x (height can vary)

Obtain design and copy approval from the brand team and the marketer who entered the Percolate request.

High-level Steps for Designers

One

Table of Contents

1. Introduction 2. Template* (for structure) 3. CTA buttons 4. Interactive content 5. Animation examples 6. Accessibility 7. UI elements 8. Working examples

This site was built to assist in the development and design of Ceros webpages that will be embedded into Broadridge.com. Throughout you will find templates, design elements and best practices for creating a Ceros landing page.

Two to three weeks with the in-house design team

Turnaround Time

*2. Template − This section is a working Ceros project built at the Desktop size. It is an example of the correct way to format the folder structure.

Begin the Ceros project by designing a wireframe in Adobe XD or similar software.

Download Adobe XD Template

Build design in Ceros starting with Desktop.

Create Tablet layout and center the content on the page.

Watch video

Share Desktop and Tablet with the brand team and the marketer who entered the Percolate request.

Once the Desktop and Tablet layouts are approved, build Mobile layout.

Get final approval on full Ceros experience (Desktop and Mobile) from the marketer who entered the Percolate request.

Generate and send embed code to the digital team.

The average Ceros Experiences takes about four weeks to complete.

•

One week with the digital team

•

SOLUTIONS & PRODUCTS INSIGHTS ABOUT US CLIENT SUPPORT | TALK TO US

BR (NYSE) 117.6 -0.24

SOLUTIONS & PRODUCTS INSIGHTS ABOUT US CLIENT SUPPORT | TALK TO US

BR (NYSE) 117.6 -0.24

Main call to action

This is a subhead to go under the headline. Ideally it should be around 25 words and two/three lines of copy. The copy here should be concise, provocative and should pay off the headline concept.

Benefit-Driven headline goes here and try not to exceed two lines

Clear Description Eyebrow

Section one headline goes here

Placeholder for visual

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud* exercitation ullamco laboris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section two headline goes here

This is the style for a text link sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione

Closing headline goes here

* Footnote style lorem ipsum dolor sit amet.

CTA button

Icon #6

Additional copy add here

Icon #2

Additional copy add here

Icon #5

Additional copy add here

Icon #4

Additional copy add here

Icon #3

Additional copy add here

Icon #1

CTA button

Tab One

Tab Two

Tab Three

Placeholder for tab one content

TAB ONE

Tab Two

Tab Three

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et.

Section three headline goes here

Placeholder for tab TWO content

Placeholder for tab THREE content

Call to action buttons and text links

THREE

Standard Styles - Primary CTAs

1. Introduction 2. Template (for structure) 3. CTA buttons 4. Interactive content 5. Animation examples 6. Accessibility 7. UI elements 8. Working examples

Table of Contents

Call to action button

Standard styles for CTA buttons and text links provide clear direction for webpage visitors and help communicate what action you want them to take. For consistency, please copy and paste these buttons/links into your projects. The color of the buttons and text links should stay consistant within each individual project. All link copy should be sentence case (ex. Learn more, Download full report, Talk with a specialist, etc.).

Call to action button

Knockout Styles - Primary CTAs

Call to action button

Knockout Styles - Secondary CTAs

Call to action button

Standard Styles - Secondary CTAs

Call to action button

Call to action text link

Text links

Call to action text link

This is the style for contextual links sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Contextual Link

This is the style for contextual links sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Call to action button

Interactive content

Four

Different designs have been developed to help navigate a visitor through content, to encourage engagement and to provide visual interest. Scroll down for examples, inspiration and a library of interactive elements.

1. Introduction 2. Template (for structure) 3. CTA buttons 4. Interactive content 5. Animation examples 6. Accessibility 7. UI elements 8. Working examples

Table of Contents

“I’m not using my credit card unless it is an emergency.”

4. Credit Cards

“Use their websites or (in the case of doctors) patient portals more.”

3. Health Insurance

“Request telehealth visit before in-office visit.”

2. Healthcare

“I have made deposits at my bank's ATM rather than with a teller.”

1. Banking

Intracompany

Bilateral

Intracompany

Bilateral

- Managing Director, Global Markets Technology, Investment Bank

The settlement process had been antiquated and stuck in its ways. That is before Distributed Ledger Repo. Now we’re even digital from a post-trade perspective.”

“

Lower risk and settlement costs Less potential for fails

Value Drivers

$2M to $4M

Typical Annual Savings

Bilateral

Seamlessly execute transactions between two network participants.

- Managing Director of Operations, Investment Bank

Cost-per-trade was always a large focus for us. Distributed Ledger Repo led to significant cost savings per-trade–without disrupting the front office.”

“

Single location of immobilized collateral Reduced financing costs Improved collateral management

Value Drivers

$2M to $3M

Typical Annual Savings

Intracompany

Seamlessly execute transactions between a firm's legal entities.

- Managing Director of Operations, Investment Bank

Cost-per-trade was always a large focus for us. Distributed Ledger Repo led to significant cost savings per-trade–without disrupting the front office.”

“

Single location of immobilized collateral Reduced financing costs Improved collateral management

Value Drivers

$2M to $3M

Typical Annual Savings

Intracompany

Seamlessly execute transactions between a firm's legal entities.

Right now, your peers are savings millions and providing better service

Do not have a defined marketing strategy

Have a defined marketing strategy

Average New Clients Onboarded in Past 12 Months

Do not have a defined marketing strategy

41%

Have a defined marketing strategy

75%

Somewhat or Very Confident in Meeting Growth Goals

Do not have a defined marketing strategy

70%

Have a defined marketing strategy

91%

Very or Somewhat Satisfied with Marketing ROI

Do not have a defined marketing strategy

Have a defined marketing strategy

24%

Very Satisfied with Marketing ROI

Complex Loss Calculations

Old Class Period

Numerous Eligible Securities (CUSIPS)

classes with separate calculations

settlement

Freshpet, Inc. Securities Litigation

loss limit tables

different

Signet Jewelers Limited Securities Litigation

corrective disclosures impact calculations

alleged

SCANA Securities Litigation

calculation

19-step

Namaste Technologies, Inc. Securities Litigation

Complex Loss Calculations

years

USD LIBOR EuroDollar Futures Settlements

years

Bondholder LIBOR Settlements

years

GSE Bonds Antitrust Litigation

Old Class Period

individual CUSIPs

70,000

GSE Bonds Antitrust Litigation

individual CUSIPs

40,000

Bondholder LIBOR Settlements

Numerous Eligible Securities (CUSIPS)

Why they like digital

Why they like paper

What they want in both

Which of the following represent the primary reasons you prefer to receive certain bills and statements digitally?

48% 41% 37% 35% 20% 14%

Convenience Speed Easier to track and manage Declutters my physical space In control of my experience More personalized

Emphasize key value points as you promote your digital experience.

Why they like digital

Which of the following represent the primary reasons you prefer to receive bills and statements in paper form?

50% 41% 30% 27% 23%

Want a paper record Paper reminds me to pay bills Easier to track and manage Comfortable with physical paper More likely to notice

Many customers receive at least some of their bills and statements in paper form. It’s important to design seamless print-to-digital experiences.

Why they like paper

When it comes to the print and/or digital communications you receive from the companies you do business with, which of the following are most important to you?

46% 43% 31% 27% 26%

Use plain language Summary of important items Transparency into data privacy Provide info on promotions Personalize the experience

86% of consumers want to manage their preferences for how, when, why and where companies communicate with them.

What they want in both

ESG Advisory and Reporting Services

Shareholder Engagement Services

Proxy and Shareholder Meeting Services

SEC Compliance Solutions

Transfer Agent Services

Capital Markets Transactional Services

Click to expand

Capital Markets Transactional Services

Learn more

• IPO/Equity and Debt Offerings • M&A • Workiva integration • Shareholder and investor communications • Digital and offset print solutions

Capital Markets Transactional Services

Transfer Agent Services

Learn more

• Stock Transfer/Account Maintenance • Dividend Processing • Cost Basis Compliance • Shareholder Services • Corporate Actions

Transfer Agent Services

SEC Compliance Solutions

Learn more

• Full service and software for SEC, EDGAR and XBRL • Workiva integration • Proxy and Annual Report design and typesetting

SEC Compliance Solutions

Proxy and Shareholder Meeting Services

Learn more

• Registered and Beneficial Proxy Services • Virtual Shareholder Meetings • Registration and attendance management • Inspector of Elections • Proxy voting and tabulation

Proxy and Shareholder Meeting Services

Shareholder Engagement Services

Learn more

• Retail engagement communication strategy • Shareholder data insights • Customized digital communications • Enhanced packaging

Shareholder Engagement Services

ESG Advisory and Reporting Services

Learn more

• Assessment and benchmarking • Policy development • Strategy implementation • Disclosure and stakeholder communications

ESG Advisory and Reporting Services

Coming soon

Animation examples

Five

Adding motion to graphic elements serves double duty—it can focus your reader’s attention on key takeaways and help tell your story more effectively. Scroll down to see examples, inspiration and a library of animation styles.

1. Introduction 2. Template (for structure) 3. CTA buttons 4. Interactive content 5. Animation examples 6. Accessibility 7. UI elements 8. Working examples

Table of Contents

43 %

Baby Boomers

62 %

Gen X

71 %

Millennials

56 %

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Faster

Lorem ipsum dolor s adipiscing elit 58% sed do eiusmod tempor

2020

2021

2022

2023

20%

Leaders project increasing next-gen technology spend for AI and blockchain by nearly 20% by 2023.

19% Had a virtual meeting

21% Downloaded their provider’s mobile app

23% Deposited a check via a mobile app

24% Accessed a bill or statement online

36% Made an online payment

35%

Always

12%

Never

Now that you are in the middle of COVID-19, how often would you choose to “go paperless?”

NOW

26%

Always

13%

Never

Before the impact of COVID-19, how often did you choose to “go paperless” with your providers?

Before COVID-19

40% 35% 30% 25% 20% 15% 10% 5% 0%

Survey dates

4/6 - 4/8

4/19 - 4/21

5/3 - 5/5

5/17 - 5/19

5/29 - 6/1

6/14 - 6/16

6/28 - 6/30

HOW Companies CHOOSE

How I choose

I expect that COVID-19 will fundamentally change how I choose to communicate and engage with the companies I do business with in the future.

I expect that COVID-19 will fundamentally change how companies choose to communicate and engage with me in the future.

Selecting the appropriate technology to leverage

86%

Finding the time for marketing efforts

86%

Developing a digital marketing strategy

91%

Financial advisors are challenged by digital strategy, finding time for marketing efforts and selecting appropriate technologies

Extent of Challenge Posed by Marketing Activities

Do not have a defined marketing strategy

Have a defined marketing strategy

24%

Very Satisfied with Marketing ROI

Do not have a defined marketing strategy

Have a defined marketing strategy

Average New Clients Onboarded in Past 12 Months

Accessibility

Six

Review and follow Ceros Accessibility Best Practices.

TIPS AND BEST PRACTICES

1. Introduction 2. Template (for structure) 3. CTA buttons 4. Interactive content 5. Animation examples 6. Accessibility 7. UI elements 8. Working examples

Table of Contents

Complete the Aria-Label for all hotspots.

Name all hotspots following the digital team’s Ceros Event Label guidelines.

Use groups to define sections and follow the hierarchy outlined in section two.

Tag your HTML sections.

Make sure to revise the hotspot label if it is updated. See examples below:

Before: Button - Download full report After: Button - View the Next-Gen Technology Adoption Report (label changed 7/6/21)

Before: Button - Download full report After: Button - Complete the benchmarking tool (label and link changed 5/8/21)

UI elements

Seven

UI design elements are a useful way to provide visual and directional consistency for your audience. Adhere to these elements when designing your page. The color of these elements can be adjusted to fit your design using the Broadridge brand colors.

1. Introduction 2. Template (for structure) 3. CTA buttons 4. Interactive content 5. Animation examples 6. Accessibility 7. UI elements 8. Working examples

Table of Contents

Back and forward arrows - Set 1

Back and forward arrows - Set 2

Click to expand

Checkmark

Horizontal rule

Download icon library

Download texture backgrounds

Download navigator graphics

Download pattern library

Working Ceros examples

eight

Since launching Ceros in the summer of 2020 the team has designed on a number of Broadridge Ceros projects and worked with the digital team to embed the pages into BR.com. Here are just some of our favorites that also demonstrate our brand evolution on the platform. Use as inspiration only.

1. Introduction 2. Template (for structure) 3. CTA buttons 4. Interactive content 5. Animation examples 6. Accessibility 7. UI elements 8. Working examples

Table of Contents

Predictive Analytics

Class Action Annual Report

BRCC CX Survey 2021

Next-Gen Technology Adoption Survey 2021

Distributed Ledger Repo

Financial Advisor Marketing Study