Orders experience
redesign

Redesigned order management experience that 2 million Etsy sellers use everyday to fulfill their orders. This project was a result of an iterative design process that consisted of a number of sprints, series of user research, and close cross-functional collaboration.

Company

Etsy, Orders team

Year

2017-2018

Role

Product designer, UI/UX, Frontend, Product illustration

The team of two Product Managers (at different times), 8 Engineers, 1 Engineering Manager, 1 Design Manager, 1 Product Marketing Manager, 1 Product Educator. Collaborated closely with Copywriter, Data Analyst, Business Leads, Brand Designers, UX Researchers, Customer Support team.

Link

Etsy Shopmanager (Only available to Etsy sellers)

Launch announcement

Old orders page was not meeting diversifying seller needs

Challenge

Redesign of the order managing experience had to happen for inter-woven problems coming from the user, technology, business, and visual design needs. First of all, our sellers' businesses had grown with Etsy, but the old setup was not optimized to take care of their diversifying needs. Old code resulted in slower developing time and prevented us from quickly iterating on adding new features to help both sellers' and Etsy’s business to expand. From a purely visual perspective, the old style didn’t feel like a holistic product experience within Etsy. It was going to fall apart soon if we didn’t renovate the system.

Approach

Having over ten years of product history made it hard to untangle the complex problems. We ran Etsy’s first design sprint, visited sellers' workplaces, analyzed data, and spoke with the customer support team to truly understand the root problem and core needs of our users. The product goal was to streamline the whole experience to reduce unnecessary time spent on managing orders. The less time and effort sellers spend on our platform, the more they could spend creating what they love. Our success matrix included time spent on managing orders and reducing overdue orders and unfulfilled orders.

Outcome

Introduced a new concept of ‘Progress step’ that helps sellers to keep track of the order status, and it was well received. Some real use case includes: ‘Awaiting response,’ ‘Painting,’ and ‘Ready to ship.’
Clarifying ‘Ship by date’ countdown and adding 'Filters' reduced number of overdue orders by 7%.
Proved that clear UX contributes to the revenue increase through increased shipping labels attach rates.

Live capture of new orders experience

New orders desktop experience

New orders mobie web experience

Order row information system

Clarified hierarchy of the information and contextualized it to emphasize relevant information at the right moment without visually overwhelming sellers. After iterations, I created a modular design system that can flexibly communicate lots of information. This approach also made it easier to collaborate with engineers because we were able to structure design and code base similarly.

Tracking module shows the latest status of the order. Emphasizing ship by date resulted in decreasing overdue orders significantly.

Design process

This whole project felt like solving a SUDOKU for me. You have the list of requirements and all the data coming from product history, but we didn't know where everything belongs. One decision guided me to put the next piece in place.

Design principle

Change itself is not a virtue. In this ever-changing digital world, I think it is a designer’s responsibility to keep improving products to meet user needs consistently, but we also should be mindful about the fact that users will have to learn a new way of doing things and change workflow that they adapted because of the way we built in the past. With this in mind, design decision making criteria throughout the process was to add requested new key features, keeping things familiar for things that are working well, fixing broken elements, and removing unused features. I made decisions based on data analysis, qualitative research, usability testing, and team discussions.

Tools used

Sketch, HTML/CSS, Principle, Figma

User journey mapping

The first step was to build empathy with users and get familiar with the old tool. Based on past researches findings, I created a user journey map and shared sellers' pain points and wishlists with the team.

Design sprint

A design sprint was a great way to build a shared understanding of the product, especially with non-designers and decision makers in the team. Through bouncing off ideas and conducting user testing with sellers in 5 days, we found out common themes around needs for better ways of organizing orders. Early concept of 'Progress steps' came out from design sprint.

Seller studio visit

Right after the sprint, a mixed group of researchers, engineers, PMs, and designers visited a seller's workplace and observed real people beyond the screen. There was an elderly retired couple who will print out all the order details because they had to squint to read small texts on the screen, a pregnant woman who wanted to spend the least amount of time in front of computers, and a tech-savvy young lady who coded an incredible dashboard by herself to track and organize orders.

During the iterative phase, my week typically looked like this:

On Monday, I started by meeting with the PM and discussing the requirements of the feature that our team will be working on during next sprint. On Tuesday I usually focused on getting an early sketch done. On Wednesday, I went over wireframes with engineers, researchers, copywriter, and shipping experts and QA specialist on my team and received valuable feedback from diverse perspectives. On Thursdays, I had a design crit session with designers across teams. On Fridays, I finalized visual design and finalized frontend code using our design systems toolkit and created documentation to pass off to engineers. In the following sprint, engineers implemented those designs. Every 2 months, we had user research to see if we were on the right track.

Launch

My favorite part of working at Etsy is that we have a very engaged group of sellers who give constructive feedback to build a better product that works for them. When we got a thumbs up from one last qualitative user research, we invited a few hundreds of sellers to test the early version of the new experience. As expected, we started to get many reports on bugs and feature requests. Rather than panicking and reacting to that feedback right away, we listed every pain points and suggestions in the spreadsheet. By doing this, we could see common patterns and prioritize requests. After fixing bugs and updating top requested seller needs, we invited more sellers and continued this process until we arrived at the point where we felt we’re ready to roll out to everyone

My takeaways

The biggest take away from this journey is that in the end, all that matters is the people you are working with and the people you're building for.
Ideally, a good product should be self-explanatory, however, advanced tools inevitably require a guideline and learning curve.
How we communicate changes to users is probably as important as building the right product.
Our team crafted these cute planets at the beginning of the project and glued one by one as we accomplished milestones. It indeed felt like running a marathon that consisted of many many sprints, and small milestone celebrations were a great way to keep us from burning out.