Revisions to FINRA-Required Customer Profile Confirmation

Improved experience’s IA and Content and brought it up to the standards in the editorial and design style guides


Summary of Project & My Role

FINRA regulations require financial services firms to confirm that a customer’s profile information is correct every 3 years. Fidelity would automatically send customers an email linked to their account summary page with this modal layer open over top.

An agile scrum team typically worked on backend code fixes, so they didn’t have a dedicated UX or Content Designer, and form pages weren’t yet supported by the design system, so they were coded manually.

The developer created this page in the QA environment and asked me to proofread it before it went live that night with the midnight release.

I noticed some design and content issues and quickly created a revised wireframe, sample code, and copydeck to update the page before the deadline.

Skills

Information Architecture, UX Writing, UX Design, UI Design, Wireframing, Attention to Detail Under Tight Time Constraints

Tools

Design & Editorial Style Guides, Sketch

Issues in the “before” version

There were a sizable number of issues with the content and design. Rather than inundate the developer with a list, I created a high-fidelity wireframe in Sketch (which we used at the time before switching to Figma), an example of a correct modal that he could copy code from, and all copy in a standard copy deck so that he could save time by cutting and pasting instead of hunting for each change. It took me about an hour to get the revisions to the developer, and it took him about an hour to fix everything.

Design issues

  • Not using correct Fidelity font (using old font stack with Helvetica & Garamond), and font sizes wrong

  • Padding and margins are too small throughout

  • Standards required the use of a “Close” button for modals in addition to the “X”

  • Not using the latest footer with all links, and the footer doesn’t extend to the full width of the page

Content issues

  • No H2s to separate logical chunks of information

  • Personal and Account information was mixed in an illogical way - moved “Employment” under “About you” and “Account address information” under “About your accounts”

  • Editorial style guide dictated saying, “Legal/residential address,” not simply “Legal address”

  • The H2, “Trusted contacts” is followed by account addresses, which doesn’t make sense—created separate H2s and sections for “Account addresses” and “Trusted contacts”

  • Customers often got confused if their account addresses were different than their personal address, so moved helpful information out of “help” layer to be contextual on the page

  • Customers were often confused by what is meant by “Trusted contacts,” so moved information out of “help” layer to be contextual on the page

  • It’s possible to have more than one financial profile, so made the header plural, “Financial profiles”

  • Customers were often confused if they saw multiple financial profiles, so wrote contextual help to explain

Before

After

Previous
Previous

UX, content, and UI design for "Why Fidelity" on Fidelity.com

Next
Next

0-1 marketing, product development, & physical & digital design for Kooliban peanut butter