Zelle®

User Experience Guidelines for Financial Institutions

Each year, Zelle® publishes extensive UX guidelines documentation for financial institutions to adhere and certify to before deploying Zelle features & functionality into their mobile banking applications.

As lead designer, I worked closely with an experience strategist, a design associate for a certain period, and client partners to transform a complex PDF guidelines document into a robust and interactive portal to empower banks across America to deliver consistent, elegant, on brand payments experiences.

Role

Experience Design Lead

Duration

6 months

Outcomes

Live Web Portal & CMS

End-to-End Prototype

Responsive Designs

3 Design Libraries

500+ Screen Asset Library

Scalable Sitemap & IA Framework

Content Development Templates

Zelle®

User Experience Guidelines for Financial Institutions

Each year, Zelle® publishes extensive UX guidelines documentation for financial institutions to adhere and certify to before deploying Zelle features & functionality into their mobile banking applications.

As lead designer, I worked closely with an experience strategist, a design associate for a certain period, and client partners to transform a complex PDF guidelines document into a robust and interactive portal to empower banks across America to deliver consistent, elegant, on brand payments experiences.

Role

Experience Design Lead

Duration

6 months

Outcomes

Live Web Portal & CMS

End-to-End Prototype

Responsive Designs

3 Design Libraries

500+ Screen Asset Library

Scalable Sitemap & IA Framework

Content Development Templates

Zelle®

User Experience Guidelines for Financial Institutions

Each year, Zelle® publishes extensive UX guidelines documentation for financial institutions to adhere and certify to before deploying Zelle features & functionality into their mobile banking applications.

As lead designer, I worked closely with an experience strategist, a design associate for a certain period, and client partners to transform a complex PDF guidelines document into a robust and interactive portal to empower banks across America to deliver consistent, elegant, on brand payments experiences.

Role

Experience Design Lead

Duration

6 months

Outcomes

Live Web Portal & CMS

End-to-End Prototype

Responsive Designs

3 Design Libraries

500+ Screen Asset Library

Scalable Sitemap & IA Framework

Content Development Templates

Zelle®

User Experience Guidelines for Financial Institutions

Each year, Zelle® publishes extensive UX guidelines documentation for financial institutions to adhere and certify to before deploying Zelle features & functionality into their mobile banking applications.

As lead designer, I worked closely with an experience strategist, a design associate for a certain period, and client partners to transform a complex PDF guidelines document into a robust and interactive portal to empower banks across America to deliver consistent, elegant, on brand payments experiences.

Role

Experience Design Lead

Duration

6 months

Outcomes

Live Web Portal & CMS

End-to-End Prototype

Responsive Designs

3 Design Libraries

500+ Screen Asset Library

Scalable Sitemap & IA Framework

Content Development Templates

Objective

Transforming a static 250+ page PDF document with nuanced and intertwined user experience guidelines into an interactive, scalable, and modular digital experience.

Design Solutions

Certification Deadlines

For financial institution teams tasked with implementing Zelle®, what's most top-of-mind are the requirements for what they need to certify to and by when. We clearly presented this information along with easily accessible reference materials directly within their landing page.

Design Solutions

Core Screen & User Flow Guidelines

The Zelle® experience includes a set of foundational screens which are the building blocks for various user flows that financial institutions can enable. Each core screen includes a combination of mandatory and optional requirements, along with component-level best practices. In some cases, screen-level guidelines and UI elements are modified based on specific use cases.

To tackle these intricacies, we developed a dynamic system where screen-level guidelines could be used universally in applicable user flows or be overridden with unique versions for specific use cases.

Design Solutions

Revision History, Resources, and More

With each bi-annual guidelines update, tracking changes to previous requirements and new additions becomes critical for financial institution project teams to understand what's evolved and needs iteration in their banking apps.

We developed a comprehensive system around cataloging revision history, along with providing resources to make implementation and meeting UI/UX standards more efficient.

Design Solutions

Information Architecture Framework

Over the course of the project, we also developed a scalable IA framework with parent/child taxonomies, naming conventions, page templates, and more that could be used as additional content is added for new Zelle® features and functionalities.

Final Deliverables

Design Systems & Libraries

To handle the substantial amount of design elements, components, modules, and templates, it was necessary to establish a system of multiple interlinked libraries. This involved comprehensive design libraries for the Website UI, Product UI, and a Screen Library of over 500+ screen assets to populate every page in the documentation site.

Final Deliverables

Design Systems & Libraries

To handle the substantial amount of design elements, components, modules, and templates, it was necessary to establish a system of multiple interlinked libraries. This involved comprehensive design libraries for the Website UI, Product UI, and a Screen Library of over 500+ screen assets to populate every page in the documentation site.

Final Deliverables

Design Systems & Libraries

To handle the substantial amount of design elements, components, modules, and templates, it was necessary to establish a system of multiple interlinked libraries. This involved comprehensive design libraries for the Website UI, Product UI, and a Screen Library of over 500+ screen assets to populate every page in the documentation site.

Final Deliverables

Design Systems & Libraries

To handle the substantial amount of design elements, components, modules, and templates, it was necessary to establish a system of multiple interlinked libraries. This involved comprehensive design libraries for the Website UI, Product UI, and a Screen Library of over 500+ screen assets to populate every page in the documentation site.

Final Deliverables

Implementation & Site Launch

Lastly, we worked closely with a development partner to build an entirely custom and highly complex CMS based on the final designs. We supported with everything from design specs, to content creation templates & trackers, as well as a library of organized site assets.

Final Deliverables

Implementation & Site Launch

Lastly, we worked closely with a development partner to build an entirely custom and highly complex CMS based on the final designs. We supported with everything from design specs, to content creation templates & trackers, as well as a library of organized site assets.

Final Deliverables

Implementation & Site Launch

Lastly, we worked closely with a development partner to build an entirely custom and highly complex CMS based on the final designs. We supported with everything from design specs, to content creation templates & trackers, as well as a library of organized site assets.

Final Deliverables

Implementation & Site Launch

Lastly, we worked closely with a development partner to build an entirely custom and highly complex CMS based on the final designs. We supported with everything from design specs, to content creation templates & trackers, as well as a library of organized site assets.

©2024 Varun Mehra • Made with zero code in Framer

©2024 Varun Mehra • Made with zero code in Framer

©2024 Varun Mehra • Made with zero code in Framer