BASED IN CANADA

BASED IN CANADA

BASED IN CANADA

DESIGN + ART DIRECTION

DESIGN +
ART DIRECTION

DESIGN +
ART DIRECTION

SQUARE PRICING REFRESH

PROJECT DESCRIPTION

Updating our custom pricing component takes time and effort. Our teams' design technologists are the only people able to make updates/changes, which causes a bottleneck and timing delays. Additionally, it extends the translation process. Our solution is to create a standardized pricing component, easy for everyone to update and be used by all teams within Square.

SERVICE
Product Design

MY ROLE
Senior Interactive Designer

SOME OF THE GOALS:

→ Improved clarity of features
→ Provide easy access to view additional feature explanation without leaving pricing page
→ Mobile-first design
→ Improved hierarchy and organization of content
→ Sticky header (so users can easily connect which features fall within each tier: Free, Plus, or Premium)

KEY POINTS:

PLANS CARDS

Teams can highlight a specific tier to suggest to the sellers what Square recommends.

PLANS

STICKY BAR

Larger sticky navigation experience will have two visible options—the ability to view or collapse prices.

STRESS TESTING ACROSS LOCALIZATIONS

Although language and content may vary in length globally, each card will remain the same height, deferring to the tallest card as a guide.

CARDS2

TOOLTIPS

Especially for new sellers, we brought to the pricing table tooltips to describe the features in a simple way, to help their final decision and guide them on which plan fits their needs best.

TOOLTIP

CUSTOM INFORMATION

Teams will also have the flexibility to customize their pricing tiers by adding a checklist to the card.

FINAL RESULT

PW_Pricing_Mobile

DOCUMENTATION

To wrap up this project and ensure that everything we've done will be helpful and easy to customize, we also created documentation so that other teams can follow and build their Pricing pages with no (or much less) support.