Boys & Girls Clubs of America is a National Youth Leadership Org..
Hybrid UX/UI
Design & Code
Santa Monica,
California
Design & Development
Boys & Girls Clubs of America
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 project would be in furtherance of that effort.
Build a place where teens can learn to develop their own voice
2016
I was responsible for everything from conception to completion.
1
User problem: Older teens had been experiencing a reduction in participation over the years and desperately wanted a place they could author their own stories.
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 project would be in furtherance of that effort.
Build a place where teens can learn to develop their own voice
UX, Visual Design & Code for a National Youth Leadership Org.
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 project would be in furtherance of that effort.
What solutions did I consider?
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 contextually cross-pollinate the content using similar and relevant links.
Try swiping left and right on the images to navigate.
Tap to Hide
Swipe Left
or use the arrows
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
Swipe Left
or use the arrows
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
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
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. My initial approach is shown above a student submission, below.
