Customized Girl Redesign
At Customized Girl, our customers can use an interactive design center to add text, art, and images to custom apparel and accessories. You can change fonts, colors, sizes, and put any design on any item. You can also save your design.
This saving functionality is key. Using our design center, we can quickly create and save dozens of new designs into our gallery. For example, let’s say we notice Roller Derby is becoming more popular, and demand is increasing for Roller Derby tee. All we need to do is save a page full of Roller Derby t-shirts, and use Google Adwords to funnel that “Roller Derby T-Shirt” search traffic directly to our newly created landing page.
Now, a gallery page full of Roller Derby shirts is a pretty excellent landing page for that particular search query. If only all landing pages were as easy. As Customized Girl has evolved, it has become an increasingly complex machine. We aren’t just selling the ability to put text and art onto blank items. We’re also selling fully designed “Army Wife” t-shirts to army wives. For people searching for “Army Wife Tees”, customization might be a non-factor. And yet there is still a third type of customer: the person searching for “Softball Tees”, which might want to put their own design on a blank t-shirt OR maybe they are looking for a “Softball is Life” shirt for their granddaughter.
Essentially, we have three types of customers arriving on our landing pages through SEM ads:
- Customers who want to put their own design onto a blank item. (Example search: “custom t-shirt”)
- Customers who are looking for specific designs on items. (Example search: “army wife shirt”)
- Customers who could be either 1 or 2, and we’re not sure which. (Example search: “softball shirt’)
Satisfying these three types of customer with high quality, relevant landing pages was my mission in early in 2010.
This is what Customized Girl looked like at the time:
This was what a gallery page looked like:
Certain decisions were easy. People searching “Custom T-Shirts” needed a custom landing page highlighting our Value Propositions (Great Prices! Fast Shipping! Design Anything You Want!) and focusing on adding your design to blank items. These customers would need a navigation menu for our blank items (Men’s, Women’s, Kid’s, etc…)
People searching “Military Wife T-Shirt” would obviously land in the gallery showing dozens of military wife designs. The navigation menu here would be based on design. So the subcategories under Military would be Army, Navy, Marine, etc. It wouldn’t make sense to confront these users with a navigation menu for blank items, just as it wouldn’t make sense to confront our “custom t-shirt” searchers with a navigation for designs (in theory, they already have a design in mind by the time they get to us).
And again, we had a third usergroup that could go either way: maybe they’re looking for blank tees or maybe they want designs. These users would need some kind of hybrid navigation menu with both blank items and designs.
As you can imagine, it was not easy to reconcile these differences. Our programming team was fairly small at the time, which means we were focused on making changes is small increments, “baby-steps” if you will. I was trying to design solutions that require the fewest amount of major changes. With that in mind, my first breadboard mock-ups looked like this:
Clearly, it was rough in the early going. When I showed these to Brian, our Director of Technology, he suggested that the navigation was not consistent. I explained that we have different users who require different navigation. It was, by definition, inconsistent. He then expressed a desire for consistent navigation. I didn’t say anything. Then I thought about it over the weekend.
Of course, Brian was right. This was exactly the type of challenge that I love. We were in need of some creative problem solving.
Earlier in the month, Brian had been dropping hints about his appreciation of the 960 grid system. Our current site was only 780 pixels across. The problem with launching a wider site was that all of our other pages (shopping cart, FAQs, checkout) would need to be rebuilt. This certainly didn’t qualify as a “baby-step” adjustment. On top of this, our CEO wanted to see more value propositions throughout the site. In total, we needed a wider site, consistent navigation for an inconsistent set of users, more value props and a new, fresher look. All of these ideas coalesced in my mind during my daily commute one fine Monday.
I realized I could expand the width of the site to 960 pixels without having to rebuild most of our individual pages. If I used a diving board, and made it 780 pixels across, we wouldn’t even have to touch the checkout, FAQ, and other pages. Then, I could shift the diving board right, and add a consistent navigation menu to the left. In fact, I could add three navigation menus:
- Start with a blank item (lets you navigate by item)
- Start with a design (lets you navigate by design)
- Why shop with us? (value propositions)
The first two menus would be collapsible, which means if you were searching for an army wife t-shirt, we wouldn’t confront you with a menu for blank items. The third menu would be displayed at all times. Our new home page looked like this:
This neatly solved our landing page issues for customer types 1 and 2 (searchers for blank items and search for designs), but my favorite solution was for customer type 3 (the ambiguous shopper).
If you were searching “softball t-shirts”, and we didn’t know if you wanted to start with a blank item or with a design, we would split the diving board horizontally, and expand both the “Start with a blank item” menu and the “Start with a design menu”. See each example below…
Landing page for Customer Type 1 (they searched “custom t-shirt“):
(The above image was updated with the launch of our new landing page in May 2011.)
Landing page for Customer Type 2 (they searched “army wife shirt“):
Landing page for Customer Type 3 (they searched “softball shirt“):
