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.
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.
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.
CUSTOM INFORMATION
Teams will also have the flexibility to customize their pricing tiers by adding a checklist to the card.
FINAL RESULT
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.
SEE ALSO
