Mangisi Underwear web site

I had the privilege of creating the website for Mangisi, a San Francisco-based business selling organic underwear, with plans to expand to other clothing items. They wished to showcase their products on their website, as well as let customers buy them directly. Mangisi wanted to promote their eco-friendly products as chic, sexy, yet clean and simple, just like their products.

This is the first project where the design was done by someone other than me. The team behind Mangisi already had a mockup of their website when I came onboard (they have a dedicated graphics designer, and needed someone to “translate” it to website form).

This was a doable design: it was clean and simple, with good use of greyscale to contrast with the color of emphasis for this site (for the curious, the color is Pantone 200C). The emphasis color is used for headings and the “above average” tagline, which, by the way, really is the tag you’d find on the underwear themselves (pun was unintended). Overall, it was a usable, sleek design. However, I was told it wasn’t final, though the overall layout was to remain the same over time.

The second version of the mockup was, to say the least, more eye-catching:

Mangisi has a photo session done in time for the second mockup, and a bigger, different model photo now graced every page, along with a larger block for the main text. The homepage received the largest makeover, and remained for the final version. Compared to the first version, this was bolder, more stylish, and more riveting.

Too riveting, in fact. The sight of a young, well-built, and topless man strutting underwear on every page eventually generated questions within the Mangisi team about target audience, in regards to age, physical build and sexual orientation. Personally, I didn’t mind, but then, I’m a 20-something straight woman, so make of that what you will :).

The third and penultimate version of the site saw the removal of most of the model photos, as well as the shrinkage of the main content box on the left, after I had brought up the difficulty of text-wrapping in the second version.

Only the Events page retains a photo of the model; on the other pages except those related to shopping, the right side of the page is now blank. This space was reserved for showcasing Mangisi’s products during shopping, with no model showing off the underwear. In addition, the tagline “Organic Cotton Underwear” was removed, and the “Above Average” pink tag changed position.

This version was mostly preserved for the final version of the site, with the exception of the font. The mockup used a stretched version of Helvetica Neue. I could have gone with a font-replacement method such as sIFR or Cufon, but decided against it and went with normal Helvetica and Arial as the backup font:

Another major difference is the use of a dark grey background for the products’ images. Because the underwear were all white, a white background would make things hard to see, so with permission I changed to a dark gray background.

The first public version of the site launched in mid-July 2009. The shopping platform for ordering Mangisi’s products, Magento, was integrated a month later, marking the official final launch.

Overall, it was a fun site to design, not to mention that I could get a few giggles from friends and colleagues regarding the nature of the site (it’s an underwear site, what’s not to like :)). There’s still a lot of potential for the site to grow, especially when the business expands its product line and work on its marketing and PR. The Mangisi team has another idea in the works, so stay tuned for details about that!

Technical Specs

XHTML/CSS, PHP, Magento for shopping, Photoshop for some of the graphics