Streamlined a distribution center’s manual product inspection and repair processes by introducing a new internal tool.
Role: Product Designer
Streamlined manual paper processes with new Digital Action Tag software
Overview
Problem Statement
CaaStle’s distribution center team members in the inspection department write out paper “action tags” with clothing repair details as part of their daily process. These manual processes result in inefficiency, inaccuracy and an inability to track trends presenting a need for a new digital tool.
Design Process
Our product design team worked closely with a product manager, distribution center stakeholders, and dev to collaborate on a new “digital” action tag software that streamlines workflow efficiencies for the inspection and repairs departments. After it was launched we also travelled to the distribution center in Arizona to gain feedback on insights on the tool’s use.
Solution
We redesigned CaaStle’s original inspection tool and designed a new repair tool for the distribution center’s internal web based applications which are used on laptops and touchscreens.
Results
The new tool was able to improve the distribution center’s inspection throughput and improved the repair department’s throughput. The tool also allows distribution center leadership to systematically capture repair data as well.
Challenges & Learnings
Because our product design team had never been to the distribution center, we had to use secondhand descriptions to understand the workflow of inspection and repair team members. I learned to successfully advocate for our design team to take a trip to the distribution center to further understand the context of the tools we design.
Key Contributions
I co-led this design project and contributed to the initial push and plans for the design team to visit the distribution center. I also developed a unique UI language to distinguish when the distribution center team members need to sort a garment to a new location.
The opportunity to improve manual paper processes
At CaaStle, our distribution center inspects every garment that is returned by our clothing rental subscription customers. Currently a team member at the inspection station’s identifies if a garment needs repairing. If it does they then writes out an “action tag” on a piece of paper, place a physical sticker on the garment to mark the location of the repair, then makes a mental determination as to which station it gets sorted to. Moving this process to an internal tool can improve efficiency, accuracy, and the ability to track repair trends.
Understanding user stories and the physical workflows of distribution center team members
We began the design process by working collaboratively with our Product Manager on user stories for the new tool. We talked at length about the existing paper based work flows, the existing tool’s capabilities as well as the tool’s new capabilities and technical limitations. Our design team asked lots of questions about the physical aspects of the user’s workflow and space before designing. For example, this flow requires the user picking up and putting down a garment scanner and pressing touch screens on a laptop sized device. We also talked about the process of physically sorting garments on movable racks that get transported to different stations. We used our defined user stories to define our user flow.
Leveraging internal tools design system for our first draft
Our design team recently began working on redesigning our company’s internal tools and we began by pulling existing patterns from our design system. Our process for the overall tool redesign is to use the new UI language on new features being designed until there is enough stakeholder buy-in to overhaul the legacy UI.
We started by pulling basic components as a starting point for tool navigation, garment scanning, and garment information.
Developing a UI language
for sorting garments
In parallel to this project, our design team worked on a sorting internal tool among others in the same software. We took a look at the bigger picture of how our internal tool design system was developing and decided to make a specific UI language for the action of sorting garments to a different location since this is a common use case within the distribution center. We decided anytime a user has to physically sort clothing to a new location we would use large bold text and a bold border along with iconography so that user’s quickly pattern match to physically sorting.
Making a digital experience to replace physical stickers
Part of the inspection station workflow is to place physical stickers on the area of the garment that needs repairing. One of the goals of this new internal tool we designed was to capture data so that CaaStle could understand trends of garment repairs to better inform merchandising purchases. Our design team explored having a garment specific graphic for the user to select their repair location. We learned that it was out of scope for dev to display a garment specific graphic (Ex. pants graphic for pants, shirt graphic for shirt) so it would need to be a “universal” garment graphic similar to what exists in the legacy tool. We created a universal garment graphic to solve this problem. For repair locations, we drew inspiration from placing Figma comments on a specific part of our designs to introduce a repair location tap and select action.
Integrating multiple repair tools into the larger internal software
We decided that the repair tool would have different nested tools within it to accommodate for different repair stations. As a design team we decided to nest them into a singular “Repairs” tool menu screen instead of creating four separate tools within the internal software’s left panel navigation. We designed the menu to match with the sorting UI icons.
Digital Action Tag Overview
Redesigned inspections tool to record failure locations and new sorting functionality
Because CaaStle works with diverse retailers and fashion brand clients every mockup is linked and connected to Figma shared styles and assets or what we call, “design tokens,” which allow designers to implement new clients by changing a few design tokens instantly rather than spending time recreating each individual mockups.
Old Layout
No product information displayed in order to confirm the scanned garment matches the physical garment
Failure locations are limited to zones
No instructions on where to sort a failed garment to
New Layout
Product information displayed to confirm the scanned garment matches the physical garment
Tappable failure location functionality with multiple failure functionality.
After submitting, the user is given instructions on where to sort.
Launched new repair tool eliminating paper action tags and stickers
The new repair tool allows repair team members to view the inspection team’s garment failure reasons eliminating the workflow of having to manual fill out paper action tags and placing physical stickers.
Results & Next Steps
New Efficiency Benefits
The distribution center leadership and team members were able to see increased throughput in the inspection and repair stations and noted the friction reduction in not having to write things out on paper action tags anymore. Importantly, they noted that it was a positive user experience compared to the earlier legacy version of the tool.
Gaining insights from visiting the distribution center:
I helped advocate for our design team to take a trip out to Arizona to visit our distribution centers to better understand the users we are designing for. One of the primary challenges of designing for internal softwares was the secondhand information we’d get from product managers and stakeholders in terms of what the physicality of the user’s workflow is. We were able to visit and talk with users and stakeholders and we came up with the following insights for design iteration:
Users wear latex gloves during their workflow and often go back and forth between touching the garment during inspection and tapping things on the screen. Our design team identified that we can improve the design by using large touchable tiles instead of small radio selectors for the retire garment action. Or to make the submit button above the fold to prevent the interaction cost of scrolling.
Users have repetitive tasks and will memorize UX and so when we asked about pain points most users had no complaints and as we watched them work we observed a lot of muscle memory in their interactions. This was a great insight for us to keep in mind for future designs to consider the physical repetition of UX actions and design for efficiency.
Adding affordances for training and new employees was feedback we got from one of our stakeholders. They let us know that distribution center team members often have a lot of turnover, so adding instructional affordances can be helpful. For example, we could add an affordance letting users know to tap the garment graphic to log the failure location.
Key Contributions
I co-led this design project and contributed to the initial push and plans for the design team to visit the distribution center. I also developed a unique UI language to distinguish when the distribution center team members need to sort a garment to a new location.
Increased customer engagement by 24% and order placements by 109% with Haverdash Closeting
Identified and socialized a redesign opportunity of a clothing rental subscription’s closeting experience.
E-Commerce, Mobile Apps, Web