BLACK BOYS CODE

WEBSITE DESIGN & DEVELOPMENT

Black Boys Code is a national nonprofit organization providing Black youth with coding, robotics and digital education through free programs, mentorship, representation and community. It operates across Canada and the United States and has recently added a Girls’ program (Black Kids Code).

Design and development of three interconnected websites

We worked with the organization to redesign and develop its Canadian, US., and Girls’ program websites as a coordinated family of sites designed to expand and optimize on its showcase of programs and locations, as well as its volunteer, mentorship, and sponsorship opportunities. 

We created the Canadian Boys’ site first and defined a design system including global elements, components, colour palette, typography, iconography and photography. We then adapted the design system for the Girls’ site using its own colour palette and imagery. 

Dynamic, fully interconnected system

Providing current educational programs is one of the core pillars of the organization. As such, adding and maintaining program listings in an efficient manner was a key objective in development. 

To accomplish this, we built a robust dynamic interconnected system right into the heart of the websites. This fully integrated system seamlessly bridges programs, dates and locations. On the front end, this makes finding local programs intuitive and efficient for clients. On the back end, the system interface makes adding new programs or locations stress-free and effortless for administrative staff with minimal training. 

VISUAL & TECHNICAL DESIGN SYSTEMS

Upon launch date, we also developed a comprehensive design system guide documenting the global elements, components, logo use, colours, typography and imagery. We also produced technical guides, giving the client practical reference and guidance for maintaining a consistent look and feel as the sites update and grow.

Throughout the project, we worked very closely with the client’s communication team—from input on the site architecture and navigation, to SEO and content, close attention was paid to ensure results consistent with the organization’s technical objectives, mission and brand look and feel.