A T-Shirt Shop – How Challenges Make Beauty

A T-Shirt Shop – How Challenges Make Beauty

 

A midst more professional work, I spent a couple of days over the weekend putting together a t-shirt shop online.  While the site claimed it offered templates, the build was virtually from scratch.

This writeup illustrates a tale: that design is more beautiful when you can understand the problems it had to solve.  The constraints make design.

Project Summary:

The T-shirt design was mine.  So is the writing on the site, which is meant to be light-hearted and a bit funny as it focuses on a very low-brow topic. The site layout has been heavily modified by me, including the architecture of how products are organized.  I created all of the icons and buttons, and the left navigation from scratch.  The product offerings were also mine. So like I said above, “virtually from scratch”.

And all of this was accomplished in 4 days.  Well, not the t-shirt design, just the site.  The T-shirt design, that was another week of work on-and-off. 

Designing Something Cool!

See the site: www.cafepress.com/drinkfest

Project Details:

Why a ‘Shop’:

Every couple of years, I am asked to put together a t-shirt design, and same challenge arises in the form of a question:

“If we order 15 women’s smalls, among the various other sizes, will we really get the re-coup the cost? Or will people back out and we are stuck with shirts no one wants?”

 

Thankfully, I am just the designer, not the person getting commitments and fronting the money because invariably, the answer is “no”.  Somehow the sponsor would end up with a couple extra shirts at the end that no one wants. I picked on small female sizes in this example because it certainly isn’t men’s large size that are ever left – that is the first one to sell out, perhaps because people are more likely to wear a shirt too big than too small.

Since most of these shirt design projects are for fun and not for profit, whoever fronted the money would be at a loss on the whole project.  A shame really.  Had the person planning this project instead planned to make a small conservative profit, then then they would have at least broken even!

This would have spread the risk among every shirt sold.  (Sorry to get geeky, I have a finance background!)

Designing Something Cool:

Designing Something Cool!

So first came a design.  Since the e-commerce site is dedicated to the design, I won’t bore you with the details of what it means, why it was designed, etc.  I encourage you to check out the site though, which has great information on each page about the design and the event around it.

What is this Shop?

Well a couple of years ago, I heard there were places online where you could set up ‘shop’, a virtual online e-commerce presence on the platform of a more major site.  This essentially meant that main site would do the transaction, printing, and shipping.  You simply designed merchandise, drove people to the site, and collected profits.  Zero monetary risk as described in the above paragraph.  I love designing shirts, but rarely get the free-time to.  So I jumped at a chance to design a shirt, and quickly suggested this online solution.

Setting up Shop:

Setting up the shop was much tougher than I expected.  It just goes to show how hard cloud-services work to make the user-experience of their sites so polished.  I used a company called CafePress, who have been around for over 10 years.  But I had to work with an outdated CMS that forced constraints that were challenging to work around.  No site set up could really look good or unique without significant work.

 

A Challenging Design is a Beautiful Design:

Close up of the site

Below are some bullets to explain the effort put in.  They may seem critical, but in truth, they are simply to illustrate the effort put in to make a rather simple, nice looking site I created. I am proud to have overcome system limitations while working within their surprisingly tough constraints.  Design is more beautiful when you can understand what problems it had to solve.

  • Very limited to certain template layouts
    • I love a good template.  They can save time and effort and help novices learn.  But in this case, they forced users to look less than professional.
    • Working around the templates was tough, and described in some detail below.
  • Very challenging to configure and design a site when a CMS is poor and outdated
    • No AJAX, had to wait for every page to load a new dialog screen or popup
    • Clicking on multiple items into new tabs would break the editing.  Your code was applied to the wrong page
    • No rich-text editor.  It was all hand-coding HTML and CSS into small form fields
  • Hand-coded HTML / CSS to overwrite system limitations of amateurish templates
    • They had some CSS access.  There was a CSS file inaccessible to me that was meant to overcome browser limitations.  But the Webkit styles were hard to overcome with standard CSS hierarchy.  I had to use the !important code, which is usually bad form
  • Short-code of CMS proved problematic
    • The system used a bit of shortcode to create a left-side navigation.  Problem is, that code did not work at all.  The template they provided was actually broken!  So I manually re-created the function with a simple list and hyperlinks.  My offerings are small, so thankfully wasn’t too troublesome.

Screenshots of Site:

Here are a couple highlights of the site.