Fiserv

Role

IA, UX/UI Design, Design QA

Credits

Christer Papanicolau, Tatiana Gushchenko, Beuno David, Carlos Montoya, Pontus Persson

Skills

Design System Component Library Design Principles Component audit

Timeline

May 2021- Dec 2021

Intro

Fiserv, a global financial technology company, partnered with Class35 to initiate digital transformation, addressing their competitive lag. Our team was tasked with creating a design system for their Merchant portal due to internal capacity constraints.

Problem

Inconsistent, undocumented components leading to design and development debt
Product owners prioritizing speed over design quality
Developer-driven component creation, often misaligned with design needs
Lack of component governance, resulting in discrepancies between design and development
Isolated component design, limiting versatility
Poorly defined project requirements, necessitating extensive clarification efforts

Fiserv client portal interface on desktop and mobile view

Process

Initial approach: Familiarize with task and team, document issues.
Revised approach: Understand Merchant Portal holistically before finalizing components.

Key actions

Mapped IA for comprehensive understanding.
Listed menu items to accommodate all merchant variations.
Mapped key flows to determine page hierarchy.
Analyzed table information to improve layout and categorization.

Process outcomes

Better scope understanding.
Identification of necessary components.
Resolution of UX labelling issues.
Redesigned information display for clarity and consistency.

Explanation of the process that was followed to map the information on the separate table types

Recorded explanation of how the Panel sliding component was designed

We audited each an every component created during the revamp of the Merchant Portal. To identify duplicates, variations of the same component, solidify the naming conventions and keep an inventory for the dev team to create their backlog. This helped our in house team of developers to structure the storybook.

Outcomes and Lessons

Outcomes

We delivered the first iteration of the design system that consisted of:

Component Library in Sketch documented with use cases, states, etc.
A storybook version of the component library.
Backlog of listed components that included statuses, links to storybook and sketch file.
Updated designs in sketch.

Lessons

While cultural challenges took longer to address, implementing the design system saved time and brought much-needed consistency to the team’s output.

Switching to a more collaborative design approach was essential for enhancing Design and Development collaboration. We recommended adopting Figma, the industry standard, and provided guidance on how to seamlessly integrate it into their process to maximize efficiency and teamwork. Although the transition wasn’t initially possible due to their existing methods, Fiserv eventually adopted Figma, leading to improved cross-functional collaboration and streamlined design execution.