Boys & Girls Club of America



for the Boys & Girls Club of America

When Comcast and NBCUniversal teamed up with the Boys & Girls Clubs of America to transform the way their young members experience technology, they engaged Backpack to launch My.Future. The next-generation technology initiative personalizes the experience for each member through engaging project-based activities. My.Future helps kids develop skills to perform well academically, graduate from high school, become college- or career-ready, and prepare for the demands of a technology-driven society.

The site interfaces with Mozilla Backpack to allow Coaches to issue digital badges for Club Member achievements. The structure of the site allows lessons to be lead by Coaches for less experienced kids or be self-directed for the more advanced Club Members.



Club member experience

After a deep analysis of the client’s content and curriculum, we developed concepts for the site’s structure and experience. Here, we assessed possibilities for information organization and navigation. The result was a collaborative process between BGCA and our team to yield high-level wireframes and potential creative solutions that satisfy both the business and users’ requirements.

For My.Future, we sought to provide large clear blocks of content organized by as few navigational choices as possible. This straightforward approach made for a clean, relatively “flat” overall sitemap that had several way to get users quickly to the content they wanted.

As Club members complete activities, they can upload evidence of their creation to get credit for completion and earn badges. They can also check in around their community to be inspired by what other kids and clubs are doing. For Club members ages 8–14 we know this community is the key to motivating them to strive and broaden their minds to what's possible.




The wireframes were created as clickable prototypes that showcased the simple user flows and intuitive interface. After multiple iterations with the team, these prototypes were presented to club members for feedback to inform the final product design.


After conducting research with club members using our interactive prototypes, we shifted into visual design. Our team created a flat, colorful look that combines eye-popping illustrations with clean, airy layouts. Surveys with our end users helped guide the visual direction for the digital badges. The front-end is slick, responsive and lightweight. The back-end content management system was developed using Sharepoint.

In-Club Display

Throughout the process we were careful to keep in mind that Clubs are specific environments. We made multiple visits to Clubs to test the platform in action and make adjustments based on our observations. It became clear that their was an opportunity to build excitement around My.Future achievements even when kids were not in the computer lab. We designed a real-time display to celebrate the latest prodjects and badges from members.

Staff Dashboard Mobile App

Creating an easy-to-use mobile app for adult and teen club staff was a critical piece of the project. This app allows staff to monitor progress, assist with log in issues and award acheivements. They can also get tips and training on the spot. We made this component as fun and easy to use as the site itself.


Sean and his team are invaluable contributors in our efforts to provide a leading digital visitor experience to youth who visit Boys & Girls Clubs everywhere. They joined us as true valued partners during early concept design, participated in all formative evaluation rounds and through successive sprints. In the two months after launch, more than 17,000 members at 700+ Clubs participated in some way – a level of excitement that amazed us, and that we hope to grow with their continued contributions.

David Crusoe, Senior Director, Digital Youth Engagement & EdTech

[unex_ce_button id="content_p04s56zze,column_content_o9tlc1plp" button_text_color="#d56027" button_font="regular" button_font_size="20px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="1px" button_border_color="#d56027" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#d56027" button_border_hover_color="#d56027" button_link="/work/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Back to Work[/ce_button]