ENTER PASSWORD TO CONTINUE
CLIENT
DINERS CLUB (DS)
CONTEXT
DINERS CLUB NEEDED ONE SHARED LANGUAGE FOR ITS DIGITAL PRODUCTS. CARDS, BALANCES, PAYMENTS AND ALERTS SHOW UP ON ALMOST EVERY SCREEN OF THE APP, AND EACH ONE HAD TO LOOK AND BEHAVE THE SAME WAY, NO MATTER WHO DESIGNED OR BUILT IT.
WHAT I DID
I DESIGNED THE DESIGN SYSTEM FOR THE DINERS CLUB APP: FOUNDATIONS, TOKENS AND COMPONENTS.
EVERY COMPONENT SHIPS WITH ITS STATES DOCUMENTED — DEFAULT, HOVER, PRESS, DISABLED AND LOADING — SO DESIGN AND ENGINEERING BUILD FROM THE SAME REFERENCE.
THE DECISION
I NAMED COLORS BY WHAT THEY DO, NOT BY WHAT THEY LOOK LIKE. INSTEAD OF A SHADE OF NAVY, A COMPONENT USES PRIMARY.DEFAULT, SURFACE.BACKGROUND, BORDER.SUBTLE OR TEXT.ON-DARK.
THE TRADE-OFF: MORE WORK UP FRONT AND MORE NAMES TO LEARN. I KEPT IT BECAUSE A DEVELOPER KNOWS WHICH TOKEN TO USE WITHOUT ASKING, AND THE BRAND CAN CHANGE A COLOR IN ONE PLACE WITHOUT TOUCHING EVERY SCREEN.
IMPACT
ONE SOURCE OF TRUTH FOR DESIGN AND ENGINEERING. NEW SCREENS ARE ASSEMBLED FROM EXISTING COMPONENTS INSTEAD OF BEING DRAWN FROM SCRATCH, AND THE APP KEEPS THE SAME LOOK AND BEHAVIOR FROM ONE FLOW TO THE NEXT.