Discovery

With help from Michael Yap (User Experience Strategist), Kyle and I kicked off the project by facilitating a week-long design sprint to generate ideas and expand our team’s thinking. During that week, we mapped the seller’s journey through our tools from sold to shipped, noting pain points, emotions, and opportunities, and validated a rough direction with usability testing. At the end of last day, the team left energized and excited about the work to come.

The week after the design sprint, the Shipping & Order Management team split into two groups to focus on separate pieces of the experience. I was the sole designer on the Shipping team focusing on the redesign of our shipping tools. There were a lot of pieces to understand, so I started by splitting my areas of focus into two main groups based off what sellers were aiming to achieve. The first was improving the shipping label purchase flow and the second was everything that happened after a label had been purchased.

Two main groups:

1. The shipping label purchase experience

2. The post-purchase experience

In the old tools, these experiences lived across multiple pages and the goal was to integrate them directly into the order management page. This would help sellers fulfill orders faster by eliminating page reloads and preventing context switching. Because the order management team was also just starting work on their tools, I decided to begin by exploring the shipping label purchase experience until their design direction was more fleshed out.

Ideation

The next step was tp revisit the competitive analysis examples that were compiled during the prior design sprint. There were a lot of tools that just did shipping (ShipStation, Ordoro, Shyp, etc), but few (Shopify, Squarespace) that also offered everything that Etsy did. I started working on the first major challenge: allowing sellers to buy shipping labels without leaving the page.

To explore ways of doing this, Kyle and I spent a lot of time drawing ideas on the whiteboard together. There was no shortage of ideas, so in order to narrow in on a few directions, we would storyboard them in flow and test them against some common “gotchas,” like, “How would it work if there was only 1 order? What about 100 orders?” or “Would this provide a clear enough path to purchase?” We explored many ways of purchasing labels directly in the page, but they were all lacking the focus required to input package details and confidently buy shipping. The concept we continued to come back to was purchasing shipping labels in some form of an overlay. We both really liked the full-screen overlay deployed when creating a new album on Google Photos.

Prototyping overlays

After the whiteboarding sessions, I would move into creating clickable wireframes to see how our ideas felt. At this stage, I was focusing on designing storyboards instead of single screens so that I could use Principle to quickly create prototypes. These prototypes were invaluable. Not only did they give me a sense of what felt natural and how animation could create spatial relationships, but they started to convince some of the tougher stakeholders that this experience didn’t have to live on a separate page. I cycled between whiteboarding and prototyping in Principle until I had a direction I felt confident moving forward with.

When I explored a direction using our normal sized overlay, I received feedback that it wasn't big enough for the complexity of purchasing a shipping label. When I experimented with a full-screen overlay similar to Google Photos, it felt too removed which made hitting the back button instead of cancel feel more natural. I was concerned this might confuse sellers, so I decided to move forward with an overlay that filled the majority of the screen but still hinted at where you were.

Because this was something that didn’t exist anywhere else within our seller tools, I worked closely with the Design Systems team to explore adding this as a new pattern, which included considering what other experiences could potentially live in this new extra large overlay.

Improving the purchase form layout

Once I had determined the direction for allowing sellers to buy shipping labels without leaving the page, I moved inward to the layout of the purchase form. One of the problems with the old purchase form was that it made it difficult for high-volume sellers to fulfill all of their orders, so I started exploring layouts that could handle a lot of orders.

At this point, I was designing for 30+ orders, so I kept the rows tight and reduced the information as much as possible. When I usability tested this layout with our high-volume sellers, I learned that these sellers don't often purchase shipping for this many orders at time but prefer to break them into smaller batches. Surprisingly, some sellers actually purchased their labels one at time, despite being considered a high-volume seller. For the sellers who were only purchasing a single label, this layout did not make the best use of space and ended up feeling heavy.

Improving the package form

While working on the purchase form layout, I was also exploring ways to improve the package form. The old package form was slow and felt difficult for a number of reasons:

1. The inputs and font were small, making it hard to double-check that information was entered correctly.

2. The layout was dense and hierarchy wasn’t clear. When we added new features, it made these problems worse.

3. To switch carriers, you had to go to another page where this form was in a different order. This made comparing rates challenging and time consuming.

4. It definitely wasn’t responsive, but nothing on this page was.

My first step was to move everything into our web toolkit, a set of responsive components and utility classes that ensure tools are visually consistent. This made the inputs larger and aligned the form styles with other forms on the the site. To make more space for the inputs, I moved the cost breakdown beneath the form and after checking the usage of note to buyer, I made it a global option because the majority of sellers sent the same note to every buyer.

Then I rearranged the order of the inputs in a more logical way: package information first, inputs that affect the cost second, and made sure they would be in same order for every carrier. Another benefit of changing the order of the inputs was that shipping method came after package details which meant prices could be estimated directly in the select, saving sellers time when comparing.

During this time I also explored how we could improve on native selects to include more information, like costs and estimated delivery times. Improving these selects also meant that they would be formatted the same way everywhere and on mobile, the long shipping methods and package types would not be truncated.

Usability testing

Once I had established a direction for how most of the purchase experience should look and work, I moved from Sketch & Principle to my sandbox. At Etsy, sandboxes allow designers who are comfortable coding to leverage our web toolkit to design in browser. Sandboxes have a lot of advantages over Sketch: they’re dynamic and responsive which makes designs and usability testing more realistic. Once I have thought through a problem and spent time wireframing, I tend to be just as fast designing in the browser as I am in Sketch.

While I was building in my sandbox, the engineers on my team were grabbing my code (another advantage of sandboxes) and building a minimum viable product (MVP) to usability test. Within a few weeks, we had an early shipping label purchase experience that used real seller data ready to test. Excited to learn how sellers used and responded to the new direction we had been working on, Josh McClain (Engineering Manager) facilitated two days of usability testing because our dedicated research team was unavailable.

Usability testing revealed what I had gotten right and what I had I to reconsider. It also finally convinced the remaining team members who were hesitant that the shipping label purchase experience should be integrated into the order management experience.

Incorporating feedback

In the first round of usability testing, we tested with sellers who shipped on average between 12-50+ orders a week. Between testing sessions, I moved some of the navigation around and made adding and editing a shipping label clearer. As the sessions continued, I kept making small changes to improve the experience, such as refining the package form, making it smaller in size and easier to understand.

In the second round we tested sellers who shipped 250+ orders a week. During this round, I tested a new concept called "Presets", a tool that would allow sellers to pre-fill any combination of inputs on the purchase form with a preset that they had created. Sellers loved this and expressed interest in having it integrated and shared feedback on how they would use it. This round of research was really helpful in understanding how the new flow and layout affected our high volume shippers and for the most part it either improved their workflow or was neutral.

Overall, the response was great: sellers liked the new flow and they liked being able to use the tools the order management page provided right before they purchased labels. There were no complaints about it being in an overlay. 🎉

Aligning with orders

By this time, the team working on the new order management experience had also validated their design direction. To ensure a consistent experience, I worked closely with Kyle and Hanna to align the shipping label purchase experience with the order management page.

The first area I revisited was the order row. I wanted the basic layout of the order row in the shipping label purchase experience to match the layout of the order row on the order management page. We ensured the critical order information was the same in both places and I updated shipping labels to be their own “cards.” My goal was to accurately convey the relationship between orders and shipping labels: a shipping label was associated with an order. Instead of the entire order row expanding like in the previous iteration, just the shipping label card expanded revealing additional order information like the full address and items purchased.

These changes provided much more clarity than the past iteration and allowed presets, duplicating labels and removing labels to function better.

The post-purchase experience

With the order management experience getting closer to completion, I began integrating all of the post-purchase actions and requirements into the order management page. This included actions like printing a shipping label, creating USPS® SCAN forms and refunding labels. In the past experience, purchased labels lived on a totally separate page separate from their orders. In the new experience, they’re completely integrated and associated with their orders.

Creating systems

After collaborating on the visual alignment of the order management and shipping label purchase experiences, I set up weekly working sessions to identify the parts in both products that could be shared. One of the areas we focused on was addresses. I audited all of the places that addresses were being used in both experiences and created a component that could be reused and extended based on the need. In the shipping label purchase experience, I worked closely with my project manager (PM) to identify every type of error and grouped them into four defined types, so that in the future, a designer would not be required if a new error needed to be added.

Building and documenting

Once all of the major flows and components had been explored and defined, I built almost every single state, overlay and action in my sandbox so that engineers could use my code for the final implementation. I scheduled weekly time to focus on writing documentation for all of the new things I was creating. I would ask myself, “If I were to leave tomorrow, what would be helpful for the next designer that worked on this?” When I left, that documentation currently lived in a Google Doc but the plan was to add it to the larger Design Guide eventually.