IAN FARRELL
CU4-squarespace-front.jpg

UX: Minted CU4 Customizer

THE PROJECT

One of the grander projects I’ve had at Minted has been prototyping out the new customizer flow for online cards. Probably the main selling point (and also one of the main conversion obstacles) is the ability for a user to customize every aspect of their card, ranging from the style of text they can use to the color of envelopes or stamps they can add on as well. The user flow today goes as follows:

  • card PDP -> card customizer -> customizer front -> customizer back -> customizer envelope -> add accessories -> view cart

As it stands today, about the entire customizer takes place in one page, with a slew of customizing options clustered around a preview of a user’s ‘card-to-be.’

An example of the current card customizer.


MY ROLE

The customizer revamp (internally called CU4) had been a project already in the making prior to my arrival at Minted. Our senior designer at the time had been building out the pages and the flow, and my position in the revamp process was to link her pages into a workable prototype along with adding in transition/animation components to show a more sophisticated user flow in real time. I used Principle, a prototyping software, to build my prototype along with Sketch to add in any other design components that might’ve arisen in my process.

ISSUE 1: OUTDATED & STATIC

Probably the main issue that really nagged our team was that the current customizer is quite the eyesore. It’s one of those early projects in Minted’s lifespan that was coded out by an engineer without any UX perspective, and in turn, it looks fairly outdated and not up to par with other competitive sites. Having all customizing options encircling the card preview is a bit overwhelming, and it doesn’t allow for a very guided process towards conversion. Furthermore, while a user can customize different aspects of their card (front, back, stamps, etc.), the visual process remains pretty stagnant.

The current tabbed flow of Minted’s customizer.

The design revision going forward shows a more horizontal carousel mentality. The idea was to show a simpler, more transparent flow, where the user has an initial preview card with customizing options in a fixed, bottom-aligned bar. The thought process was to both keep similar visual aspects together in order for the user to have all customizing aspects in one defined area as well as creating a user flow that moved in a more familiar left-to-right pathway.

Moving through tabs on the new customizer.

ISSUE 2: EDITING TEXT

Editing text on the current customizer also contains its own oddities. The editing callouts and modals have the same outdated styles, plus the modal doesn’t do a very good job at showing updates unless a user physically exits the modal.

Editing text in the current customizer.

You can see that text changes are happening in the background, but the grey out due to the modal makes the changes barely visible. Since none of the changes happen within the modal, a user has to constantly apply changes and exit the modal to figure out what would work best for their card. The set up is quite the lag on a user’s time, task completion, and ultimately conversion.

With the new customizer design, the editing modal matches Minted’s current component library with updated fonts and elements. There’s no grey out either so a user can accurately see how their choices in the modal would affect their card preview in real time.

The editing modal for text on the customizer redesign.

ISSUE 3: SPECIAL REQUEST UPDATE & TOP NAV

Users on Minted’s site constantly interact with the ‘Special Request’ feature in the case that they might want to use a specific color or font that they don’t see as an option. It’s a step in the user’s flow where they can basically incorporate any custom design aspect imaginable given Minted’s capabilities. It’s a component used quite often, yet it doesn’t exist as a very noticeable callout on the site to date. The secondary nav, containing the different aspects of the card customizer as well as the special request call out, is too cluttered to give an evident hierarchy to the user, which is potentially a detriment to conversion as well.

The current special request flow on Minted’s customizer.

With the design revamp, having the card aspects (front, back, etc.) situated on the bottom of the page give more breathing room for the discoverability of the special requests callout including an updated transition of how to make a special request.

The new top nav and special request function on the updated customizer.

ISSUE 4: ADD ACCESSORIES & PROOFING

Once a user finishes editing their card in the customizer, they can choose add ons (rsvp cards, welcome cards, belly bands, etc.) to create a ‘card suite.’ From there they get a final preview of their card suite before finally getting to cart. Once again, the main issue mostly centered around the outdated look. The layout as well is somewhat funky with the accessory options being clustered on most of the page while the suite is fixed right and lengthens down given how many accessories are added.

Current flow of adding accessories after the customizer.

With the new design, the add ons sit on one line; as they’re added to a user’s suite, they transfer over to their card suite that runs parallel to the accessories. There’s a lot more uniformity with the layout, plus the transitioning into the adding accessories as well as proofing options page decreases a good amount of user lag.

The revamped flow of adding accessories to a user’s card suite.

WHAT TO EXPECT NEXT

At the moment, the customizer redesign is still very much in its early stages, and since this is only the first round of buildout and prototyping, it’s fairly unlikely this exact version will carry over to the final design. The customizer is a huge aspect of Minted’s conversion flow, so it’s not a surprise that the customizer redesign has a lot more hurdles to cross and a lot more stakeholder approvals to nab down before it gets anywhere close to going live. With that said though, the redesign has a pretty solid base, and while we’ve just begun on the project, it’s pretty exciting to see such a growth in potential as to what the customizer can really do. Going forward, the team and I accomplished step one of the process, and it’s a safe bet that we’re all very excited to work through the redesign to give Minted users a smoother and more polished experience.