ATM Screen Variants & Guidelines

Introducing designers to Figma variants

Project Overview

The current set of ATM templates at JPMorganChase exist in multiple instances across different lines of business. and software platforms creating uncertainty and inconsistencies among designers and marketers alike.

Because Figma was new to the firm, I took the initiative of creating a new component, based of of users needs, and a set of guidelines and instructions to be disseminated across the firm for use.

Lines of business

Dubbed the “Unified ATM template”, it was tailored for use for multiple lines of business, and in 6 different sizes.

  • Chase

  • Chase Freedom

  • Chase for Business

  • Chase Sapphire Reserve / Preferred

  • Chase Private Client

  • Chase Servicing

“How to”

Detailed instructions were provided to help those who were new to using Figma components and variants. These steps were tailored to the designers tasks, and explained how to use and edit variants, without straying from the brand design intent.

Examples

Examples were provided to illustrate how pre-set padding, spacing, and styles also helped streamline their efforts.

Do’s and Don’ts

Finally, detailed use case examples were shown in order reinforce current brand guidelines.