Online Store

Extending Square's reach into eCommerce by bringing brick & mortar stores online.

Square was in a unique position to serve merchants a customized UI that integrates directly with their business. This was my first project at square with a rapid timeline to go live with a small, mainly remote team. The beta program focused on creating a simple, customized web editing UI while extending the product offering from basic items to donation campaigns and ticketed events.

P&Co - a clothing brand.

Exploring early in the design process helped to expose common visual representations of content types and site architecture.

The project began by exploring various editing and template styles while considering reusable components between them all. The editing interface started out as a 'what you see is what you get' UI. Due to development constraints and the complexities built into the types of items merchants wanted to sell, in-page editing became the more usable approach.

Exploring what a what you see is what you get wireframe UI could be like.
Exploring various types of template executions.

In order to begin experimenting with more variants of items a merchant could sell, we interviewed merchants interested in going online and may be selling online through another medium. They were teaching classes, holding fundraisers, holding guest speakers, and more with no official way to collect through Square. This led us to focus on selling generic items, tickets to events, and accept donations.

The editing UI for the types of products we sell.

Setting up an online store should only take two minutes.

It can be daunting to a merchant to add their entire inventory during an onboarding moment. The approach here was to simply introduce a merchant to the system by selecting a general page layout that fits their brand, verify their business details, add a few items from their inventory, and set up a domain.

Framework for onboarding.
Marketing style page to educate users on Square's dashboard.
Four step onboarding flow.
Final step of onboarding. Your live site.

Merchants needed a way to track, ship, and generally acknowledge what customers were purchasing.

As we began to define a new checkout flow, the staggered layout of the form elements came into question. Was there a simpler way to construct the page and allow the customers to flow through with ease?

Purchase experience: cart.
Purchase experience: payment details.
Purchase experience: success.
Exmaple of purchase experience.

This updated visual style has been iterated on and reflected itself into the rest of the dashboard ecosystem. Once an order is placed, an email will be sent to the merchant if any action is needed so they don’t need to sit on the dashboard, waiting.

Exmaple of managing orders on the dashboard.

Amplify Market