IAN FARRELL
split-foil-squarespace-front.jpg

UX: Minted Split Foil

SOME PROJECT BACKGROUND

One of Minted’s most popular product types is foil-pressed cards, in which certain design elements and text can be constructed in colored foil rather than standard ink. Currently, there exists 5 foil colors, each of which are preselected by the MerchOps team with the card’s base color. As a user goes through a card’s product detail page (PDP), they can toggle through the base color options to see all of the foil options.

The current foil choices on the PDP page.

There’s been a lot of user feedback to support that customers like the foil options, but many users typically put in a special request to get a foil color that is different from the original preselection made by the MerchOps team. For example, if a card’s base color is ‘snow’ and the preselected foil color is ‘gold,’ a user might put in a request to have the ‘rose gold’ foil instead. The goal for the Split Foil project was to give users a way to choose their foil color as well as their base color in efforts to reduce the amount of special requests and ultimately expedite the user flow to conversion.

IMPLEMENTING THE NEW DESIGN

There were three main areas where the split foil redesign needed to be implemented:

  1. a card’s product detail page (PDP)

  2. a card’s customizer page (desktop)

  3. a card’s PDP and customizer page (mobile)

THE PDP PAGE

The key requirement on the PDP page was to mimic the color selectors for the base color that’s currently on the site.

Choosing base and foil colors on the PDP page.

We had to take into account that while foil colors are now an independent selection, not all foil options will apply to every base option. The MerchOps team makes the pairing decisions for base and foil colors, and based off of brand guidelines, certain base colors would be restricted to possibly 2 or 3 foil colors. If a user clicks on a different base color from a given base and foil combination, their foil selection might carry over if it’s allowed on their new base selection. In the case that the foil color doesn’t carry over however, their foil selection would automatically go to the default base and foil selection. Ultimately, the flow needed to show that hierarchically speaking, base color supersedes foil color.

THE CUSTOMIZER ON DESKTOP

Since the PDP page and the Customizer page have a lot of overlap in terms of selectors, the split foil redesign functions mostly the same on Customizer. The same rules apply for selection hierarchy, and the limit to foil options to particular base colors applies as well.

Choosing base and foil colors on the customizer page.

PDP & CUSTOMIZER ON MOBILE

The PDP page on desktop and mobile largely use the same components, but the customizer on mobile has some noticeable differences. The first version showed a horizontal stepped process where a user picks base and foil colors on separate pages.

The first mockup of the mobile customizer.

The initial problem with the first iteration was twofold. On one hand, if the desktop version is set up so that base colors could possibly default to foil colors originally not chosen by a user, it makes more sense to have both base and foil colors in one view to more explicitly see the foil restrictions for particular base colors. On the other hand, having base and foil separated into two will crowd the card selections, and having to go back and forth between base and foil to see how the card preview changes doesn’t make much sense.

Going forward, I decided to squish base and foil together to give the lower tabs more breathing space. Since a user’s card options carry over from the PDP, seeing both the base and foil color swatches is more successful to see real time changes to the card preview. I aligned base and foil colors on two rows to keep in line with how the PDP is structured. I also carried the color names over as well so users have both textual and visual context as to what they’re choosing.

Mobile versions of the PDP and Customizer page.

EXPANDING SCOPE: ADDING GLOSS-PRESS

While adding foil was in discussion amongst our CEO and associated teams, gloss-press was an idea that ran alongside foil in terms of what the Minted team wanted to add to the user experience and to conversion. The split foil project took precedence mainly due to foil already being an option on the site, so building out gloss-press concepts and pages could only be done after the UX for split foil was given off to engineers.

The gloss-press concept is still going through the design cycle, but it’s in its initial phase. Probably the biggest aspect so far with the gloss addition is that while some cards could potentially have foil-pressed and gloss-press as printing options, gloss-press can only be printed on cards with a white background. The primary use case then would be to show the flow of a user toggling between foil options and gloss options on a card that at least had a white base color option.

The flow of choosing between foil-pressed and gloss-press on PDP and customizer.

Like I said, gloss-press still has some ways to go, and it’s currently on low priority until split foil goes live on the site. But gloss-press and foil are widely similar projects, so it’s projected to be a pretty fast follow. More will be added once gloss-press comes back into the scene, but for now the team and I are waiting for split foil to be deployed. From there, we can take on the implementation of gloss-press and what ultimately that will mean for our users.