Square Developer Brand Refresh
After years of designing on a hodgepodge of brand styles, Square Developers decided it needed a change — not only of the look and feel of its identity, but its approach to reaching its target audience, too.
Over the course of 9 months, our small working group conducted audience and design research, competitor audits, 5 back-to-back design sprints to clarify our strategy and align stakeholders.
Ultimately, we established a new messaging approach tailored to the goals of both our developer audience and business partners, and published the first ever brand guidelines for Square Developer.
PROJECT LEAD: Lauren Schonzeit
ART DIRECTOR & DESIGNER: Kiran Puri
COPYWRITER: Kate Catinella
DESIGNER: Erika Liberato
The visual brand needed to be anchored to Square’s brand, but adopt unique qualities in order to appeal to our developer audience. We achieved this in 4 key ways:
Flip to dark mode
The vast majority of developers work in dark mode when programming, but Square’s brand mostly worked on white backgrounds (at least at the time.) Flipping our homepage to dark mode gives a cue to developers immediately that this place is for them.
Additionally, our secondary color palette is inspired by syntax highlighting color schemes, and was pulled from Square’s product palette, tying our content to Square’s while also retaining an independent edge.
Add a monospace cut to Square Sans
With similar logic as changing to dark mode, we also commissioned Colophon Foundry to create a monospace variation of Square’s eponymous brand typeface. The monospace cut was designed to be used alongside the rounder, wider display version of Square Sans, as well as the reading-friendly text version.
Adopt a witty, self-aware, and scalable tone of voice
In general, developers are kind of allergic to marketing jargon. They typically want to get the information they need in a direct way….but they also love finding a good meme along the way.
So we crafted a tone of voice the scales to these two realms — we’re intentionally straightforward when delivering informative content, but also playfully self-aware when there’s room for levity.
Create developer-oriented visuals
We worked with Square’s in-house studio to develop a set of static and animated “devicons” (developer icons) based on objects and ideas that a developer might encounter in their work environment both on-screen and off.
The sheen on each Devicon signifies an “upgrade.” That is, one can upgrade a seller’s experience using Square Developer. Similarly, a dev can upgrade their own business by monetizing on the platform.
After defining the brand, we began the process of refining our audience designations and content strategy.
Ultimately, we built 5 landing pages — one for our developers, the goal of which was to get them quickly to docs, and 4 for our partners, each of which prioritized conversion.
These updates to both the visual brand and our strategic messaging established Square Developer as one of the most future-facing teams within the company, and informed other teams’ approaches to design and content strategy going forward.
