Squarespace – Selling Dashboards
How might we align dashboards to a new company strategy?
Due to a strategic pivot, key subject matter experts were rallied to quickly design a behavior-based, personalized framework underlying a new suite of selling dashboards. In addition to the interaction and content infrastructure, we created a system of thirteen patterns that would ultimately become the building blocks for each landing surface.
Changing strategies caused a chain reaction
The scope contained more than just the dashboards. Members of my team also needed to ensure that the global navigation was customizable so that whether or not users intended to sell (or sell multiple ways), their nav wasn’t cluttered with features they didn’t intend to utilize. They also needed to market the newly released features on that same surface.
The core team was made up of representatives from Activation, Commerce, and Design Platform (me). I was brought in because Squarespace had reached a turning point where the complexity and scope of the product had outgrown its highly flexible, user composable design system. The teams building individual dashboards didn’t have a common design language they could refer to. Subsequently, while navigating the platform, users would encounter inconsistent and confusing interaction behaviors and UI.
Initial Concept
The team had just under three weeks to create our first version of the framework and present it to executive leadership. We knew that we wanted to introduce behavior-triggered evolutions to the dashboards so that the content would stay fresh and relevant. We stubbed out a content hierarchy structure that had three sequential states.
State 1, Merchandising was really crucial to the overarching commercialization initiative in that it tied the thread from our marketing site and into the logged in product. The Brand Creative team shot unique photography for each dashboard which would be featured throughout the whole funnel (for the first time).
State 2, Setup was centered around ensuring users were set up to sell successfully. The emphasis was placed on a dynamic intent-based task list and a module containing selling mode-specific tips for improving sales.
State 3, Mature hones its focus on showing key metrics of business health and performance as well as on providing convenient paths to relevant surfaces that can enable growth or to learn about other features.
Strategic Approach
Hosted collaborative brainstorms with stakeholders
Paired with Content Design to create a repeatable framework
Quickly pivoted from wires to show an end-to-end journey in high fidelity
Developed prototypes, collaborated on creating protocols and questions, and conducted user interviews
Concepted unique new components and patterns aligned to the new framework
Collaborated with engineering to provide them to consumers
Paired with teams to ensure a seamless creation and delivery process
Conducted visual QA live in-product
Iterations
While we were experimenting with different visual treatments, members of my team and I were simultaneously:
pressure testing the framework with consumer teams
partnering with Commerce PMs to collect every single word that would be represented on their respective final dashboards
writing photography and asset briefs for the Brand Creative team
bringing the design into a middle fidelity prototype to portray a first iteration of the vision
Role & Responsibilities
Since we had three distinct bodies of work within the overarching initiative, we broke out into our respective teams to finalize the execution. I owned the design of every dashboard (at every state), so I created nineteen new Figma components. The components were the building blocks Designers would need to create a dashboard. I worked with Content Design to bake content recommendations and extensive Design guidance into every component. I produced countless variations to ensure each component could flex to any size or content combination.
After delivering a toolkit of Figma components, I also created templates for the dashboard layouts at common breakpoints as a means of providing guidance but also to give designers a head start on the tight timeline. I paired closely with Engineering to create an experimental code library which we hosted on our Design Platform documentation site and shared with teams in hopes that they would be able to move faster and keep code consistent.
Testing & Feedback
Due to the speed with which this project was moving, we completed one series of user interviews with twelve high monthly GMV sellers on Squarespace who were also Circle members before the initial launches. We wanted to know if and how we might impact their day-to-day business management by releasing such drastic changes.
Participants told us that:
The dashboard framework made it easier for them to create products and services as well as access sales and relevant analytics
The new dashboards housed more relevant content than the current iteration
The addition of “quick links” in the footer helped them to access their important workflows more quickly
Using the framework and accompanying components, five net-new selling dashboards were designed in less than three months
During that period, 19 new Figma components within 13 patterns were inserted over 12,000 times by 12 teams
Content guidance was baked into Figma components and variants in effort to increase consistency across product areas
All of which were published as an experimental pattern library by the Design Platform engineering team (to be added to the Rosetta Design System as components at a later date)
Teams used the Figma toolkit and the pattern library to propel their speed to ship all of the dashboards within eight months of the project’s initiation
An initial A/B test showed a 37% increase in creating selling objects
After launch we saw a 28-40% increase in document creation, a 22% increase in Member Site creation, a 10-20% increase in adding a product, an 8% increase in pricing plan creation, and a 50% increase in first time Donation sales.
Scroll, then click anywhere to progress to the next state