ANTHONY M. ZUBIA

Product Design

Graphic Design

Illustrations

About

Fiserv

Architect Design System for Broadway National Bank

Overview

In my role as Product Designer, I not only designed an award-winning new online banking experience for Broadway National Bank, but I created a design system for the application as well. Below is the process of developing a comprehensive design system that encompasses various elements such as actions, inputs, icons, color, and typography.

Design systems play a crucial role in ensuring a cohesive and user-friendly experience throughout an application or website. By documenting the journey of creating this design system, I hope to showcase not only my expertise in UX design but also my passion for solving complex problems and creating delightful user experiences.

Actions

Actions play a vital role in guiding users and facilitating their interactions with the interface. To ensure a seamless online banking experience, I developed a robust action library within the design system. By carefully designing and categorizing various actions such as buttons, links, and navigational elements, I aimed to provide a unified and intuitive experience across the entire Broadway Bank product.

Inputs

Inputs are essential for gathering user data and enabling interaction. With a clear understanding of user needs, I designed a range of input components that catered to different contexts, from simple forms to more complex data inputs. By implementing consistent styling, validation, and feedback mechanisms, I aimed to enhance the overall usability and accessibility of the online banking experience.

Icons

Icons serve as visual cues and enhance user comprehension. In this case study, I embarked on a journey of designing a cohesive icon set that not only conveyed their functionality but also reflected the brand identity. My approach involved conducting icon research, creating a consistent visual language, and rigorously testing the icons for clarity and recognition across different platforms and screen sizes.

Colors

Colors evoke emotions and create a visual hierarchy within interfaces. For this application, I carefully crafted a color palette that aligned with the Broadway Bank brand identity, while also considering accessibility guidelines. By using contrasting colors strategically and implementing color variations for different states, I aimed to ensure an aesthetically pleasing and inclusive experience for all users.

Typography

Typography plays a pivotal role in delivering a brand's message and establishing visual hierarchy. For this application, I explored various typographic choices, considering factors such as legibility, readability, and brand personality. By defining a typography system that harmonized with other design elements, I aimed to create a cohesive visual language that enhanced the overall readability and user experience.