CASE STUDY
Weebly Design System
A cross-functional team effort, Weebly’s design system refresh helped support our ongoing focus on commerce, driving customer awareness and consideration by putting our creative entrepreneurs front and center addressing their motivations, mindset, and needs. Additionally, these changes enabled greater overall harmony and flexibility within our product and marketing design systems.
My roles for the project included contribution to design, A/B testing, documentation, production, and roll-out of the visual identity system. The refresh included logo refinements, updated and unified typography across brand and product, an expanded and refined color pallet, illustration guidelines, new brand attributes, and accompanying voice and tone guidelines. Additionally we captured and curated photo and video shoots showcasing the creators and small businesses using Weebly’s site builder and ecommerce engine to power their online presence.
Problem & Objectives
Over the previous several years the existing marketing and product design systems had evolved in separate directions. The existing design system was geared towards artists and creators, relying on outdated platform imagery, heavily treated duotone photography, and hand drawn script fonts. With Weebly’s expanding focus on commerce and entrepreneurs, leading up to the acquisition by Square, the system was in need of a refresh to better align marketing efforts with our business objectives.
Process & Strategy
Following a comprehensive market research phase the most important brand attributes we identified for our commerce segments were “Professional” and “Customizable.” Our primary objective was a refreshed brand marketing system that spoke to this new audience with more robust visual vocabulary to tell stories of the successful entrepreneurs and small businesses powering their online presence with Weebly.
Our secondary objective was harmony and interoperability with our product design system in order to create a seamless transition though the marketing funnel, into the onboarding process and the product experience.
After internal alignment, and creating an detailed roadmap for both marketing and product we set forth to tackle our respective projects with weekly design meetings, workshops and creative showcases.
Iterative testing and learning was at the heart of the Weebly design culture, though every step of the journey we ran tests and incorporated our learnings into each successive iteration.
Our guiding attributes to help entrepreneurs succeed: “Professional, Customizable, Authentic, Simple, & Invested”
Execution
The marketing and growth design teams restructured our internal creative workflow to two week Agile sprints aligned with the product team’s release schedule as we worked toward a unified design system.
The brand architecture work and content capture was completed first and the system components were pressure tested into concurrent marketing initiatives and product releases.
This included an entire redesign of our Homepage and Online Store page, a complete overhaul and expansion of our customer onboarding communications and ramping up of our content marketing efforts via our blog and the new Weebly Guides pages.
Each successive milestone of the project culminated with retrospectives which synthesized our learnings and incorporated them into the creative briefs for our next phase.
Outcome
The combined efforts of our marketing, growth, and product design teams were a robust Global Design Library (web, email, icons and illustrations), a new photo and video asset library of customer images and stories, a website and product refresh, a new series of onboarding emails, and a ‘Weebly Guides’ microsite, home for our content marketing efforts.
RESULTS
The combined efforts of the marketing, growth, and product design teams directly contributed to the acquisition of Weebly by Square Inc.
GLOBAL DESIGN LIBRARY
The Global Design Library we created ensured consistent creative across all marketing channels.
Our updated onboarding experience ensured a visually cohesive journey from marketing prospects to new users.
ONBOARDING
As the acquisition approached alignment with Square’s visual identity ensured seamless integration into their product ecosystem.
ALIGNMENT WITH SQUARE
Our new design library allowed us to triple our content marketing efforts via Weebly Guides and Blog.
CONTENT MARKETING
