☀️ 🌙

← Back to Projects

Customization: Style & Layout

Product Designer

Building on the broader goal of helping our Sellers appear more profesional and wanting to expand our offering of customization options, we started with the easiest and most needed area of the experience: the invoices themselves.

Project screenshot 1

Context

In addition to the payment page where Buyers pay and interact with the 'invoice', we also provide a more traditional invoice with each that is a downloadable PDF, often used for record keeping and more official uses. The original Square Invoice design was years old at this point, and due to it being silo'd off from the rest of the experience, it was an obvious place to start exploring these expanded customization offerings.

Approach

The first step in this project was actually a higher level exploration of the navigational architecture of the Invoices product itself, and determining where these upcoming customization settings would live. The tedium of how we got to the decision is too lengthy for this space, but we decided it would be live as a standalone page inside of our settings group.

From there, the focus shifted to researching what 'customization' actually meant to Sellers and what they value. The standouts from this were obvious, and the focus was then set on more branding options, deeper color customization, and a the ability to change the "look" from the then dated, standardized one we had.

The work was then split into two efforts; the first being the redesign of the invoice PDF's themselves, and the other being the customization page where the changes would actually be made. After defining the direction for the PDF's and the style variants we wanted (Modern, Classic, and Original), the work began to design them. Not only was it a challenge to build a nice looking invoice that also clearly displays information, but the legality in some of the locales we operated had very strict definitions of what constitues an invoice. This added another layer of complexity to the project, and required collaboration from our counsel team.

Once the PDF's had been completed, we worked to build the customization page. This customization umbrella of work also doubled as a billbaord for our Invoices Plus premium product, so we wanted to implement it in a previewable manner so those not yet subscribed could interact and be able to preview the experience.

Project screenshot 1

Outcomes

Following the full rollout, we saw bumps across the board in both new trials and new subscriptions to the Plus product, as well as a barrage of positive Seller feedback on this and upcoming customization features.

Project screenshot 1

Pay Page RedesignStyle & LayoutCustomizationInvoices Plus