MADE Product Configurator
Client
MADE Clothing Co.
Timeline
4 Months
2020
Role
UX Research, Concepting, Visual Design, Competitor Analysis, Product Digitization
MADE Clothing Co.
4 Months
2020
UX Research, Concepting, Visual Design, Competitor Analysis, Product Digitization
MADE Clothing is a small made-to-measure, custom shirting company based in Toronto, ON. At MADE, clients can design their shirts with a stylist by selecting from a range of collars, cuffs, fabrics, and contrast fabrics. These custom shirts are one of MADE's most popular products.
When the COVID-19 pandemic struck, MADE was forced to adapt quickly and move its catalog of customizable shirts online for the first time. To do this, I designed and oversaw the development of a digital Product Configurator, that would allow customers to design their shirts online.
Shopify was used to create the website, and the Product Configurator was built onto that.
Translate the educational, guided experience of customizing shirts in the brick-and-mortar store to a new fully digital storefront.
Example Screen from the MADE Product Configurator
We spoke with 8 of MADE’s existing clients to learn more about how our company’s services benefited them, as well as their pain points. We also spoke to them about how they shop at other online clothing stores.
“I come for your expertise...”- Clients really like the guidance they receive from MADE’s staff during the design process, and feel it increases their trust in the product.
“I’m too busy most weeks...”- Coming into our store wasn’t convenient. Many client’s worked extremely busy jobs and had trouble finding the time to make an appointment.
“I don’t trust myself...”- Clients felt they might make the wrong choices when buying shirts online because they weren’t knowledgeable enough about fashion and styling.
“I need to know what I’m buying...”- Many clients feel online retailers don’t provide enough information about their products online. More product information made them feel more confident about making a purchase.
To better understand the benefits and pain points of similar applications, I conducted a competitor analysis of 4 different online shirt configurators.
Please note that the names of the competitors have been removed.
Competitor Analysis Table
See PDF of User Personas
Throughout the analysis, I identified the strengths and weaknesses of our competitors. The best product configurators emphasized presentation, using well-illustrated icons and extremely realistic product images. These visuals were accompanied by educational content, such as descriptions and statistics that aid the user in making decisions.
As indicated by our research, many product configurators risk overwhelming their user by displaying too many options at one time. Slow UI, heavy use of jargon, and a lack of style advice also hurt several of these configurators.
As we identified during User Research, being unsure if the final product would match the website visual was a major pain point for our user. When an online retailer inaccurately portrays how a product looks, through bad product photography or renderings, it often leads to buyer's remorse.
At MADE, custom-made orders are non-refundable, so customers needed to know exactly what they were buying before it arrived. This meant we had to ensure all product visuals were extremely accurate.
.png)
Examples of early shirt renderings and models from the digitization process.
Because the products are customizable, it was determined that photorealistic 3D renderings of the shirts would be the most practical way of achieving consistent visuals. To do this, I scouted and hired a 3D artist, and worked directly with them for several weeks to develop an extremely accurate model of our shirts. After I scanned our entire collection of fabrics, we were able to apply the scans as textures onto the 3D models. This process involved painstaking attention to detail, as any incorrect proportions or improperly scaled patterns would lead to inaccuracy with the final product.
The resulting renders allowed users to swap out components (ie cuffs, collars, fabrics) during customization while maintaining perfect lighting and positioning. Using this method, MADE can now easily scan and apply new fabrics to the existing models to increase their digital catalog in the future.
Once I had a prototype together, I scheduled usability tests throughout the month. In total, I tested the prototypes with 7 existing clients and 6 outsiders who fit our demographic. All tests were conducted remotely due to the lockdown restrictions.
•Users have the educational resources they need to make confident, independent selections.
•Users can identify if particular customization will be appropriate for their event (ie wedding, party, etc.)
•The terminology is clear and jargon-free.
•Users will be able to navigate the configurator without assistance
User Feedback: Multiple users noted that they couldn’t learn enough about the fabric texture by just looking at the shirt. They missed having the ability to look at the fabric swatches close up, like they used to do in the physical store.
Design Iteration: A new feature was added that allows users to see a high resolution render of the fabric swatch in a new tab. A digital fabric swatch was created for every fabric, so that users could see the fabric in optimal lighting with a consistent ripple effect.
User Feedback: Many users didn’t realize they could interact with the configurator buttons at first. This led to confusion, with some users trying to move straight to the cart without making their customizations.
Design Iteration: Button designs were revised to look more clickable. They were given a more rounded corner radius, and a drop shadow was added to make it more obvious that they could be pressed.
User Feedback: Existing clients we spoke with noted that the fabrics on the website looked a lot less vibrant than they did in real life. This made them doubt the accuracy of the final product.
Design Iteration: In Adobe Lightroom, I re-examined all fabrics and colour graded them to improve their colour accuracy. The final results were much more vibrant shirts that better reflected their real world counterparts.
User Feedback: Our introductory text wasn’t helpful- many users told us that they skipped over it. Some users also found the directions confusing, and didn’t know where they should be starting.
Design Iteration: The introductory text was removed entirely. In its place, a single “Get Started” heading was added over the first set of buttons. This made it much clearer to users what they needed to do first.
Illustrated Icons with Descriptions
All customization options are represented by large icons, which feature clear illustrations or images. This way, the user always understands what they are selecting before they click. These icons are labelled so users can learn the option name.
The description of each customization option is displayed beneath the icons. These descriptions educate users about why they might pick one option over another, helping them to make more confident decisions.
Instant Visual Feedback
The product image immediately updates to reflect the user's selections. This confirms that a selection has been made, and gives the user a photorealistic representation of their final shirt.
Two Customization Paths
The configurator is separated into two distinct paths:
Recommended Styles takes out the guesswork, narrowing down the customization options to the ones a MADE stylist would recommend.
Design My Own allows users to select each component themselves for maximum freedom during customization.
.png)
.png)
.png)
.png)