CASE STUDY
Fiserv Design System
Designed for marketing and sales sites across Fiserv
AEM & Figma Component Library
Fiserv has a vast ecosystem of marketing and sales websites. I designed a library of components that are shared and customized across sites to meet the needs of the user and the goals of the business.
200+
Components
250+
Sites using the components
$2.5M /yr
Saved by reducing reliance on developers
Awards
-
2022 Hermes Award: Best B2B website
-
2022 Hermes Award: Best Website Launches, FinTech Industry
-
2022 Hermes Award: Best Website Design, Payments Industry
-
2022 Stevie Award: Financial Services Website
-
2022 Stevie Award: Achievement in Website Design
ADA Compliance
WCAG AA
All components are designed to meet our standard of WCAG AA compliance to ensure proper accessibility.
Customization across brands & regions
Components are designed and built to allow for customization in every use case.
The library of components are leveraged by 250+ sites including various Fiserv brands, products, international sites, and branded partner sites including Walmart, Dunkin, Santander, and many more.
For instance, the hero component seen in these examples shows the optionality present in the components to meet different needs.
Increased design and development speed
The component library allowed for fast deployment of new sites and pages which is essential for large companies.
-
All AEM components had mirrored counterparts within figma, enabling designers to quickly mock up new pages and sites.
-
Components cut down the need for development. Once a component is built, it can be reused.
-
Developers coded new components faster with clear figma references.
Pages now live in days instead of weeks
Sites now stood up in weeks instead of months
Documentation
Documentation was created for all who interacted with the components.
-
A reference library with lists and info of components and capabilities.
-
Training portals on how to use them.
-
Figma documentation for designers and developers.
Responsive to both screen size and content
Each component is designed with responsiveness in mind. Components adjust based on screen size and adhere to the different interactions needed per device type. The components also adjust based on the amount or type of content within.
Components in components
Components are designed to interact with and are able to be placed within other components, creating new combinations to meet site needs.
Figma Auto-Layout
Components in the figma design system are created using auto-layout, max and min widths, and other responsive figma tools. This allows designers to designate responsive behaviors that developers can more easily interpret.
Content authoring and optionality
When designing components, I am not only designing the UX of the components themselves, but also considering the UX of the content authors and designers who are leveraging these components within AEM.
Text Versatility
Components are designed to allow text to be modified using rich text.
AEM is a powerful tool that allows for all sorts of customization. Each component, is designed to have versatility allowing for variations and customization to meet the needs of any given site.
Content authors and designers can go into AEM, add a component to a page, and change component settings. I designed the experience to be intuitive and easy to understand based on user feedback.
Designing deep customization into the components was essential to allowing Fiserv to move fast and reduce developer reliance.
Component variety to meet each site’s needs
With 200+ components and countless variations and options in each component, I met the varying needs of the variety of brands and sites I supported.
Over time, new needs arose, which meant new components and updates were needed. When designing a new component, I not only looked at one site’s use case, but how all sites leveraging the library could benefit and adjusting accordingly.
Campaign
Funnels
Forms
Re-targeting
Connect to Sales
e-Commerce
Documentation
Blog
+ More
Optimizing components with data & feedback
Close attention was given to analytics and testing in order to make data and feedback driven design decisions. Improvements were iterative and aided the experience of the user while optimizing for the goals of the business.
Heatmap tracking
Using HotJar heatmaps, components were tested which helped inform improvements such as CTA placement, component page position, visual interest, interactions, and more.
Targeted content
Utilizing Adobe Target, components and pages changed based on what info we knew about the user visiting the site. For instance, when visitors came from one of our targeted display ads for QSR businesses, case study components were swapped out with ones that fit their business type.
Navigation
Interviewed clients to understand what info they were looking for on a site. This info helped me design navigations to get them where they want to go.
A/B Testing Components
When creating new components, A/B testing was performed to validate hypotheses. For instance, I found that when there are a lot of form fields, implementing a step based approach and grouping similar fields increased form completion rates.