2021

2020

2019

2018

2017

2016

2015

2014

2021

a Multi-Payment Platform

UX & Interface Design

Green Feather

2020

a National Homebuilding Company

UX & Visual Design

KB Home

2019

an Assignment Photography Site

UX, Visual Design & Code

AtEdge

2018

a Multi-Regional Real Estate Firm

Code & Art Direction

North American Properties

2017

a Visual Marketing Calendar

UX & Interface Design

Atomized

2016

a National Youth Leadership Org

UX, Visual Design & Code

Boys & Girls Clubs of America

2016

an American Car Maker

Art Direction & Visual Design

Ford Motor Company

2015

a Multi-national Consumer Goods Co.

Visual Design

Procter & Gamble

2015

a Drive-thru Quick-lube Chain

UX & Visual Design

Valvoline Instant Oil Change

2015

#10

a Direct-to-Consumer Solar Company

UX & Visual Design

Sunrun

2014

#11

a Basketball Stats iOS App

UX & Visual Design

NBA Game Time

Boys & Girls Clubs of America

Older

Newer

Hybrid UX/UI
Design & Code

Marina del Rey,
California

Headquartered in

Atlanta, Ga.

Completed

2016

My role on this project

UX, UI, and WordPress Development

A place where teens can learn to develop their own voice

The Boys & Girls Clubs of America have been experiencing a reduction in teen participation over the years. Over the last year, they've made a sustained effort to engage these at-risk teens. This is in furtherance of that effort.

UX, Visual Design & Code for a National Youth Leadership Org

From Wireframes to Finished Product

I decided 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.

Try swiping left and
right on the images
to navigate.

Tap to Hide

Icon Sketches

Navigation Ideas

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

The Homepage

Down the page

Article View

Category View

Pages with a Submenu

Mobile Ideas

More Mobile Ideas

Wireframe: Homepage

Wireframe: Category Page

Wireframe: Article

Wireframe: Article with Submenu

Color Palette

Homepage

Down the page

Category Page

Another Category

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.

Down the page

Mobile Adaptation

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.

Try swiping left and
right on the images
to navigate.

Tap to Hide

Wireframe: Homepage

Wireframe: My Life, Selected

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.

Wireframe: Article

With Submenu.

Wireframe: Down the page

Homepage

Homepage, again

My Club, Selected

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.

My Club, Deselected

Category Page

Category Page with Submenu

Article

Mid-Article

Footer

Footer Link

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.

View the Website

I was responsible for everything
from conception to completion.

Older

Ford Motor Company

Newer

Atomized

Boys & Girls Clubs of America

2016

3,209 views

Like it?