Venice Guidelines

Venice Interface Guidelines (VIG), was the design language for the PayPal consumer mobile app, Venice. It is a project I co-created with my former colleagues Chris Sybico and Libo Su.

Our hope was to create reusable components and code that could be shared between different teams and make conversation with developers more efficient.

Designing for Venice was at times an inconsistent process because the app was very customized in its design.

There was multiple duplication of assets and reusable components, frameworks and patterns were not being shared between teams. To solve this, the three of us decided to document every element within the app and create a centralized repository where building blocks for Venice would live.

What is it?

VIG started off as a side project and our hope was to make an internal website where anyone building for Venice could go to for reference. If someone needed a button, there would be no need to recreate a button from scratch, it would be available on VIG both for designers to use in their designs and for developers to grab a code snippet from—with a detailed description of how to use them.

Specs and measurements

When designing for Venice, we followed an 8pt grid system. We used what we call spaceblocks to lay out the screen. That allowed elements not to seem like they were floating randomly in space. The spaceblocks also helped developers to see more quickly how different elements were spaced on the screen relative to one another.

Motion design

We wanted to incorporate elegant motion to further guide and educate the user on what is happening, to give context, and furthermore to add more delight to the experience. We used framer.js to document these micro-interactions from which we could then extract values for developers.

Venice Interface Guidelines today

What started as a side project developed into a great tool when onboarding new designers on the Venice team. We realized that our vision for VIG needed some rethinking. There were some unanswered questions like: how will we maintain VIG? How long will it take to get a global company onboard with it where all designers and developers are using it? Who, indeed, is this for? Although VIG was simply a working prototype, it added much-needed consistency in our designs and sped up the process when new designers joined our team.