Purpose
As a platform for sharing stories, MyClubMyLife.com was poised to create an experience that would excite teens at the prospect of seeing their work published, since neither writing nor sharing writing comes naturally for them at that age.

early sketches

Try swiping left and
right to navigate.

Hint: Expand the slideshow to show captions.

Tap to load

No.001

Icon Sketches

No.002

Navigation Ideas

Since the site is myclubmylife.com, an emphasis was placed on segmenting those two sides at the infrastructure level.

No.003

The Homepage

No.004

Down the page

No.005

Article View

No.006

Category View

No.007

Pages with a Submenu

No.008

Mobile Ideas

No.009

More Mobile Ideas

I discovered pretty early on that the best way to segment the content was to use two separate navigations, not only establishing a reference point for the domain name, but also creating a clear distinction between life at the club, and life outside of the club.

The goal was to then cross-pollinate the content using similar and relevant links.

From Wireframes to Finished Product

Try swiping left and
right to navigate.

Hint: Expand the slideshow to show captions.

Tap to load

No.001

Wireframe: Homepage

No.002

Wireframe: Category Page

No.003

Wireframe: Article

No.004

Wireframe: Article with Submenu

No.005

Color Palette

No.006

Homepage

No.007

Down the page

No.008

Category Page

No.009

Another Category

No.010

Article

When designing for teens, you've got to be bold and edgy to keep their attention, but also create a meaningful experience that comes off as credible among other popular destinations like MTV, BET, Tumblr.

No.011

Down the page

The Mobile Experience

No.001

Wireframe: Homepage

No.002

Wireframe: My Life, Selected

No.003

Wireframe: My Club, Selected

The dual navigation created an interesting dynamic on mobile where you're able to scroll and compare both menus at the same time.

No.004

Wireframe: Article

No.005

Wireframe: Article

With Submenu.

No.006

Wireframe: Down the page

No.007

Homepage

No.008

Homepage, again

No.009

My Club, Selected

No.010

My Life, Selected

The colorful panels on the left and right collapse as the user scrolls each page, revealing ad spots that highlight specific pages, links or upcoming events.

It's neat, but it's also helpful that the categories collapse into a functioning sitemap that is accessible on all pages.

No.011

My Club, Deselected

No.012

Category Page

No.013

Category Page with Submenu

No.014

Article

No.015

Mid-Article

No.016

Footer

No.017

Footer Link

Try swiping left and
right to navigate.

Hint: Expand the slideshow to show captions.

Tap to load

illustrations

artwork challenge

Another way of engaging teens, especially those who might still not feel comfortable writing, was the concept of recreating the club logo using the materials around them. I felt that this would create a fun challenge with a long shelf life, so I created a spot for those pieces to cycle on the homepage.