Square. Adding efficiency to order management on Square's POS system.
Helping merchants efficiency handle large volumes of orders from various third-party integration channels.
1 product designer (me)
1 product manager
2 software engineers
May - June 2020
🚀 Partially shipped in Q4 2020.
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.
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.
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.
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).
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Merchants are now able to select one, multiple or all orders and update all of them at once.
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.
When a merchant has a delivery order, the order is disabled once bulk actions is enabled to prevent them from taking action on it.
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 🚀.