Fanatics’ Apparel Customization Tool, Re-Designed from the Ground Up

Personalization has been shown to increase customer engagement and brand loyalty: we’ve found this to be especially true at Fanatics, where our mission is to help fans amplify their pride and create connections through sports.

One way that we help create a personal connection between fans and the teams they love is by offering customized fan gear. Our team, led by Csaba Halasz, Sylvina Tang, Tom Stephens, and Cale Peeples recently re-designed our apparel customization tool from the ground up. Along the way, we learned some valuable lessons about building an immersive tool with both desktop and mobile browsers in mind.

Configurator Product Team: Product Manager Csaba Halasz, Designer Sylvina Tang, Developer Tom Stephens, and Designer Cale Peeples

Defining the Design Challenge

Fanatics’ apparel customization tool has been around for a while, but we decided to revisit this feature because it didn’t stand out from the rest of our site. When browsing for jerseys, T-shirts, or hoodies, there wasn’t much of a distinction drawn between which apparel could be customized and which couldn’t.

Before the re-design: We wanted to streamline the experience on desktop and mobile browsers, as well as make the product stand out from the other items on our site.

When our design team took a closer look at our existing customization tool, it seemed like the controls to add a name, number, or logo weren’t displayed in close enough proximity to the product images and felt disconnected.

Our initial version of the tool was also designed with desktop browsers in mind, which made things a bit more complicated for mobile: customizing apparel was a two-step process where the user made changes and then needed to save them and go back a screen to add it to their cart.

Finding a Solution

Our team hypothesized that the key to creating a successful customization experience was finding the balance between the amount of guidance a user needs and the freedom to explore options and be creative. Even though official league and team branding guidelines put some limitations on the way logos and colors can be used, we believed we could create a unique, immersive experience for our customers.

Before we got to work, our team of product managers, designers, and developers outlined a few specific goals for the redesign. We wanted to ensure our new customization tool:

• Stood out from the rest of the site
• Created a consistent experience on both desktop and mobile browsers
• Met the branding guidelines established by our league and team partners
• Engaged and delighted our customers

Setting our Customizer Apart from the Rest of the Site

One of the biggest changes we wanted to make was the way our customized apparel stands apart from the other products listed in browse and search results on our site. We started by enlarging the primary product image and removing the list of items under “also viewed” in the right sidebar.

Our team started with a layout that was still similar to the existing product page and removed the right sidebar of suggested items. They also added some in-page navigation and controls, but didn’t feel like this went far enough to differentiate our customized items from the other products on the site.

Even though we had focused in on the apparel more, our team still didn’t feel like we had gone far enough. After further revisions, we ended up deciding to break from our styling standards and implement a full background image for the tool. This isn’t to say we completely revamped this section of the site: instead, we tried to balance new look and feel with the Fanatics brand.

Our team broke from our style guide by using a background image to create the analogy of an “in venue” experience and taking over the screen completely on mobile.

Optimizing for Mobile Browsers

One of the biggest barriers to creating a consistent experience for our users was having them complete multiple steps to customize an item using a mobile browser. Our team did a lot of revisions before arriving at the version that we put into production.

Now, when a user taps “customize” in a mobile browser, we take over the window and show a set of controls that function like a step-by-step wizard, but still allow the user to quickly change his or her selections. This is all done without the need to navigate to a new page.

Our team also thought a great deal about the placement of the controls, and arranged them in area that allowed our users to rely primarily on their thumbs throughout the process. This made a large impact in ensuring ease of use and provided a balance between guiding the user and giving them the freedom to explore.

Designing for mobile influenced some of the decisions we made about the desktop version of the tool, too. More specifically, we adjusted the look and feel of the controls, along with how we displayed the summary of options to the right of the product image.

Our team’s approach to mobile inspired some of their design decisions around controls in desktop browsers, too.

Meeting Branding Guidelines Established by Our League and Team Partners

One of the unique challenges our team faced was ensuring that we guided users within the constraints of branding guidelines established by our partners. Professional leagues and teams have strong brands: their names, slogans, and logos are recognized globally. For apparel to be officially licensed, there are standardized color combinations, aspect ratios, and requirements for logo placement that need to be followed, and so we needed to design with those constraints in mind.

But the ability to take officially licensed apparel and “make it yours” is one of the strongest appeals of our customizer, and this was apparent in user testing. More than anything, people were focused on the logos and how they appeared on the garments they were designing.

In response, we chose to display a summary of the options in a visual way, as well as maximize the amount of screen space given to the logo options for each team.

Delighting our Customers

Ultimately, we wanted to create a more immersive, seamless experience for our customers. Our existing customization tool didn’t stand out, and wasn’t especially easy to use—especially on mobile.

Since we’ve implemented our re-design, there’s been a noticeable increase in the number of people who have both discovered the feature and used it to create a unique item.

Looking ahead, we’re creating a separate landing page for our custom apparel shop, as well as designing the feature for our native iOS and Android applications. We’ve also got some exciting new customization options that we’re looking at rolling out in future versions. We’re looking forward to the innovations and improvements that solving new challenges related to those platforms brings.

Lessons Learned

Since we built this tool from scratch, everyone on the project worked very closely together from the beginning. Our engineers and product team were fully involved in the design process, and a variety of diverse perspectives helped build and ship a stronger feature.

Sometimes, it’s necessary to break from standard styles. It’s not easy to diverge from established conventions with respect to layout and color, especially considering the thousands of items that do follow this standard across our site; however, it’s necessary to break away from established style standards when it’s in the user’s best interest.

If you haven’t had a chance to try out our apparel customizer, you can see it in action at Fanatics:

Golden State Warriors Men's Design Your Own Pullover Hoodie

As the global leader in licensed sports merchandise, Fanatics is changing the way fans purchase their favorite team merchandise by partnering with top leagues, clubs and football (soccer) brands worldwide to offer the largest collection of timeless and timely gear from every pro and college team online, on your phone, in stadiums or on-site at the world’s biggest sporting events.