Mix & Match Redesign

Time: 4 weeks

Role: UX/UI Designer at HashtagYou

Type: Responsive web design

Tools: Figma, Hotjar, Jira and Asana

Skills: Customer and competitor research, wireframes, mockups, prototypes

Context

Overview

Working on the Mix & Match redesign was one of the most rewarding experiences, as I could see how much it actually improved the user experience through the websites. I collaborated closely with different teams to define, develop, and deliver visual designs, prototypes, copy and illustrative assets. The goal was to improve the Mix & Match feature, a responsive web page to increase the conversion rate, usability and be flexible enough to work for all brands.

My role

I was the designer responsible for UI and UX, creating wireframes, prototypes, mockups, collecting copy and illustrations/icons. I primarily worked with project management to better understand the feature logic and also with the developers to collect feedback about what was possible to achieve. I created wireframes, mockups and prototypes to share the idea, design principles, and content strategy, helping conceptualizing ideas, gaining alignment, and driving decision making. The main focus was on mobile design, as 90% of our customers use smartphones to make purchases.

Design

In order to deliver this project and improve the user experience, the design process was divided into 4 steps:

Research: Focusing on understanding the user's pain points on the current Mix & Match from customer research through Hotjar videos and heat maps, and also how other websites/competitors deliver the same or similar feature, evaluating all the different practices applied and how it could work for our brands.
Define: On this step the main pain points were defined and where the focus should go as selecting the products, relation between products and discounts, and better explanation about how it works. Also mapping all possible user flows inside the feature and each brand need.
Develop: Creating wireframes to explore different solutions and evaluating them with the team, narrowing it down the options, creating mockups and prototypes to better understand which solution was more friendly to the customers and also the one that would improve the most the usability. On this step I worked together with the content team to gather the copy and illustrations/icons for the new design.
Deliver: Preparing the handoff for the developers and content team, with the final designs, prototypes, assets and guidelines.

Heuristic evaluation

We took the time to identify and document what we thought could be improved in the current Mix & Match page. Most of the points below are mainly focused on mobile, as it represents most of our customer engagement.

Feature photo: As it was the first thing the customers see on the page, this section could provide more information for them to be able to understand what the feature is and how it works.

Wishlist: The wishlist is usually used for products page and not features, It's even more clear when checking the heat map of this page, it had zero clicks -- so it's causing only noise in the screen, not very useful.

Reviews section: Mix & Match has been live on the stores for around 2 years and has zero reviews, even though it was one of the most profitable pages on the website. But why? When creating reviews, the customers post it on the specific products page of the purchased products, and not on the Mix & Match page -- so the reviews wasn't being used, causing more noise on the screen, and also potentially causing a negative impression for new customers.

Products selection: The current way to select the products for the Mix & Match is through a long list of product names, what can cause some pain points for the customers, as they need to scan on the list the product type and the product name -- there isn't a more visual way to select it.

Another point is related to the extra information about the products, it's only available once the customers actually select it, and not before it -- what would actually help them on their decisions.

Upsell products section: this section had two main problems on this page, first it was upselling products related to nothing that the customer actually was already interested on, and second it was a exit point for them to go and check single products (cheaper) than creating their own sets and increasing their cart value.

Results

After many rounds of reviews and iterations, we came up with a page designed with a sense of clarity, purpose and responsiveness across all platforms. Accessible navigation allows users to jump between product categories, easily change amount and remove products from Mix & Match, clear information about how the feature works and how the discounts are achieved.

It is such a rewarding experience to see a page I worked on going live and know that many new users will be visiting, interacting and purchasing their favourites products from this page.

View and interact with Mix & Match and Mini Mix & Match for AVA & MAY, and Mix & Match for FAYNT.