UX / UI
Wireframes
Compare Tool
The compare tool was introduced at the collection level, allowing users to evaluate products side by side — such as bra to bra or underwear to underwear. Once a product was selected, the compare tab followed the user across the site (with the exception of the detail page), enabling comparison at any time. While designed for multi-product evaluation, the tool was also flexible enough to provide key details for a single product or up to three, giving users the information they needed in the way that best suited their shopping process.
Clicking the “Compare” call-to-action opened the full compare tool, where users could view detailed specifications for their selected products. Nuanced product attributes were displayed, with applicable variants highlighted as icons for quick reference. Since many of these details were not common knowledge, an info lightbox provided clear explanations — outlining why certain features were suited (or not suited) for the user’s body type. This approach helped demystify technical differences and guided users toward more informed choices.
Beyond comparison, the tool also supported customization. If a user felt confident about a product, they could adjust options and add it directly to their cart from within the comparison screen, streamlining the path to purchase.