mobile images of website Maraise and its enhanced UX

eCommerce Solutions

Maraise is a boutique clothing brand with a focus on offering elevated basics that balance sophistication and simplicity. Inspired by French fashion and brands like Sézane, Sandro, Toteme, and COS, Maraise caters to a mid to high-class clientele seeking timeless pieces.

The brand's fondness for sophistication & simplicity extends to its brand experiences: Maraise aims to reimagine existing conventions to deliver intuitive and innovative shopping experiences. I partnered with their eComm team to contribute to the various UX/UI initiatives:

A mobile flow showing a product detail page with evolved variant pattern

Evolve UI patterns

Unifying fragmented product variants

A number of Maraise styles are produced in as many as 15 total product variants. The website resorted to displaying each fabric type as separate product listings to clearly differentiate color subvariants.

This fragmented experience made it difficult for users to browse all available options in a cohesive way, leading to poor product discovery and browsing abandonment.

3 separate product listings of the same style

Maraise sought to reduce abandonment rates by unifying & streamlining variant display.

The challenge was to explore ways to make variants accessible in a single PDP, while ensuring clarity and ease-of-use. Additionally, this component needed to be flexible enough to be accommodated in physically smaller patterns like thumbnails and quick view.

Mobile screenshots showing other websites with variant displays and interactions

Competitive research provided few references, so we needed a unique approach.

Research shows that when users can't easily compare variants without multiple clicks or page reloads, they are more likely to abandon the product altogether. Conversely, excessive or unclear product variants can lead to decision fatigue, resulting in delayed purchases or abandoned sessions.

The new variant pattern with various statesA flow showing the new variant pattern adapted to product thumbnails

A contextual pattern made variants easy to browse, reducing decision fatigue.

I designed a contextual pattern that progressively revealed colorways only when users expressed interest in the fabric. By collapsing less relevant information and highlighting only the nested subvariants, we maintained a clean and simplified display while ensuring all variant options were easily accessible. This method prevented information overload and kept the focus on user preferences.

The pattern can stand alone for less complex product structures, maintaining a consistent design language. It can also be adapted to be housed in smaller structures like thumbnails and quick view on PLPs.

The final design offered simplicity with flexibility, and performed well in usability tests.

Usability testing showed strong comprehension among users, who found the new design simple and efficient. Positive responses indicated that the solution significantly reduced the frustration caused by the fragmented product listings, with users praising the ability to browse and purchase more quickly and with confidence.

Mobile UI flow showing a Get The Look feature that enables users to view or add to bag the shoppable items in styling photos

Reimagine eComm features

Maraise sought to lift AOV by encouraging users to shop full outfits.

The goal was to simplify the process of adding complementary items to cart, encouraging customers to explore and purchase full looks effortlessly. The team aimed for a potential 26% increase in AOV based on research from similar Shopify solutions.

Research revealed the need for simplicity and seamless access to related products.

Customers were interested in styling potential purchases but could be overwhelmed by too many options; on the other side, they were more likely to abandon their search if accessing related pieces required extra effort.  These findings directly influenced how we structured the “Get The Look” feature to ensure it was both intuitive and effortless.

UI mockups of an earlier version of the Get The Look featureUI flow of an earlier version of the feature

The challenge was finding the balance between essential info & choice overload.

The design needed to encourage users to add multiple items to their cart without adding friction, distracting from purchase decisions, or compromising UX and expected functionality of co-existing features.

The solution lay in progressive disclosure: introducing information through context-dependent actions, ensuring that users only encountered additional options when they were ready to engage with them.

We aimed to minimize cognitive load but leave cues for more.

It resulted in a sleek, easy-to-navigate "Get The Look" feature with clickable targets. The targets enabled users to easily identify other pieces featured in the styled photos without leaving the current PDP. Contextual actions and well known iconography made it easy for them to explore those products or instantly add them to their cart.

Mobile UI flow showing a Get The Look feature that enables users to quickly add to bag all shoppable items in styling photos

Feedback indicated improved product discovery & increased likelihood of main purchase.

I recommended finding additional opportunities for improvement by leveraging user research and monitoring product performance. Consider:

  • pairing high-ticket items with lower priced accessories to improve likelihood of purchase
  • placing the feature where users find styling inspo
  • placing the feature in high-leverage locations like the cart to remove friction from adding items at the last minute
  • providing users the ability to manually style products with other pieces to show how products can fit into broader styles and wardrobes