Blockly Brand Expression
Building a fresh brand narrative and landing page to represent Blocky's mission and showcase their position as an edtech leader.
| Client | |
|---|---|
| Project Type | Vision, Strategy, Landing Page Design |
| Role | Experience Design Lead |
| Team | Visual Design Lead | Athalia Rahman |
|---|---|---|
| Senior Visual Designer | Ignacio Torres | |
| Creative Direction | Seth Mach | |
| Length | 4 weeks |
The building blocks.
Blockly is Google’s open-source Javascript library that empowers anybody to create and customize a block-based code editor for their software development projects.
The drag-and drop interface invites end-users to learn to code by snapping together blocks that visually reinforce correct syntax. Today, “tens of millions of students have now learned to code on platforms and tools built on Blockly" since launching in 2012.
Education for Social Impact at Google asked our team to create a compelling brand narrative realized through a progressive web experience that will support Blockly’s aim to encourage and grow partnerships.
Interviewing stakeholders offered perspective on the brand’s current state & their hopes for success, showing that the new landing page should:
- Spotlight Blockly’s work in promoting and diversifying computer science education for all
- Underscore that block-based coding through Blockly is an accessible entry point for programming
- Communicate the scale of Blockly’s impact internally and externally.
Discovery
I reviewed comparable products & brands to see how Blockly measured up both within Google and across the wider web.
Beacon examples for narrative, brand positioning, and interaction helped us to contextualize Blockly’s challenge.
I/O plays within the Google framework to express its unique identity.
Intel turned its position as an ingredient brand into its strength.
Apple’s single scroll keeps the experience as simple as the message.
The existing page is nested under Google for Developers
The existing page is nested under Google for Developers
The existing page did not present Blockly as a standalone product and was built with outdated Material Design 1 components.
The page structure did little to help users parse through the information or understand the site’s overall structure.
Interactive elements blended in with the rest of the page and did not get many clicks.
The performance-forward messaging spoke to developers, but did not engage CSed Leaders – Blockly’s other target audience.
The new landing page is an opportunity to clearly communicate Blockly’s mission and reinforce its purpose‑driven values from the a user’s first impression.
Design
We held a messaging workshop with the client team to refine Blockly’s core message, align on values, and define its brand voice.
The purpose placemat grounds branding in Blockly’s mission.
Strategy, messaging, and voice all support and reinforce the purpose.
With a content strategy blueprint in place, Athalia, Ignacio, and I began crafting a fresh brand narrative.
I mapped our key message pillars to content blocks to clearly lay out and reinforce Blockly’s value proposition.
Next, I pieced together with text blocks and screenshots in Figma to start shaping the landing page layout.
For the next iteration, I built out low-fidelty components fit for each section of content.
Delivery
Once the layout was finalized, we applied Athalia and Ignacio’s visual expression to style the landing page mock-up.
Scrolling through the final site
Scrolling through the final site
At the end of four weeks, we delivered a single scroll landing page in desktop and mobile with a shorter option breaking out the partnerships section.
Visiting the Blockly site today, we can see many aspects of our branding in action.
The landing page is more distinct, more engaging, and – most importantly – clearly states what Blockly is all about.