Arming creators with a simpler way to customize form experiences and manage responses within Squarespace

  • Role
    (Solo) Product Designer, UX Researcher
  • Project deliverables
    Add product features (concept)
  • Tools used
    Figma, Squarespace, Notion, Maze
Overview
As Squarespace continues to enable millions of people to build a brand, share their stories, and transact with their customers, I believe there are opportunities to improve the existing Forms feature by adding features that encourage more creativity and empower creators with simpler ways to manage and keep in touch with their audience (Note: This is a concept project, and not at all affiliated with Sqaurespace.)
Brief
Millions of websites and online stores have been created on Squarespace's dynamic all-in-one platform, which allows customers to claim a domain, build a website, sell online, schedule appointments and market a brand.

More creators than ever are turning to simple-to-use platforms like Squarespace to create websites and showcase anything from a small business to a wedding. Form elements such as contact forms and RSVPs play a big part in how these creators allow their visitors to interact with them.

Squarespace is presented with opportunities to improve creators' ability to customize and attract responses via the Form block, as well as offer new ways for them to keep track of and engage with their audience.
Solution
Design features that integrate seamlessly into the existing product to give creators more control over the form experience and allow them to manage form submissions within the Squarespace platform

Customization

  • Style presets
  • Form field templates
  • Simple to use
  • Consistent

Dashboard

  • View form submissions
  • Set response statuses
  • Export options
  • Copy data to clipboard

Design process

Although presented here in a linear format, I prefer to take a more lean approach in my design process.

For example, at the very beginning of a project when I'm conducting research, I'm never afraid to take note of good and bad UI patterns, or explore UI ideas before any substantial research has been completed. I do this for the sake of staying locked in and stimulated, adding context to what kind of challenges I may be facing ahead, which strengthens the overall quality of the research that follows. Even when I'm confident I've gathered enough research and data to make informed design decisions, I make a continuos effort to seek new insights and constantly challenge my decisions to drive my work forward.

I don't believe there is ever a true "end" for great design work, and there is always room for improvement, which requires me to be agile throughout the entirety of my design process.
1. Research
- Exploring the existing product
- Competitor analysis
- Form product analysis
- User interviews

Jump to Research section →
2. Define
- Persona
- Project goals and constraints
- Feature prioritization
- Task flows

Jump to Define section →
3. Design
- UI Kit
- Feature Design and Prototyping

Jump to Design section →
4. User testing
- Usability test plan
- User testing and results
- Iterations
- Next steps and learnings

Jump to User testing section →

1. Research

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

Exploring the existing product

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.

Competitor analysis

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.

Form product analysis

I then took a look at some popular form builders to find patterns and gaps amongst existing products.

User interviews

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.

1

Organize participants

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.

2

Create interview guide

Write a user interview script and develop a plan to uncover actionable insights from participants.

3

Conduct interviews

Use the interview guide as tool to direct the interview forward, but don't stick to a script. Let the conversation flow naturally.

Q: If I wanted to inquire about your photography services, what would that experience look like for me?

A: I use Instagram to promote my website. You click "Book now" and you land on my website's contact page.

Q: How do you currently manage incoming inquiries?

A: All through email. It can get messy are hard to keep up with.

Q: Would a dashboard in Squarespace to manage form submissions be helpful?

A:
That would make the experience a lot more enjoyable. Right now everything lives in a folder in Gmail. I log into Squarespace regularly to check my traffic, so it doesn't make sense to have to open Gmail every time. Plus, those email threads are kind of intimidating.
Participant 4
Photographer with portfolio on Squarespace
Q: Have you ever used forms to capture data from your users / customers?

A: “I use the forms on Squarespace. I wanted to make it as easy as possible for people to RSVP to my wedding. When you're asking people who aren't tech savvy to RSVP on a website, you have to make it simple so you don't alienate anyone.

Q: Why did you ultimately decide to go with Squarespace?

A: "Aesthetic mattered. Competitors' templates weren't as pretty. However, I felt slightly limited in Squarespace because the RSVP forms on Zola and The Knot allowed for more complex form options, like the option to make a form to adapt based on the answer to the previous question. For example, if someone turns down the RSVP, the form ends right there instead of requiring them to choose a meal preference before hitting submit.”
Participant 1
Created wedding website on Squarespace

2. Define

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

User persona

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.

Project goals and constraints

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.

Task flows

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.

Feature prioritization

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

3. Design

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

UI Kit

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.

Feature design and prototyping

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.

view prototype in figma

4. User testing

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

Usability testing plan

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:

Participants
Gather a handful of participants who use the internet on a regular basis and reflect some of the qualities from either of the personas
Scenarios
Scenarios will include missions such as changing the form field template, changing the form visual style, navigating to change the font (linking out to the Design panel), connect form to Submissions dashboard, and mark a message in dashboard as "Read"
Methodology
Testing will be conducted remotely on Maze. Participants will be given a link, and then presented several missions to complete based on scenarios in the desktop prototype.

User testing and results

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.

13 anonymous participants
It was important that every participant was technically capable of navigating this prototype, even if they never used Squarespace before. I hand-selected 13 participants based on technical savviness, who were given anonymous links to the test.
User test results
  • Multiple participants commented that the interface itself wasn't difficult to navigate, but the actual prototype was presented in a confusing format
    It became apparent to me after the first few tests that presenting the screens on top of a desktop browser mockup was not the best choice. This decision made for a less than satisfactory experience for participants who had to adjust the resolution to be able to comfortably complete each task.
  • 91.7% success rate on connecting the form to the submissions dashboard
    The best performing task was connecting to the submissions dashboard via the "Storage" tab, which proved that this was the most seamless feature integration into the existing UI.
  • 33.3% average success in marking a submission as read in the dashboard
    An unusually high percentage of testers had trouble completing this mission in particular, which made it clear that the dashboard feature had to be iterated upon.
Takeaways
The dashboard feature needs to be reworked so it's more intuitive and practical to users.

Despite data (heat maps, clicks, feedback) showing that the other features were easy to navigate, there was a huge missed opportunity in the format of the test. Feedback confirmed that the mockup presentation was distracting from the prototype itself.

Iterations

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.

Next steps and learnings

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.

view prototype in figma