Our Favorite Product Customizers (And What You Can Learn From Them)

What are product customizers?

Product customizers are tools that enable users to personalize a product before purchasing. For example, they might enable monogramming, engraving, printed t-shirts, and embroidery.

We all know that feeling when you’re looking for the perfect product or gift for someone, and you want to add a touch of personalization to make it unique. That’s where product customizers come in. They allow customers to take a product and make it their own.

No wonder so many of our e-commerce clients are looking to expand their customization offerings to users. It’s no longer only the availability or price of products, but also their uniqueness, which makes them attractive to customers. In turn, driving online conversion and returning customer rates.

But product customizers are not created equally. Some are more stylish, simpler to use, and better integrated into the end-to-end online experience than others.

As software specialists, we are interested in the design and development of these personalization tools. How do they facilitate a great e-commerce experience and what we can learn from a range of personalization solutions across different industries?

Simplicity and style: Various Keytags Customizer

Various Keytags have a great example of a simple, easy to navigate, and stylish product customizer. Users are able to select from different colors and finishes, enter text, and select position and size. The options are designed so that there is limited scrolling on larger breakpoints.

The personalization journey is frictionless, and although you cannot edit directly from the cart page, you can view an enlarged image of your customization to confirm it is correct before checkout.

Limiting the customization positions and crucially the characters per text size, Various Keytags reduces the potential for user error. Also, ensuring that each custom key tag closely aligns with their design-led brand. By making the product image large, users can quickly switch between finishes, text sizes, and positions without confusion or onerous steps.

Granted, Various Keytags personalization options are more limited than other brands included in this article, which makes a clean UX easier to achieve. 

What makes a great product customizer?

A great customization tool should be rooted in your overall brand and e-commerce experience. Knowing that personalization is a growing trend and one that converts to sales, many of you are probably wondering how to differentiate your customization experience from competitors. Here is a short list of areas to consider when working to design and build an elevated customization experience: 

• Does your customizer support and extend your overall brand vision and strategy?
• Is your customizer simple to use? Can users modify and save customizations easily, at different points in the customer journey?
• Is your customizer seamlessly integrated into your end-to-end online experience? Have you considered what information will be provided to customers and fulfillment following checkout?

Customize but make it fun: Edie Parker bespoke accessories

One of our favorite product customizers is Edie Parker’s. The brand manages to execute a playful, stylish, and easy-to-use customizer that acts as an extension of its branding.

There are little moments of fun and magic throughout, without making the customizer feel burdensome. When you select a color, the color name displays alongside a little motivational/peppy saying. For example,  “You’re so chic!” and “Go get em’ tiger!”. The color name keeps it informative, and the saying adds an extra spark.

Why is the user experience (UX) of a product customizer important?

Creating a successful customization experience is not simply about providing customers with lots of options, the user experience is paramount. It is essential to provide discoverability and easy editing, without creating decision fatigue or being overwhelmed.

However engaging your customizer UI may be, thoughtfully designed UX is critical for enabling users to create their designs without friction, and ultimately add to the shopping cart. Conversely, a confusing or clunky UX could cause users to get bored or worse, frustrated, and drop out of the experience altogether.

Endless product options and clever UX: Custom Ink T-Shirts 

Custom Ink T-Shirts is a great example of hard-working, customizer UX. Thoughtful design enables a user to drill down into hundreds of options without losing the image of their customized design or the ability to step back or forward in the editing process. 

For example, each time a user selects a category e.g. artwork, then a sub-category e.g. emojis, all items in that category display. The user can select an item and modify it in many different ways. All these actions happen within the same modal, which makes it feel like a seamless transition from each step of the journey to the next.

The options are almost endless but the experience does not seem overwhelming. Re-selecting an item immediately displays the edit options for that item in the modal, and de-selecting displays the highest level categories. It is fast and simple to move between these. 

The Custom Ink tool is full of useful and elegant UX solutions to help guide users through the myriad options available. One example we particularly like is how the customizer marks which colors have already been used in the design previously. This means that users can easily keep their color schemes consistent. It also helps reduce the final price of the order as additional colors add to the cost.

Things to consider when designing and building a product customizer

There are many things to consider before starting to design and develop your own personalization tool. The product customizers we are featuring in this article make it look easy. But in fact, designing and building a customizer requires a lot of research and planning.

There is a fine balance between offering many options and a streamlined design experience. There are also business rules which will need to be considered.

For example, do you need to track inventory for decorations? If yes, how will your customizer provide that information to your backend or fulfillment system? If you go down the route of “anything goes,” allowing users to overlap, re-size, or recolor decorations, will that add to your production costs or allow customers to create products that devalue your brand? These questions should be answered up front to ensure you identify the right solution for your needs. 

One important decision is whether to go with a third-party solution or a custom build. Third-party solutions could save you money and time upfront, but may not satisfy all your business rules or how you anticipate scaling your business.

On the other hand, a custom-designed and built solution would be more costly upfront and to maintain. However, if designed right, a custom solution has the potential to exactly suit your needs and grow in line with your business 

Anything goes: Blank Snowboards

Blank Snowboards’ customizer is a great example of using a third-party application to meet your customization needs, quickly and efficiently. They provide a huge range of customization options (clip art, text, image upload, etc.) with very few rules.

Users are given a lot of freedom: to overlap decorations, position them at any angle, and add multiple decorations. Users can even upload images from many sources including Instagram, and they warn you if the resolution is not high enough to look good when printed. 

However, because Blank Snowboards use a third-party solution, there are no other limitations placed on the users’ creativity. This means that when an image is overlapped or positioned off the product, it is up to the user to identify the issue and resolve it. No warnings are shown to the user. For some brands, allowing users this level of freedom could cause issues for their customer service and fulfillment teams.

How to seamlessly integrate customization into your core offerings 

Now that you’ve considered your business rules and potential solution options, it’s vital you also consider how your customizer will function as part of your online presence. How will customers find your customizer? What are the customer touchpoints from start to finish of a customizer product purchase? How does your customization pricing model relate to your non-customized product catalog? 

The experience which surrounds the customizer is just as important as the customizer itself. Customers may be choosing between a customized and non-customized product and may need additional guidance to make the leap into a personalized product. Inspiration, saved design templates, FAQs, and explainer videos can all help to demystify the customization process. 

A masterclass in personalization: Nike sneaker customizer

It should be no surprise that Nike has designed a best-in-class personalization experience, which seamlessly integrates with their online store experience and elevates it. Nike’s customization experience is elegant, sophisticated, and fun.

It starts with a landing page “Nike by You”. Separately and showcasing Nike’s customization offerings, and matching content alongside customizer tools. There is a whole section of videos and tips to inspire and guide your personalization journey. 

Nike’s customizer tool has some wonderful UX and UI design details. In particular, we like how it interweaves inspiration (from celebrities, influencers, etc.) with your own saved customizations.

Each design created is automatically saved as a thumbnail in a separate tab to design inspiration templates. This enables users to easily return and edit their designs, or modify an existing template. For each sneaker, there are so many color options you could choose from that decision fatigue could set in early.

Having saved design inspiration at your fingertips, to modify without needing to start afresh helps to reduce being overwhelmed. In addition, any small design edit, however small, is saved as a new design, which can be shared with friends. Meaning users can flit back and forth between edits until they are satisfied.

For the customization experience itself, Nike does a great job of providing an easy-to-understand process. Users can choose to deviate from the linear steps by selecting an area directly on the product image. The UI design is minimal, with small, elegant buttons, providing the user with all the controls they need without cluttering the UI or distracting from the product images.

Customizers need careful consideration, but can be rewarding

Our experience designing and building bespoke product customizers has enabled us to develop perspectives about what best practices to consider when creating customization tools.

If you’re interested to learn more about the product customizers we’ve designed and built, check out our case studies for leading brands such as Stephanie Gottlieb and Stoney Clover Lane.

Here’s a summary of our top 5 best practices, as evidenced by the brands we’ve featured and our own customization work: 

1. Less is more
   1. Try not to overload users with options. If you provide lots of customization types, focus on designing a UX solution that supports these without crowding the user experience.
2. Branding is key
   1. Your customizer should be an extension and enhancement to your brand; from the initial requirements to the final UI design.
3. Know your options
   1. Define your product requirements and then look at different technical solutions. A third-party solution may work for you or not, don’t start a bespoke solution until you’re sure it’s right for your product. 
4. Start to finish
   1. Look at all customer touchpoints – from users accessing your site to fulfillment. The customizer will only be one part of this, so it’s vital you consider the whole journey. 
5. Keep it playful!
   1. Users seek out customized products because they are unique and fun to design. Keep that in mind when designing and building your own customizer.

Do you have a question about your own customizer? Contact us.

     

Small Planet

Small Planet creates award-winning mobile and web products. We provide full UX design, development, QA, team support, and product management services. Follow us @smallplanetapps.