Square. Adding efficiency to order management on Square's POS system.

TLDR

Helping merchants efficiency handle large volumes of orders from various third-party integration channels.

Team

1 product designer (me)

1 product manager

2 software engineers

Timeline

May - June 2020

Status

πŸš€ Partially shipped in Q4 2020.

Background

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. 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.

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.

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 - Updating orders individually.

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.

Current process of updating an order

Problem 2 - Viewing time sensitive orders.

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 require immediate attention (i.e. orders due within a few hours).

Different time windows have different priorities

Design Goal

HMW make it easier for merchants to manage large volumes of orders?

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)

Ideation

Breaking down orders into subsets.

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

Explorations

Finding a balance between manageable and efficient.

Since there was no design patterns for bulk selecting in Order Manager, this allowed me to apply different patterns and understand which might achieve the goals most efficiently.

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 orders and merchants cannot prioritize time sensitive orders with a list.

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. However, the separate filter menu seems hidden and makes it inefficient for a merchant to change filters.

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 chosen because it addresses the two design goals most efficiently.

Iterations

Refining microcopy and 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 merchants 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 πŸš€.