Completed in 2016Atlanta, Ga.UX + UI Design and Code
for
from
Boys & Girls Clubs of America
Zoom In
Zoom In
2016
Atlanta, Ga.
from 2016
— a National Youth Leadership Organization —
SPEED
QUALITY
PRICE
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 teens. They reached out to me to design and program a platform that would give those in the club a voice, while also feeling authentic enough to entice the most at-risk teens to join.
I was responsible for everything from conception to completion, including UX, UI, and WordPress Development.
Ok
Select another project, below.
↻ Start
2016
2016
2016
A place where teens can learn to develop their own voice
A place where teens can learn to develop their own voice
from 2016
UX + UI Design and Code Solutions for a National Youth Leadership Organization
A place where teens can learn to develop their own voice
A place where teens can learn to develop their own voice*
A place where teens can learn to develop their own voice
A place where teens can learn to develop their own voice
A place where teens can learn to develop their own voice
A place where teens can learn to develop their own voice*
A place where teens can learn to develop their own voice*
A place where teens can learn to develop their own voice
A place where teens can learn to develop their own voice
A place where teens can learn to develop their own voice
A place where teens can learn to develop their own voice
A place where teens can learn to develop their own voice
A place where teens can learn to develop their own voice*
Tap anywhere to enlarge the work
A1
A2
A3
B1
B2
B3
B4
B5
G1
G3
G4
G5
b18
Behind the Work
I'm a Hybrid Designer living in Santa Monica. To learn more about me and my process, click here.
B6
B7
B8
B9
*B10
Atlanta, Ga.— 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 teens. They reached out to me to design and program a platform that would give those in the club a voice, while also feeling authentic enough to entice the most at-risk teens to join.
I was responsible for everything from conception to completion.
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.
Another hint: Expand the slideshow to show the captions.
Tap to load
1
2
3
4
5
6
7
8
9
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 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.
From Wireframes to Finished Product
Try swiping left and right to navigate.
Another hint: Expand the slideshow to show the captions.
Tap to load
1
2
3
4
5
6
7
8
9
10
11
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.
Another hint: Expand the slideshow to show the captions.
Tap to load
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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.
