Foundation started out as an internal tool to help our team build cutting edge applications for our clients more quickly. Little did we know, it would blow up to be one of the most popular open source projects ever, accelerate the adoption of responsive web design, and power hundreds of thousands of brands all across the world. We're proud that Foundation has become a leading voice helping shape where the web is heading. However, through our constant conversations with students, the community, and Yetinauts, we discovered that many users were not harnessing its full power.
A Clear Purpose Drives Meaningful Design
So when we asked ourselves, 'What's next?' Giving users more access to Foundation's power was front and center.
Of course, it will always be important to keep growing the power of Foundation to fulfill ZURB's mission of changing the way people design connected products and services. However, to get there we realized we needed to empower a new generation of web developers to engage with the platform so more people can contribute to, and benefit, from its power.
In short, we wanted to make it easy for anyone to quickly and easily build world-class web products, and share their best practices so the entire community can grow from their hard-won successes.
The Right Challenges Frame The Right Conversations
There were some BIG challenges.
First, only a small subset of users were taking full advantage of Foundation's power. Our client work showed that this was a problem many companies struggle with, and few solve well.
Secondly, sacrificing robustness in the pursuit of learnability was out of the question because what makes Foundation special is that it is the world's most advanced front-end framework.
And finally, the experience of using Foundation needed to stay a focused one. Through the years, client after client have expressed how they tried to serve multiple audiences and ended with a splintered, compromised experience they need our help to re-strategize.
Design Insights Reveal User Behavior and Drive Bold Decisions
To solve these challenges, we did what we do best and got outside the design bubble to talk to users. Through these conversations, we found pivotal Design Insights:
- When users are able to quickly find code snippets that closely match their project type, they are much more likely to adopt Foundation into their workflow.
- When technical contributors in the Foundation community are able to contribute using public repositories rather than proprietary platforms, they contribute with higher frequency, and with a greater sense of ease, transparency, and power.
- Because of the breadth of project types users work on and the infinite nuances in each, components that were flexible are more likely to to used by a larger audience.
- Because users typically look for components during their build process and there is scarcity of time, only components that immediately fulfill a need with minimal effort are used.
- When new users of Foundation saw examples of components built with Foundation, they understand the product better and start incorporating it more quickly.
Opportunities Bridge Design Insight and Design Innovation
With these insights in hand, we found key organizational strengths that would drive the product direction. Our diverse client work gave us a treasure-trove of the most common and up-to-date web design patterns. Internally, there is an amazing and committed Foundation community ready to support the tools they love. And within the framework itself, styling was largely done on a system-wide scale, which lent easily to creating assets that were transferrable without breaking styling rules.
Powerful Building Blocks Turns Learners into Pros, Pros into All-Stars
After weeks of ideation and prototyping, Foundation Building Blocks was launched. Building Blocks are designed to be quick, plug-and-play components meant to speed up any project. Because users need to see how they would fit, they're organized by how they might function within a particular project. Users can promote and find the best Building Blocks by liking specific Building Blocks and sharing it with others. To give credit where it was due, each building block card and page has large Building Block images and visual links to users' GitHub profile. Lastly, the flow is built around quickly grabbing and plugging in complex objects into live project, creating the perfect experience for the mid-project learner.
Project-Specific Kits Kickstart Rapid Prototypes and Rapid Learning
While Foundation Building Blocks speed up projects mid-flow, Foundation Kits was launched as sets of curated Building Blocks meant to help any user get up and running with rapid prototyping in any situation. To make it as useful as possible to as many people as possible, Kits are organized around the most common project types in our 20+ years of client experience, with only Building Blocks that lived up to the best in web usability being included. And the best part - anyone can get started using Kits within 5 minutes of exploration.
Meaningful Metrics Validate Product Direction
As Foundation Building Blocks and Foundation Kits launched, the initial feedback from our community was positive in helping keep the power of Foundation while making it easier for anyone to use:
- A site that would've normally taken experienced web designers a day to fully scaffold now took less than 15 minutes.
- Students in our Intro to Foundation course consistently expressed how much they were able to learn the basics of Foundation and move onto more advanced projects.
- Within the first month after launch, 20% of the Building Blocks were built by members of the community.
Foundation was created to help our team design better, and went on to help millions of designers and developers create amazing things. Foundation Building Blocks worked in reverse. We thought we were building something for our community, and ended up with a resource that has helped us deliver some of our best work ever to our clients. That's the amazing thing about Foundation, that it empowers a whole community, and that community empowers us to make even better tools.
We're thrilled to work with our wonderful community to keep pushing it forward and breaking new boundaries! And this is only the beginning. Check out the Foundation Building Blocks site and see how it can revolutionize your workflow.
