Scaling order management for Square's point-of-sale

Over the summer of 2020, I had the chance to join Square as a product design intern and worked on the Order Manager, a product under the point-of-sale system. During my time, I got to learn about issues merchants face when it comes to managing online order channels.

Overview

Introduction to Order Manager

Over the span of 6 weeks, my first project on Square's Commerce Platform team was to help build features that made it easier for merchants to manage their online orders in Order Manager.

My Role

I took lead on the designs of the project where I collaborated with the PM and the team's lead designer to establish design requirements, build wireframes and prototypes and conduct design reviews to gather feedback.

What is Order Manager?

Order Manager is a feature on Square's point-of-sale system that sellers use to manage of all of their online and integration orders. Think of it like the central hub where orders from DoorDash and UberEats would all appear.

Order channels on Order Manager

These orders include information (e.g. item quantities, special requests, etc.) and instructions (e.g. pickup, delivery, etc) that is important for merchants to know to properly fulfill an order.

Problem

Adjusting to the increase in online ordering

With the shift of commerce caused by the pandemic, customers were now ordering online twice as much then before the pandemic. The customer success team started to receive tickets from merchants highlighting that Order Manager wasn't built to efficiency handle large volumes of orders.

Merchant feedback

Problem 1

The first problem was that merchants couldn't can't take action on multiple orders at once—which means you could only update the status of 1 order at a time. It can be very time-consuming to have to clear 20 orders individually, especially if it's busy.

Problem 2

The second problem was merchants can't arrange the list of orders by different criteria. For example, shipment orders typically take longer to complete than pickup orders, yet Order Manager only displays orders by when they were placed. Merchants want a way to surface the orders that Merchants want a way to surface the orders that require immediate attention (i.e. orders due within a few hours).

Different time windows have different priorities

Design Goals

Ensuring efficiency for merchants

Our mandate was to make it as easy as possible for merchants to handle all of their orders in one place. We wanted a solution that would:

• Reduce the time it takes for merchants to update the status of multiple orders
• Allow merchants to quickly check time-sensitive orders

Competitive Analysis

Understanding other POS systems

With the rise of commerce tools, I wanted to get insight on the landscape of point-of-sale systems and how they help their merchants manage orders. I dove deeper into new and established point-of-sale tools currently available.

To get inspiration outside of commerce, I also looked at other platforms that enable their users to manage large volumes of items such as Gmail and Outlook.

Email platforms (left) and merchant tools (middle/right)

Takeaways

• Platforms that allow their users do take action on multiple items at once do so with bulk actions.
• To view different items with different characteristics, platforms allow their users to sort by those characteristics or group items by specific days.
• Tables are very efficient for laying out data pieces while giving the ability to change the view to your preferences.

Ideation

Ideating within and beyond the design system

Using the takeaways from the competitive analysis, I created a few low-fidelity wireframes to try and apply those concepts into Order Manager.

Early sketches

Explorations

Finding the balance manageable and efficient

Exploration 1 — Adding selection controls to the current menu

The first exploration was to include selection controls to help filter down the list of orders into a manageable size and view specific orders. Although this option reduces the time it takes to handle multiple orders (i.e. clear all pick-up orders), it's not the most efficient way because they still need to individually clear them and merchants cannot prioritize time sensitive orders with a list.

Pros

• Reduces the size of the order list to make it more manageable
• Can quickly view specific groups of orders

Cons

• Still cannot prioritize time-sensitive orders
• Requires the merchant to still individually clear each order
• The interface affords a lot of different actions which can be confusing

Exploration 2 — Filter menu and sorting options

The second exploration looks to combat a few issues by separating the filters into its own menu to clear up space on the main screen and includes a sorting menu to prioritize different orders.

Pros

• Sorting allows merchants to quickly surface time-sensitive orders

Cons

• The separate filter menu seems hidden and makes it inefficient for a merchant to change filters
• Merchants are still required to update the orders individually

Exploration 3 — Sorting options with bulk actions

The last exploration keeps the sorting menu but introduces the action of bulk selection; where merchants can select and update multiple orders at once. This exploration was ultimately chosen because it addresses the two design goals most efficiently.

Pros

• Allows merchants to take action on multiple orders at once
• Merchants are able to quickly view time-sensitive orders.

Cons

• Bulk selection of an order list isn't an existing pattern in the design system

Iterations

Refining microcopy and disabled states

After settling on a direction, my next steps was to work with the design systems team, the Commerce Platform design team and the Orders team to conduct design reviews and flush out mockups and new components.

Sorting labels that merchants can understand

Determining the different options a merchant can sort their orders by and the label text went through a few iterations. Collaborating with the User Research team, we decided that the main options were the order date and the fulfillment date.

Orders that require driver confirmation to complete

Since delivery orders are completed when the delivery driver gives the customer the order, the merchant cannot take action on the order in Order Manager and it must remain in the active state. There wasn't a disabled state but talking with the Design Systems team, we decided to translate the disabled state of the new design system in the meantime.

Final Designs

Allowing sellers to efficiently view and take action on orders.

Wrapping up the final iterations, I developed working prototypes in Figma for designers, engineers and product managers to test interaction patterns before refining the small details for hand-off.

Bulk selecting orders

Merchants are now able to select one, multiple or all orders and update all of them at once.

Sorting orders

Merchants have the option to sort by fulfillment date or order date, chronological or reverse chronological order. In the case that merchants want to clear all overdue orders.

Disabled delivery orders

When a merchant has a delivery order, the order is disabled once bulk actions is enabled to prevent them from taking action on it.

Reflection

Optimizing a remote design internship

This was my first design internship, I was able to learn a lot about the different product offerings of Square, how they work together, and the kinds of challenges sellers face in all the different stages of business.

This was an amazing experience and although I definitely learned a lot throughout the process, there are still areas of improvements and opportunities to explore.

• Explored more blue-sky designs that pushes engineering constraints to better identify ways to notify sellers of different error cases.
• Investing more time into prototyping tools. Prototypes helped communicate ideas more clearly in the early stages of wireframing and when presenting work cross-functionally.
• Sorting order launched in Q4 2020 to over 860k sellers 🚀