Reducing workload for development and legal teams and minimizing risk by incorporating the Footer into the Design System
TEAMS
Product Manager
Engineering Manager
Legal and Compliance
Marketing and Public Sites
Socialization and Insights
Design System
MY ROLE
Exploratory Research
Product Management
Stakeholder Management
Design Strategy
PROJECT
2 Month Timeline
1 Component
Background
Developers were building footers from scratch for every project resulting in over 30 unique footers in production.
The footer includes important legal disclosures, and because the requirements often change, each footer needed to be updated individually. The legal team then had to approve every updated footer.
Design Proposal
The design team proposed to create a footer component in the design system so changes would automatically update across all digital products.
Benefits:
Reduce build times by using tokens rather than building from scratch.
Creates design consistency across all digital products.
Reduce legal approval times by reviewing 1 component rather than dozens of footers.
Different lines of business can have their own style variants within the same component.
Quickly adapt to changing legal requirements thereby minimizing risk.
Promotes the new design system and its adoption across the organization.
Getting Approval For The Project
Making a change of this magnitude would affect the entire department so it was critical to get buy-in from all team leaders.
Teams Involved:
Product Managers
Single Page App Development Team
Public Sites
Marketing
Socialization and Insights
Legal and Compliance
Design Systems
Design
Research and Strategy
We spoke with colleagues to understand their particular needs which we used to outline the requirements for the new footer. The content of the footer was divided into two categories: legal disclosures and product/marketing.
Legal Requirements:
Product and Marketing:
Footers on unauthenticated and authenticated pages can be the same.
Apple Store and Google Play badges direct to the apps post authentication.
A “Digital Banking Resource” link will be added to the footers.
Use a public footer for the login page since we don’t have pre-authentication data.
Personal and Business banking will need unique UI styles and links.
Link URLs need to be updated to be accurate.
Execution and Governance
The Design System team and Development teams would work together to implement and manage the footer component.
Changes to the design of the component will go through the Design System Team.
The Design System team will configure the new footer for all platforms.
A style layer will be created for the different lines of business.
Will be able to toggle off and on components to adjust to changing legal requirements.
The component will be pulled from Storybook and supported by the Design System team.
Changes to the content of the component will go through Dev teams.
We need to take inventory of vendors handling the footer and consider end of life.
Ideation
Working with our Design Systems Manager, we created the component with the features discovered during the intake process.
Component Properties:
Base Component:
Component with style layer:
Wrap Up
After weeks of meetings, notes, and discussions involving 8 teams, the unified footer was adopted to the design system. The project had very little design involved but it is some of the most impactful work I’ve done in my career. I also had an opportunity to take on more of a Product Manager role which was a great learning experience!
Big Wins:
Our work was recognized by leadership for enhancing a significant risk area.
Development and legal teams were very happy with the new workflow which reduced their work time by 90%