B2C
B2C
B2C
E-commerce
E-commerce
E-commerce
Feature redesign
Feature redesign
Feature redesign

Mix & Match redesign

UX/UI Designer @HashtagYou

Mix&Match is one of the most profitable channels in our e-commerce business B2C, where customers are able to create their own bundles and receive more discounts.

  • Platform: e-commerce responsive website.

  • Skills: Competitors research, wireframes, prototypes and pixel perfect design.

  • Tools: Figma, Hotjar, Jira and Asana

Context

Overview

Revamping Mix & Match was a rewarding journey, enhancing user experience on our top-performing shop channel. Collaborated cross-functionally to design and deliver a responsive, brand-flexible page, boosting conversion rates and usability.

My role

As the solo UI/UX designer of the project, I led the creation of wireframes, prototypes, and mockups, collaborating closely with project management and developers. Emphasizing on mobile design, addressing the needs of 90% of our smartphone-using customers.

Process

Throughout the redesign, these steps served as a guide, but it wasn't a linear process. Constant interactions and iterations with the team were key to refining the Mix & Match experience.



I analyzed user pain points via Hotjar and competitor insights. And identified as prioritized issues, mapped user flows, and clarified product-selection processes.





Iteratively created wireframes, collaborating with the team to assess and refine solutions. Produced mockups and prototypes to optimize user-friendliness and usability. Worked closely with the content team to integrate copy and illustrations/icons.





Compiled comprehensive guidelines, delivering final designs, prototypes, and assets to developers and content team for seamless implementation.

Heuristic evaluation

We dedicated time to pinpoint and document potential improvements for the existing Mix & Match page. The following points predominantly emphasize mobile enhancements, considering it as the primary platform for our customer engagement.

Enhance first impressions

Elevate the feature photo to provide clear information, ensuring customers understand the feature and its functionality.

Remove Wishlist: Typically associated with product pages, the wishlist section on features adds noise without utility, heat maps reveal zero clicks.

Remove reviews

Despite Mix & Match's profitability over two years, it had zero evaluation. Our customer's behaviour was to write reviews on specific product pages, and those didn't reflect on Mix & Match, creating noise and potential negative impressions for new customers.

Streamlining selection process and enhancing information accessibility

The current method involves a lengthy list of product names, causing potential pain points for customers who need to scan for both product type and name. A more visual selection method is needed for improved usability.
Product information is only visible after selection, hindering customer decision-making. Providing this information upfront can facilitate more informed choices.

Remove targeted upselling

The section faced two primary issues. Firstly, it upsold products unrelated to the customer's current interests. Secondly, it served as an exit point, directing customers to check single, potentially cheaper products rather than encouraging the creation of custom sets, limiting cart value growth.

Layout

When planning our layout, my priority was to maximize the product gallery's impact. By adding vivid product images, simplifying product selection, and improving category navigation, we ensured a seamless experience for our customers, allowing them to effortlessly scan through our diverse offerings.

Dynamic messages

To enhance transparency and provide clear information about our discounts, we incorporated details not just in the banner but also within the feature cart. The dynamic feature showcases the progress toward the next discount, adjusting based on the quantity of products selected. This ensures a dynamic and informative experience for our customers.

Cards crafting

When crafting the cards UI, my goal was to offer users enough information to recognize and understand each product. The detailed view also showcases similar products, making it easy for users to pick items that match their taste. Crafting the UI for selection was not just functional but also an enjoyable exploration to think how we could better fit the information on a useful way.

Micro animation

To address potential confusion in the Mix&Match feature, where the bundle basket is separate from the shop basket, we implemented a user-friendly solution. On the web, customers can now see a clear list of selected products on the right as they choose them. On mobile, where space is more limited, the list is tucked into a dropdown. To enhance clarity, a subtle micro animation highlights the product's selection, indicating where it can be found within the experience.

Results

After numerous review cycles and iterations, we've crafted a page that embodies clarity, purpose, and responsiveness on all platforms. The accessible navigation facilitates seamless transitions between product categories, enabling users to adjust quantities and remove items from Mix & Match effortlessly. Clear information on the feature's functionality and discount mechanisms enhances the overall user experience.



Launching the page is a rewarding experience, envisioning new users exploring, interacting, and making purchases within this carefully crafted environment. I'm excited to see the impact it creates.

Explore the Mix & Match feature on the AVA & MAY website.

WORK

WORK