I prepared the prototype for you to view in Figma on desktop. A link will be at the end of this page, too.
In this research phase, I looked to challenge my assumptions that Squarespace users currently experience some level of friction not only when customizing their form design to their liking, but also in the process of managing form responses. My goals in research were to:
1. Understand how creators currently use forms in their Squarespace projects and elsewhere
2. Uncover opportunities to improve how creators can use forms to keep in touch with their visitors
3. Determine if there's a demand for new features that would empower creators with more creative freedom and deliver more intentional experiences via the Squarespace form block
Before anything else, I logged into my Squarespace account and started playing around with the existing product. I have prior experience in designing professional websites for clients using Squarespace, so I was quite familiar with the product to begin with. My main intention here was to catch up on any updates and new features that may have come out since I last used the tool, and dig deeper into the form block and the current features it has to offer. I took note that Squarespace launched Scheduling, an add-on appointment booking and management tool. This validated my idea that relationship management and introducing new ways for creators to interact with their visitors adds tremendous value for users on the platform.
Before diving into form products in particular, I aimed to get a bird's-eye view of other all-in-one website builders in the space. This gave me a clear understanding of where Squarespace stands in the market, and how the Forms feature fits within the context of the overall product. Squarespace really shines in how beautiful it is out of the box compared to competitors.
In a Notion spreadsheet I took notes on a handful of competitors in the space, then narrowed my analysis to 3 competitors that closely resemble Squarespace's value proposition.
I then took a look at some popular form builders to find patterns and gaps amongst existing products.
I decided to conduct user interviews with self-starters, freelancers and creatives to learn more about how they generate responses / inquiries for their products, services, or events. I wanted to learn about what tools they use (with or without Squarespace), and what patterns I can identify to see if there are any gaps to fill.
Interview a total of 5 people, 3 Squarespace users and 2 non-Squarespace users to learn about how people tend to communicate with their audience on Squarespace as well as other platforms.
Write a user interview script and develop a plan to uncover actionable insights from participants.
Use the interview guide as tool to direct the interview forward, but don't stick to a script. Let the conversation flow naturally.
My research suggested a demand for form features such as templates for various use cases (RSVP, Contact), submission dashboards, and more creative control over the form experience. My goal following research was to:
1. Determine exactly who I'll be designing for
2. Identify constraints in working with the existing product
3. Explore new product opportunities and prioritize features
4. Study the current flow of the form experience and decide where each feature should live within the existing product
I created a few personas based on prior research as well as the conversations I had with interview participants. These personas will be used as reminders of who I'm designing for throughout the remainder of the design process. I developed 2 personas for Squarespace Forms, Grace and James, whom of which were heavily influenced by the archetypes of my interview participants. I decided that the primary persona I'd be designing for was Grace, a creative freelancer who's looking to launch her first website to showcase her best work and generate more business. She will most benefit from features that arm her with more creative freedom over her website's look and feel, as well as a dashboard to manage inquiries at a glance.
Being that I didn't have access to internal roadmaps or constraints, I decided to take a step back and crystallize what could be a potential overview of high level business goals, user goals and technical goals. An important pillar I made a point to consider were technical constraints I'd have to keep in mind in order to seamlessly integrate new features into the existing product. At a high level, this meant trying to prevent these features from becoming overly complex, and to also keep in mind the technical ability of creators that will be using this platform.
With goals and constraints in mind, I began deconstructing task flows that currently exist in Squarespace forms. I sifted through Squarespace's entire documentation pertaining to the forms feature and documented relevant flows in a Notion file. This exercise helped me develop a strong understanding of how the current product works, and how users currently perform tasks relevant to this project such as customizing a form block, styling the form, and managing form submissions.
The prior exercise uncovered some potential technical constraints I'd run into if I were to design more complex features, such as conditional logic, which proved to be too complex of a feature to design within the scope of the current project goals.
Features that would best fit within the current product and would add value to the form experience without overcomplicating the existing product are:
- Form templates
- Form field styles
- Form submission dashboard
- Form submission export
Now that I had a deep understanding of the current product and validated the demand for some features, it was time to start designing. The goals in the design process were to:
1. Create a kit of components and styles that closely resemble the existing product to design features that are consistent with Squarespace's current design system
2. Integrate form templates, new form style selectors, a form submission dashboard and an export option and strategically place them in ways that don't disrupt how users expect to use the product by referring to the task flows I recorded
3. Prototype the features and prep for user testing
It was extremely important for me to design these features to resemble the existing product so closely that the average user wouldn't be able to tell it's a prototype. I achieved a consistent look and feel by taking screenshots of current elements and carefully manipulating the UI and crafting components and icons that fit seamlessly within the current design system.
I didn't have access to Squarespace's signature font, Clarkson, so I had to improvise. I set out to find a font most closely resembled the font used across their platform. After some adjustments to spacing, line height and sizing, I moved forward with Neue Haas Unica as the primary font for the prototypes.
The UI kit continued to evolve throughout the design process, and I began stringing elements together to bring the new features to life. The final set of new features were:
- Form field templates (Contact, RSVP, Custom option for when you make changes yourself)
- Form field styles (default, line, rounded)
- Storage option to link form to submission dashboard
- Form submission dashboard (with an option to mark items as "Read" to keep organized)
- Form submission export (1-click solution to generating a CSV of form responses)
- 1-click copy form data to clipboard (by clicking on any field in submission dashboard)
These features were prototyped before Figma's release of Interactive Components. Fun times.
Now that the features were integrated, it was time to test. My goals for testing were:
2. Conduct and analyze user tests to measure the impact of the design
3. Prioritize feedback in order to iterate on the design
When the design is proven successful, Llama will have a green light to begin development and proceed to work on high-priority projects in the roadmap such as designing the instant quote tool, designing custom insurance products to offer within the quote tool, and producing content to put on the website. The test plan was:
Based on the test results, it will be easy to set apart features that integrate seamlessly from the features that need to be iterated upon.
After analyzing heat maps, click maps, and collecting additional feedback from participants who were willing to expand on their experiences in the user test, I decided to iterate upon the dashboard feature.
Feedback suggested that specifically in context of the RSVP form, it didn't feel natural to have to mark a submission as "Read," as it wouldn't add much value to the experience. This led me to realize that the current "Read" system wasn't scalable to different use-cases, and was too similar to the email experience that users were trying to avoid.
I reimagined the experience by removing the "Read" status, and designed 4 universal statuses that were optional for each item. A user can optionally click to cycle through the alert, neutral, check and cross statuses as they see fit. If they don't see value in these statuses, they don't have to use it at all. The default state is the "alert" symbol which is automatically assigned to new submission items, and serves a simple and universally practical introduction to the feature.
I received positive feedback to this change when sharing the new experience with some previous test participants.
There is more testing and iterating to be done, with the first step being removing the prototype from the mockup it sits on top of to make for a more delightful testing environment. It also would be ideal to do more tests on what form field templates would prove most valuable to Squarespace's user base depending on the most common use-cases of the platform, which is data I didn't have access to when designing this feature.
Overall, I consider this project a success in that it added value to the Forms product according to the data and feedback collected from users. I also learned some valuable lessons in the testing phase, such as the importance of keeping distractions to a minimum, and being clear with the instructions for each task.
