Product design / Client WorkTOTE Perfecting e-commerce fitting room experience
roleProduct Designer
TimelineJuly - August 2022
TEAM4 Designers, 2 Software Engineers, 2 Executives
✦ IntroductionTOTE is a B2B e-commerce focused startup whose flagship product is a virtual fitting room widget that allows customers to reserve a fitting room and add items directly from a store’s website. Users are then able to book their room at the store’s physical location and show up to try on their items.
Reducing drop off rates.
Seeing high drop off rates with the recently launched TOTE widget, our team wanted to gain a better understanding of their user’s needs and pain points and wanted to refine the product with a focus on how we could make the experience more visually and functionally appealing — creating a habit forming product that users return to with each visit to their favorite online stores.
What TOTE does & the fitting room widget.
Current TOTE widget design on @Isalis (A client of TOTE)
the project goalRefining the user experience to reduce initial drop off rates and create a product customers love.
the scope the deliverableUser interviews, usability audits, heuristic analysis, mid fidelity prototypes, usability testing, standardizing design system for implementation, high fidelity solution
A high fidelity solution ready for hand-off to development team
✦ discovery Our three-part research methodology.
To begin this sprint, our team tackled research through reviewing the current designs’ heuristics, interviewing users, and doing usability audits to find the pain points of current users and understand why the product was experience high drop off rates.
I. our heuristic evaluation (done by the design team)II. affinity map from user interviews 
III. conducting usability auditsFrom our user interviews, we discovered three main values of our users and their preferences surrounding shopping. Our findings ultimately validated that the TOTE widget would address the values and wants of users, so why the high drop off rate?
Users prefer shopping in person without the help of an employee
value no. 1 value no. 2 research insight no. 2Online shoppers wish they could try items on before purchasing
value no. 3 Users love the idea of our widget, but found the actual product fell short of what they expected.
From our heuristic analysis and usability audits on the current product, we found two main flows that caused friction in the user experience, which gave us some insight into the user drop off rates TOTE was currently experiencing.
Users who shopped online often return items due to poor fit
Research insight no. 1The TOTE widget aligns with user values when it comes to shopping.
Users skip over the instructional page when there is too much text
Users could not figure out how to cancel or reschedule bookings
✦ research summary What we discovered from our research.
usability pain point #1usability pain point #2✦ SynthesisMapping out pain points in the user journey where we could intervene.
We found that users felt either disinterested or impatient during tasks in their usability audits, so to help us visualize the problem we mapped out points of intervention where potential alterations could be made to bring the emotions of our user up to our goal baseline level of emotion.
Our hypothesis.
Through our research and synthesis, we hypothesized that the reason for the high drop off rates with the TOTE widget were due to usability issues at the intervention points in the user journey through the widget. Our goal for this sprint was to address these issues through design changes and see if drop off rates lowered after shipping these changes.
✦ ideationMoving into brainstorming solutions.
With our research gathered and data synthesized, we circled back to the pain points and brainstormed how might we address them for our users.
Create a way for users to easily edit their booking details within the widget so that they may build trust in using TOTE as a tool and feel like they are in full control of their shopping experience.
pain point #2Users want to know how the widget works, but are getting bombarded with too much information in educational pages
Users are struggling to find an easy way to cancel or reschedule an appointment through the widget itself causing frustration
How Might We…Restructure the education page so that it is more effective visually and aligned with cognitive load guidelines — sparking curiosity in the user to use the widget.
pain point #1How Might We…Rapid ideation in low fidelity.
Our team ran through several rounds of rapid ideation based on our pain points to see what solutions we could come up with for those intervention points we wanted to address.
Four specific aspects we wanted to tackle.
Through our ideation rounds, our team found four areas we wanted to focus our efforts on in our design that we felt would address our user’s pain points and improve the overall experience of using the widget.
Simplifying the on-boarding/ tutorial experience
Redesigning form fields for better accessibility
Creating more visual hierarchy in product card design
Creating a user flow for cancelling bookings within the widget
The Final Solution.
Improving form design
Increasing visual hierachy in product cards
Simplified Education Screens
A major pain point we sought to address was TOTE’s overwhelming instructional information. We incorporated helpful visuals and broke down steps into bite sized screens to help users digest information better.
reducing cognitive overload A Smoother Booking Process
Our goal with the booking process was to make it as user friendly as possible to get customers from their online fitting rooms and into stores. By providing progress markers and increasing visual contrast in the form design we allowed for a more seamless booking process.
Streamling cancelation processUser Friendly Fitting Rooms
To make adding items easier, we included product images and restructured the item cards with more visual hierarchy. Additionally, we added a 10 second ‘undo’ option in case customers made a mistake in deleting an item.
Cancel Bookings with Ease
Cancellations were a tough task for users to complete in our usability testing, so we made it a more transparent process by simply including an option to cancel in the final confirmation screen.
✦ cLosing thoughtsimpact on our users 👥100% increase in ability for users to cancel their appointments
4 of 5 users read through the new education screens
Overall, tasks within widget were completed quicker by 4-5 mins after our revisions
Applying more user research and usability tests with end users to see how iterations improve booking rates
Implementing an option to transfer items from cart to fitting room to improve discoverability of fitting room feature
Reworking the widget button location for more visibility on store’s home page
what else we had in mind 🧠Learning how to communicate design decisions to developers and business executives alike
The value of understanding cognitive principles when designing a consumer facing product, and asking questions like how we can prevent cognitive overload or minimize disengagement
Working in B2B mode and thinking about both business owners and the end user in design decisions
what i've learned 🌱well hello there 👋 looks like you’ve made it to the end!