Mission Bit rebrand and website design

Defining a new brand and putting it into action with a non-profit website rebuilt from the ground up for an optimized digital experience

Additional credits

Mission Bit is a non-profit 501(c)(3) based in San Francisco that offers free computer science classes to youth of color in the Bay Area. After completing a comprehensive rebrand, including brand strategy, brand guidelines, logo, and brand training, we wanted to help Mission Bit put their new brand into action in its most comprehensive and widely available touchpoint: its website.

Brand Strategy
Branding
Content Strategy
Design System
Digital Experience

Revealing Mission Bit’s brand personality and laying a solid foundation

We began with extensive research and stakeholder interviews, including students. Our rebrand strategy considered three key audiences: students, adult allies, and donors, to maximize the impact of the rebrand. 

The Mission Bit team chose a concept called “Embracing Diversity,” which celebrates the unique fun and vibrancy that differentiate the organization and its team. Colorful but credible, with hand-drawn accents and all the personality of a fast growing, mission-driven group. We developed a new logo, brand guidelines, and spent time showing the Mission Bit team how to execute the brand on their own.

No items found.
No items found.

A thoughtful, comprehensive design system informs beautiful and effective design 

With a solid brand foundation built, we relied on a strategic north star approach to design, develop, and deploy the new website. Every color choice, animation, and click was carefully considered to stay true to Mission Bit’s brand personality and to prioritize end user experience to maximize impact. Photographs of students and volunteers are featured and student stories, the main driver of both enrollment and fundraising, feature prominently throughout. To accompany the new visual design, we collaborated with Mission Bit to refresh copy, carefully considering hierarchy and prioritizing usefulness for Mission Bit’s identified audiences.

No items found.
No items found.
No items found.
No items found.

Considering user personas and user journeys in digital experience 

Building on the branding and logo work we did with Mission Bit, we used the personas, research, and positioning we created to consider user journeys through Mission Bit’s website and how to message efficiently to its key cohorts. We remapped and reconsidered the architecture and flow of the site from start to finish to ensure every end user can find the information they need quickly and with minimal barriers. This included fundamentally reconceiving the courses and registration pages for students, streamlining the journey for potential donors, and creating richer, more informative experiences for adult allies.

No items found.
No items found.

Pristine development for an impactful big reveal 

To close the digital loop and streamline the process while ensuring the highest quality, we relied on our expanded capabilities in development to put the designed site into action. With critical donor dollars at stake and professionalism at the core of what Mission Bit wants to convey, a clean rollout was crucial. We collaborated closely with the Mission Bit executive team to complete development, synchronize the back end of the site with Mission Bit’s established third party vendors and services, and hand off the site for it to manage and expand as it forges ahead into its critical next stage of growth.