.gif)
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.
.png)
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.