2021

UX & Interface Design for a Multi-Payment Platform

Green Feather

2020

UX & UI Design for a National Homebuilding Company

KB Home

2019

UX Design & Code for an Assignment Photography Site

AtEdge

2018

Code & Art Direction for a Multi-Regional Real Estate Firm

North American Properties

2017

Product Design for a Visual Marketing Calendar

Atomized

2016

Design & Code for a National Youth Leadership Organization

Boys & Girls Clubs of America

2016

Art Direction & Interface Design for an American Car Maker

Ford Motor Company

2015

Product Design for a Multi-national Consumer Goods Co.

Procter & Gamble

2015

Responsive Design for a Drive-thru Quick-lube Chain

Valvoline Instant Oil Change

2015

Responsive Design for a D2C Solar Company

Sunrun

2014

UX + UI Design for a Basketball Stats App designed for iOS

NBA Game Time

Boys & Girls Clubs of America

Headquartered in

Atlanta, Ga.

Completed

2016

My role on this project

UX, UI, and WordPress Development

Hybrid UX/UI

Design + Code

Marina del Rey,

California

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.

Design & Code for a National Youth Leadership Organization

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.

Ford Motor Company

Atomized

Boys & Girls Clubs of America

2016

2,959 views

Like it?