Perform a one week guerilla usability study to identify customer pain points in Squarespace's blogging interface.
Squarespace is an online content management system (CMS) composed of a website builder, blogging platform, and hosting service. It's a great service that I use almost every day. I wanted to see what people from the blogging community would think of it, so I ran a quick usability study. Below I've written a walkthrough of my process and proposed a few recommendations.
First step was to develop a provisional persona to clarify the user-type I wanted to focus on. This helped me gain an empathetic view and understanding of Squarespace from a different perspective. It also allowed me to develop project scope concerning:
What: Squarespace's desktop blogging platform
Who: Regular bloggers, new to Squarespace
Where: Blogging environments - offices and coffee shops
Before putting Squarespace in front of users, I developed a testing script with 5 tasks that would provide structure and create consistency through each session. The tasks I chose to focus on were:
- Create a blog page.
- Create your first blog draft.
- Preview your blog post.
- Edit your blog post to include images.
- Publish your blog post.
PERFORMING THE TASKS
Each of the six participants completed the study on my MacBook Pro. After the participants agreed, I used screen-recording software to track audio, mouse movements, and interactions.
Before each session I created log-in credentials and used a consistent template - Beatrice - in order to keep the interaction walkthroughs as similar as possible. In addition, I created a blog post mockup so users could focus on performing tasks, rather than developing creative content.
SYNTHESIZING THE RESULTS
I reviewed the six video sessions to study pain points and uncover insights I may have missed during the live interviews. I organized the main issues into five different categories related to the task users had trouble completing. To gain a visual sense of the biggest pain points for each user, I used sticky notes with separate colors for each user.
While there were several interactions that stuck out as tripping points for the users, I decided to focus on three key issues that interrupted the user flow the most.
KEY ISSUES & SUGGESTIONS
FINDING #1: PREVIEWING BLOG DRAFTS
Most bloggers want a "what you see is what you get" interface. They want to know what their posts are going to look like before they hit the publish button. The way bloggers accomplish this goal with the current interface is by saving their draft, exiting the editor, and clicking an 'a' icon on the blog dashboard.
The tested users tried to preview their drafts by following a different conceptual model. Most users expected the preview button to me located within the editor. As shown below, they attempted several incorrect interactions in the editor interface before exiting back into their blog dashboard.
RECOMMENDATION: Provide a Preview button within the lower navigation of the editor interface. Adding a subtle preview button where users tend to look first would be a quick and efficient way to solve this problem.
ADDITIONAL RECOMMENDATION: Exchange the 'a' icon for visual language that is more consistent with the Squarespace experience. Users are confused by the 'a' icon Squarespace uses to navigate to draft previews. They expressed interest in clearer indication that would allow them to understand where they were going before making an educated guess.
"I don't see a place for me to preview." - User 1
"What does this 'a' do? That's not helpful at all." - User 2
FINDING #2: INSERT POINTS ARE CONFUSING
After a period of confusion by Squarespace's insert point interactions, users grew to enjoy this flexible approach to adding content. Due to the uniqueness of the interaction, however, Squarespace may find it helpful to receive more instruction or information through their first experience creating a post.
"I thought those were divisor lines." - User 3
"Whoa! What are these? Okay, that's confusing." - User 4
RECOMMENDATION: Provide a tooltip for first time users that describes what an Insert Point is and how it can be used. By informing users upfront, they are less likely to find the insert points distracting and will be better equipped to create blog posts, faster. Similar tooltips exist at other locations on the Squarespace site, making development and implementation simpler.
FINDING #3: UPLOADING IMAGES
Even after users had discovered the purpose of Squarespace’s insert points they had difficulty uploading an image and determining whether they were satisfied with the formatting. The most common point users addressed was whether they could drag and drop images into the editor.
"I wish there was text here." - User 1
"I don't know if I have to browse my files." - User 4
RECOMMENDATION: Prompt drag and drop actions through the use of iconography and text.
The second item users addressed regarding images was the size of the content blocks and how to work with them. Due to the limited size of the blog editor, they had trouble envisioning the spatial relations of the image compared to other content.
RECOMMENDATION: Improve visual feedback by decreasing the size of image content blocks. By displaying content blocks that are the same as those for other media types users will have a clear and consistent idea of where they are in their blog drafts. Also, by notifying users of the capability to drag and drop image files directly into the block users are saved a possible extra few steps.
Users were generally satisfied and even impressed with their ability to create a blog post in such a short amount of time using Squarespace. My goal would be to enhance that experience by developing clearer and more consistent visual language to help guide users through their first Squarespace blogging event.
To move forward, I would develop a prototype with the proposed changes, test with a new batch of similar users, and determine whether their blogging experience was more efficient, intuitive, and delightful. If the results came out successful, I would move on to implementation.