Redesign

Fonts Panel

I led the redesign of a new Fonts Panel from conception to testing to launch, resulting in a 10+% increase in key font management usage metrics.

Tools

↗   Figma
↗   Zendesk
↗   Principle

Skills

↗   User Research
↗   Rapid Prototyping
↗   Animation

Deliverable

An overhauled Fonts panel experience with new hover states & microinteractions to clarify how to successfully navigate and configure typographic settings.

The Ask

Understand how users work with the fonts panel, identify areas to optimize, and redesign the end-to-end experience of managing fonts on a site.

The Ask

Understand how users work with the fonts panel, identify areas to optimize, and redesign the end-to-end experience of managing fonts on a site.

Deliverable

An overhauled Fonts panel experience with new hover states & microinteractions to clarify how to successfully navigate and configure typographic settings.

10%

Increase in subpanel visits

23%

Increase in targeting clicks

7%

Increase in font pack saves

Where we started

This story begins with an audit I conducted of 500+ customer care tickets that were logged in Zendesk within two weeks of October.

Problem hypotheses

Tickets related to fonts + colors made up 20% of complaints.
I distilled the pain points in these tickets into two main themes :

Inaccessible Settings

Many key settings were inaccessible to users because they undiscoverable or written in technical language that users could not easily understand.

Unclear Scope

Users often did not understand the scope of the edits they were making. There was a disconnect between what they saw in the panel and what they saw on the page.

1.   Deeper levels of the panel were undiscoverable to users

Users kept getting stuck at the first level of the panel and did not understand that there were more editing options available to them. This bred misconceptions that our font options were limited.

"I can't believe Squarespace only offers 23 fonts. I wish their font selection wasn't so limited."

2.   Users did not understand the scope of their edits

Users struggled to understand how controls in the panel mapped to elements on their site. They particularly struggled with settings labeled in technical jargon.

"Is this a Heading 1 or a Heading 2? I can't tell what's going to change when I slide the Header 1 slider."

3.   Users did not know how to find specific controls

Users struggled to find basic controls like Site Title fonts because they're hidden away in "Advanced." We were also seeing low discoverability and low usage on a feature called "targeting" which allows users to click on something on their screen and shortcut to its setting.

"Is this a Heading 1 or a Heading 2? I can't tell what's going to change when I slide the Header 1 slider."

Prototyping

I designed a basic proto based on our hypotheses and explorations by a previous design owner. Highlights of the proto include:

↗   Panel opens up to active pack’s contents
↗   Pack list lives a level below
↗   Experimented with separating out global and element styles

Research study

I then worked with our Sr. User Research Manager to design a moderated test to test the control against our redesign. We tested both prototypes against twelve users.

9/12 users preferred the redesign.

We ended up testing the redesign against the control in a moderated study with 12 users. I co-directed the study with our director of research, designing the tasks and assisting in the testing process. The results were overwhelmingly supportive of the resdesign. Users cited the following reasons for their preference:

↗   More compact settings
↗   Clearer system language
↗   Less clicks to accomplish the same tasks

"I like that everything is within eye's reach."

- User on why she prefers the redesign

1 / Targeting

Targeting was unfortunately not discoverable, and many users went through the test without discovering the “click to navigate” shortcut.

... But when users did discover targeting, they loved it and used it frequently to accomplish tasks.

“So why don’t you have tooltips or some sort of information which comes up when I hover? I’d love to see those so I’d know about this because then I’d only use this!”

2 / CSE

"CSE” or Contextual Style Editing is our term for “click-to-modify” editing paradigms. The demand for CSE was a huge trend that we noticed throughout testing.

Users want to click on an item and directly edit it like a Word document--something that is not possible with Squarespace.

“Why can't I click on it and change it that way? I'm used to being able to click on something and it'll give you a prompt to change.”

3 / Copy

We adjusted copy after every few tests, allowing for us to test a wide range of content strategies.

Some changes resulted in major wins, while others (such as replacing the font name with “Heading”) detracted from success.

Final changes & approval

After validating that our redesign clearly outperformed the control, we got the green light to refine designs and present for product approval.

Based on our learnings from the test, we decided to prioritize:
(1)   Showing users how to target
(2)  Clarifying to users the scope of their edits
(3)  Keeping the global styles list simple, but adding guiding copy.

We retained the reorganized hierarchy that we validated during user testing. We increased the visual prominence of  the font pack to clarify its role as the highest-level setting.

I designed an instructive gif to teach users how to target. I decided to use a modal as opposed to permanent instructive copy cecause we learned that this behavior was sticky and users retained this knowledge once learned once.

I added highlights in the text style panels to clarify the scope of a user’s actions . I also added tags that indicate text style on hover.

I designed an instructive gif to teach users how to target. I decided to use a modal as opposed to permanent instructive copy cecause we learned that this behavior was sticky and users retained this knowledge once learned once.

Results

After launching the Fonts Panel updates we saw increases in key metrics across the board. This was incredibly exciting and validating!

7% increase in font pack saves

10% increase in font pack subpanel entry

23% increase in targeting clicks

Conclusion

I’m incredibly grateful to have worked on a project that resulted in clear value for our users! It was so gratifying to take this project from inception to launch, and I’m hoping it continues to help users actualize their styling vision.

"The new Fonts panel is so much
better than before! Thank you!"

- Squarespace Pro User