![Screen from a fictional website on a pink gradient background](https://framerusercontent.com/images/AxH3w4fJ60Gb9PqnqubD8kJF9w.png?lossless=1)
Architect Design System
DESIGN SYSTEM
FISERV
Overview
In my role as Product Designer at Fiserv, 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
![](https://framerusercontent.com/images/xZgeGsNADBl2I1eJDtu157UayA.png)
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.
Inputs
![](https://framerusercontent.com/images/z8BsRw7Tvv2cl7Mt374OMMD6bWY.png)
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
![](https://framerusercontent.com/images/qMDS4uKSB7Ky1a4SdLBFYxu0CQ.png)
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
![](https://framerusercontent.com/images/4CBCjrdZ4ybFWqtpP8qakFe6Vs.png?scale-down-to=4096)
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
![](https://framerusercontent.com/images/v5QqNNwqXKEjWoTpQYcfJ3NtSb8.png?scale-down-to=4096)
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.
![](https://framerusercontent.com/images/qMDS4uKSB7Ky1a4SdLBFYxu0CQ.png)
![](https://framerusercontent.com/images/z8BsRw7Tvv2cl7Mt374OMMD6bWY.png)
![](https://framerusercontent.com/images/CGEwM1LZvWnG10BMBS5O8oa8BE.png)
![Screen from a fictional website on a pink gradient background](https://framerusercontent.com/images/AxH3w4fJ60Gb9PqnqubD8kJF9w.png?lossless=1)
Architect Design System
DESIGN SYSTEM
FISERV
Overview
In my role as Product Designer at Fiserv, 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
![](https://framerusercontent.com/images/xZgeGsNADBl2I1eJDtu157UayA.png)
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.
Inputs
![](https://framerusercontent.com/images/z8BsRw7Tvv2cl7Mt374OMMD6bWY.png)
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
![](https://framerusercontent.com/images/qMDS4uKSB7Ky1a4SdLBFYxu0CQ.png)
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
![](https://framerusercontent.com/images/4CBCjrdZ4ybFWqtpP8qakFe6Vs.png?scale-down-to=4096)
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
![](https://framerusercontent.com/images/v5QqNNwqXKEjWoTpQYcfJ3NtSb8.png?scale-down-to=4096)
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.
![](https://framerusercontent.com/images/qMDS4uKSB7Ky1a4SdLBFYxu0CQ.png)
![](https://framerusercontent.com/images/z8BsRw7Tvv2cl7Mt374OMMD6bWY.png)
![](https://framerusercontent.com/images/CGEwM1LZvWnG10BMBS5O8oa8BE.png)
![Screen from a fictional website on a pink gradient background](https://framerusercontent.com/images/AxH3w4fJ60Gb9PqnqubD8kJF9w.png?lossless=1)
Architect Design System
DESIGN SYSTEM
FISERV
Overview
In my role as Product Designer at Fiserv, 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
![](https://framerusercontent.com/images/xZgeGsNADBl2I1eJDtu157UayA.png)
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.
Inputs
![](https://framerusercontent.com/images/z8BsRw7Tvv2cl7Mt374OMMD6bWY.png)
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
![](https://framerusercontent.com/images/qMDS4uKSB7Ky1a4SdLBFYxu0CQ.png)
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
![](https://framerusercontent.com/images/4CBCjrdZ4ybFWqtpP8qakFe6Vs.png?scale-down-to=4096)
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
![](https://framerusercontent.com/images/v5QqNNwqXKEjWoTpQYcfJ3NtSb8.png?scale-down-to=4096)
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.
![](https://framerusercontent.com/images/qMDS4uKSB7Ky1a4SdLBFYxu0CQ.png)
![](https://framerusercontent.com/images/z8BsRw7Tvv2cl7Mt374OMMD6bWY.png)
![](https://framerusercontent.com/images/CGEwM1LZvWnG10BMBS5O8oa8BE.png)