Squarespace – Global Navigation
How might we create an intuitive navigation that promotes exploration and elevates usability?
The vision for my team was to create an intuitive global navigation that would drive discovery of selling and marketing tools, and improve usability by introducing consistency and predictability to how the platform looks and behaves.
Squarespace was in the midst of repositioning itself as more than just a website builder. Our objective was to emerge as the integrated selling platform of choice for entrepreneurs, providing them with the confidence they need to scale their businesses.
We recognized that our users faced challenges with our existing navigation and platform user experience:
It featured cluttered and overwhelming menus, making it difficult for new users to focus
Navigation flows required excessive clicks, often leading users across different product areas with minimal context, disrupting both selling and non-selling workflows
Addressing these usability issues was crucial to improving the overall success of our users on our platform. Additionally, our navigation paradigms hadn’t been revisited in the better part of a decade and our product had changed significantly in that time.
Strategic Approach
Literature and competitor reviews
Behavioral analyses
IA audit and concepts
Tree testing and card sorting with users
Rapid iterative prototyping and novel concepting
Hybrid interviews, usability testing
Iterative new global settings bottom-sheet release
Internal navigation Alpha release
Circle (Squarespace’s partner program) navigation Beta release
A/B test
GA release
Challenges & Opportunities
This space was predominantly utilized for linking to or completing actions, tasks, and settings, deviating from the anticipated behavior. Such complexity added to users’ cognitive load, making it challenging for them to locate and perform tasks intuitively. There were a variety of patterns, container widths and components that were inconsistently facilitating click-throughs, deeper menus or even in-page selections.
Here are some examples of these issues:
Links to external pages that open new windows or tabs
Paragraphs of information, long lists of inputs, toggles, and fields that are more suitable for their own dedicated pages rather than being within the navigation space
Navigation links that trigger modals, wizards, tooltips, or right rails, deviating from the expected or learned behavior
Inconsistent width and height to accommodate various types of information, leading to excessive scrolling and resizing
Different selections result in changes on the right side of the screen, others take users deeper into the navigation space, and some open new tabs without warning
These issues are reflected in low discovery rates, which, in turn, lead to low attachment rates.
IA Concepting
I used three IA concepts as a discussion point to help the leadership team hone in on who the new navigation was primarily targeted towards.
IA Testing
When the focus on Sellers became more clear, we continued iterating and talking to stakeholders. We decided to use a Tree Test to compare two unique IA options. Below are the imagined UI prototypes for each, but participants in the test did not see UI.
VERSION A: “NARRATIVE”
VERSION B: “FLAT TREE”
Concepts
Meanwhile, we were also reimagining our navigation and application design. I was sketching these while also tackling the reimagining of the IA. I also proposed various additional entry points for in-app notifications, help, asset library, user account, search, global create, quick actions, project switching, pinning favorites and more.
📝 A year later, in-app notifications and global create are in progress to launch in the near future
Testing & Validation
Many of the proposed changes would affect users who had published websites and were currently using Squarespace. The team wanted to ensure these flows remained intuitive before introducing this experience to a wider audience.
This research aimed to assess the ease of completion for critical actions in our new navigation for existing customers, identifying pain points, customer satisfaction, and potential areas for enhancing the user experience.
TOP LINE METRICS
% of participants who found where to begin each task
86%
% of participants who said they would opt in to the new nav
86%
System Usability Scale Score
83.2
Net Promoter Score
68.2
Vision
I designed a vision for where we might be able to iterate towards after launching the first version of the navigation. It included a global top row of icons as secondary navigation, a home dashboard, quick links and more.
Global Settings
My IA audit revealed that several navigation items were just links to various settings, showcasing at least six distinct patterns for how settings were presented within the product.
In order to reduce our 4+ level IA to just 2, we moved all of the settings into a new bottom-sheet container, conveniently accessible while a user is in the mist of another flow.
BEFORE
V1
V2
The team launched “Global Settings v1” as an A/B test and then released it to GA. Shortly after, we followed with V2 and saw no harm to core business metrics (with a nice surprise of a 30% increase in views of the Selling area). This allowed us to strip out all of the extraneous items in the former navigation.
Outcomes
Although this case study can’t quite encompass the scope of extensive work across this initiative, I will aim to show our achievements through the final A/B test results (as compared to the former navigation):
The discovery of root nav items increased across the board
+11.5% users started a Scheduling trial and +11.5% discovered and engaged with Scheduling
Adding a product went up by 9.3% and adding a shipping option went up by 9.8%
We saw a 9% uptick in entering “edit mode” and 3% in adding a page
7.6% more users opened our in-product guidance
Traffic to Website increased by 3%