Grungy Gentleman

Grungy Gentleman was transforming its growing blog into an innovative men’s publication and creative house, aiming to redefine the cookie-cutter industry of men’s fashion publications.

My work evolved Grungy Gentleman into a respected brand and publication with creative partnerships, its own fashion line, increased user engagement, and higher ad revenue—leading to designing a Spring collection for Dickies and covering European Fashion Week in 2012.

Research, Strategy, Branding, UI/UX & Web Design

 
 

Audience

 
 
 

Urban Trendsetting Men

Fashionable, trendsetting men, with a little edge, come to the site looking for men's fashion, trends, and exclusive collaborations.

 
 
 

Branding & Identity

 
 

Logos

Based on the name, Grungy Gentleman, I wanted to create a mark that was a bit rough, yet refined. What came from that exploration were strong logo variations that could be used together or independently. Based on the logo direction, a variety of web elements were created.

 
 
 
 

Spotted at Fashion Week

The online publication introduced its own fashion line. As you can see, the logo mark is versatile and recognizable enough to be used as a patch on this sharp baseball jacket.

 
 
 
 

Styles & Typography

The goal was to bring the pleasure of reading a magazine online, so GG needed typefaces that could bridge that gap. Gotham was chosen for headlines because of its sturdy, geometric characters. Georgia was chosen for body copy because it's a beautiful serif typeface that reads well on all screen types and works well for long-form body copy.

 
 
 
 

Custom Web Elements

Working with the angled look of the category tags, custom web elements were created for use throughout the site.

 
 
 
 

Competitive Benchmarking

 
 

Other Men’s Fashion Publications

Before starting on the website, we explored some of the well-known men's publications doing something that GG aspired to. GQ, Esquire, and Details all had a similar web presence. This allowed us to see how we could differentiate the new GG site.

 
 
 

 

Web Design & User Experience

 
 
 
 

Original Blog

When we began the Grungy Gentleman redesign, this was the website. The site had a large audience, but lacked an engaging user experience. Banner ads took up prime real-estate, copy was hard to read, and the overall design direction was confusing and inconsistent.

 

Site Goals:

  • Mobile-First/Responsive
  • Cohesive Branding & Design System
  • Increase Engagement Metrics
  • Increase Overall Usability
 
 
 
 

New Responsive Site

The visual direction of the branding and the GG articles helped to guide the site design and interactions. The responsive site cohesively incorporates the new branding as well as creates an enjoyable reading experience — one very similar to picking up an actual magazine.

 
 
 
 
 

Homepage

Large, gridded images were used to bring features to life. The header  was used to display the latest feature, while the rest of the grid contained paid ads, social media, and a patchwork of featured categories.

 
 
 

Seamless Ads

Grungy Gentleman had a ton of ad relationships in place already, so it was a challenge to see how we could incorporate them into the new design without haplessly putting them in random places. 

We decided to seamlessly incorporate them into the site design, much like a magazine would. There were three different ad sizes that could be purchased and easily added to the design without compromising the experience.

 

 
 
 
 

Defining Categories

In order to provide a better user experience, we needed to hone the categories and navigation. We took titles like "The Grunge" and "Mixtapes" and turned them into more recognizable categories. 

After assessing the current articles on the site — and discussing the future of the publication,  we determined that there were 6 different buckets that each fell into. We used those categories to create color-coded tags for articles, making it visually easy for users to "see" categories. 

 

 
 

Category Landing Pages

Each landing page in the navigation is populated by articles tagged with that specific category tag. The homepage is a collection of featured articles from all categories.

 
 
 
 

Article Pages

Article pages had the ability to have a large image carousel header or a single image or video. Each article was created to have an editorial feel with a big focus on imagery. 

 
 
 

Image Hot Spots

Images within articles have the ability to feature "hot-spots"  which allow points to be placed on the x/y coordinates of the image. These offer a pop-up link to an item's web page or to be used to notate specific information on each item within a photo. 

This works great for articles that feature curated articles of clothing and worked great for affiliate partnerships ($$$).

 
 
 

Post Launch Results

 
 
 

10K+

Average Monthly Visitors

 

3+

Pageviews/session

 

3+

Pageviews/session

 
 

Press & Collaborations

Collaborations with Del Toro Shoes, Kiel James Patrick, SINGER22, Dickies and launching GG's own fashion brand

 
 
 

 

Wanna get your project started?

 

 

← Previous —————— Next →