Identified and socialized a redesign opportunity of a clothing rental subscription’s closeting experience.
Role: Product Designer
Increased customer engagement by 24% and order placements by 109% with Haverdash Closeting
Overview
Problem Statement
Haverdash is a clothing rental subscription website owned and operated by CaaStle. As a user of the service, I identified and socialized an opportunity with the product team to redesign and improve the “closeting” user experience in order to increase user engagement.
Design Process
Through a number of iterative working sessions, I collaborated closely with other designers, product managers, and developers to design a closeting experience for Haverdash’s web and mobile app.
Solution
The UX solution was to introduce the UI language of slide up modals and swiping interactions into our “quick add” and product detail page (PDP) experiences on mobile to better pattern match a rental mindset and improve browsing efficiency. I delivered high fidelity mockups and prototypes.
Results
We first tested the new designs on one of our new features optimizations, Dart, which resulted in a 109% increase in Dart order placements. The new closeting experience also resulted in a 24% increase in closets per session.
Challenges & Learnings
This project was connected to a parallel design project, Dart, which required cross-project considerations and communication. On this project I learned to work collaboratively with dev to find solutions for technical interaction constraints.
Key Contributions
I proactively presented a redesign opportunity to the product team which was able to be greenlit. I delivered mockups and prototypes and worked closely with dev during the hand off and implementation phases.
Identifying opportunities for browsing efficiency
Since I work at CaaStle, I subscribe to our owned and operated clothing rental subscription site, Haverdash, in order to gain user experience insights for work and also to rent clothes for myself. A key part to our user experience is that users browse collections and add items to their closet, or what we call “closeting.”
While using the service I noticed:
Swiping product images on the PDP took users to a different PDP instead of the next product image. Users would likely expect to swipe through alternate images like most e-commerce sites.
Image thumbnails were below the fold resulting in an increased interaction cost to users.
Our main goal was to ask ourselves:
How might we improve the closeting user experience in order to increase user engagement?
A vision for an efficient “rental mindset” focused UX
At CaaStle our design process begins with developing a strategic plan to approach our design solutions. I put together a summary of best practices research and design strategy approaches we could take and presented to our Design Director and our Product Group Director. Together we collaborated and decided that our UX design approach would focus on the following key aspects:
Keeping users in one place through “quick closeting” by introducing slide up modals which don’t take users away from their scrolling position on the collection page.
Improve browsing efficiency by adding expected image swiping interactions.
Push for a non-committal renting call to action by presenting product information in a way that encourages rapid and non-committal adding to closet rather than a more commitment mindset of adding things to a cart.
Clothing rental requires less consideration and commitment than purchasing
Our team discussed how purchasing a clothing item requires thorough consideration of things like size and product details. Since our clothing rental subscription service requires users to add many clothing items to their “endless closet,” we wanted to design the UX where fast paced and more casual and non-committal decision making was emphasized.
I collaborated with our design team and PM’s to come up with the following design choices:
Close association between garment images and CTA
Our team decided the two most important things a user considers are the product images and CTA which we gave the most visual prominence.Hiding size tiles to ease size uncertainty and emphasize suggested size. One of our Haverdash features is that we have an algorithm that gives user’s a personalized suggested size. Since data showed that a majority of our tenured users closet our suggested sizes we made a decision to have size selection come up as a separate modal so we could emphasize the suggested size. By no longer laying out all the size tiles we are able to emphasize the suggested size more and ease user’s size uncertainty.
Refining efficient gestures and interactions
I created high fidelity mockups and prototypes and presented them to dev. We collaborated on defining different use cases to design for.
Throughout the development process we regularly collaborated on calls to refine gestures and interactions.
We ran into a technical constraint where dev needed more time to figure out how to add dual gestures onto our web experience of swiping down to close the modal and swiping horizontally to scroll through images.
We compromised on adding a temporary close button instead of a swipe down gesture in order to meet our deadlines.
A new efficient and “rental” focused way of closeting
For this project I delivered high fidelity mockups and prototypes for mobile web, desktop web, and mobile apps that introduced a slide up modal UI language for quick closeting that allows users to closet more efficiently while encouraging quicker decision making to add items to their closet.
Quick Closeting Redesign
Old Interactions
Disruptive transition moves user away from scrolling position in the collection
Alternate image thumbnails are out of reach
Image shown is not much bigger than collection thumbnail with no zoom functionality
Closing modal leads to misclicks to the header
Old Layout
The image and CTA are prominent but tapping on high image thumbnails adds interaction cost
Layout has user consider all product information before adding to closet
Reviews show up below the product name if there is at least 1 review written
Old
Alternate image thumbnails are below the fold adding interaction cost
Swiping on the garment image takes the user to the next product in the collection rather than the expected alternate image
CTA is below the fold
New Layout
Product images and buttons are more closely associated for more efficient adds to closet
Suggested size takes away other size selectors that may make users second guess the suggestion
A size selector drawer allows for use cases with a large size selection range
New Interactions
Slide up modal keeps users in their scrolling position on the collection page
Alternative images are viewed by swiping
Tap to zoom functionality for bigger image views
Closing modal was designed to close by swiping down or tapping outside
Product Detail Page Redesign
New
Image, CTA, and suggested size are all above the fold
Alternative images are viewed by swiping with tap to zoom functionality
Results
Increased Engagement
We first tested the new designs on our new feature optimization called Dart. The quick closeting and PDP experiences contributed to a 109% increase in Dart order placements. After this success we A/B tested the experience across the Haverdash site experience resulting in a 24% increase in closets per session.
Challenges & Learnings
Because this project was connected to another project, one of the challenges was making cross-project considerations and communicating changes between the two. I learned to keep a larger vision and design for multiple parts of the experience. I also worked closely with dev and PM’s throughout the development process. I learned that continuous communication with dev helps everyone stay on the same page.
Key Contributions
I proactively presented a redesign opportunity to the product team which was able to be greenlit which was a highlight for me. I delivered mockups and prototypes and worked closely with dev during the hand off and implementation phases.
Built better and faster products by creating the CaaStle Design System
Created flexible design libraries and templates that improved the design team’s workflow efficiencies to same day turnaround times, set consistent UI standards, and introduced real time design collaboration.
Design Systems, Figma