< BACK

SUMMER 2021

Project Overview
Web Builder
Interaction Design
User Testing
At, the main product that I work on called , a webpage building tool that allows users to create page templates that dynamically populate with data. So, rather than developing potentially thousands of pages for all of your locations, events, etc., you can make one template, fill it with variables for your data, and generate many pages at once.This particular project was surfaced in the midst of another study. While testing an unrelated design, I noticed that many of the testers wanted to click directly into the page template live preview to edit it, to no avail. This was terribly frustrating for users, and clearly indicated that we needed an extensive redesign that would change our editing patterns and create a more interactive live preview. While I am the only designer that works on Pages, I work closely with mAs designer for this project, I conducted all user

As design for the project, I conducted user testing, led competitive research, iterated through low and high-fidelity mockups, and presented findings to Product and C-Suite stakeholders.
BACKGROUND RESEARCH

Establishing a standard

Before I could confidently decide what this new preview would look like, I needed to conduct competitive analysis to establish an industry standard for the most basic web-builder functionality. One of the major considerations for this research was that entire companies are dedicated to webpage building tools, while Pages is just a single product. I needed to make sure that we would be able to scale these interactions to emphasize a dynamic and data-oriented approach to page building.

I focused on 5 different companies: Squarespace, Weebly, Wix, Strikingly, and Instapage. Of these, Instapage is the most similar to our current product because they specialize in building landing pages, rather than entire sites like the others. I went into each site and studied every interaction I could find.
‍
In particular, I paid attention to: text editing, image handling, adding new content, deleting content, and controlling page design.

BACKGROUND RESEARCH

industry standard

The features I found that were common amongst most or all of the key companies studied were:

     •  Using small modals to edit content
     •  Enabling text editing inline
     •  Adding and deleting content, either at the element or horizontal          section level
     •  Editing image content inline
     •  Manipulating full sections of the page, as well as individual pieces of          content within that section

All of these features needed to be included in the new designs. I did end up designing some additional advanced functionality, but these were the fundamental improvements that had to be made.

Low-fidelity sketches

The new Live Preview had to incorporate many new interactions that we previously didn't have, from rearranging content to element-level design. Based on the initial user test, I wanted to focus on redesigning the field mapping experience, in particular.
THE SOLUTION

high fidelity designs

Old System
New System
The existing Yext design system didn’t have any UI elements that were compact and mobile enough for in-preview editing. So, for the new system, I created a new UI pattern, which I named the Contextual Panel. Now, to make changes, users hover over an element on their webpage. On hover, they sees options to Edit, Design, and Delete.When they choose Edit, the Contextual Panel pops up. The panel is compact, moveable, and sequentially reveals information to the user, first asking them to choose a source before expanding to reveal the option to choose a field.

new design settings

In the old system, users weren’t able to make design changes at the element level - only at the entire page level. With the new contextual editing experience, they can make granular design changes and add more customizations.

Under the new system, users can also now edit content at both the section and individual element level. Now, they can add, remove, and rearranging content at will.

RESEARCH

USER TESTING

While a previous user test had revealed that the live preview needed work, in order to establish a baseline for how users currently perceive editing Pages, I ran a new qualitative user test. The test walked users through 5 short tasks, 3 data editing tasks and 2 design editing tasks. I ran the test via UserTesting.com with 5 testers, aged 35+. Age was the only demographic parameter I included because many Pages clients are mid-level professionals in marketing, SEO, or webmaster-type roles. Very few of our day-to-day users are in entry-level positions.The test confirmed that users really struggled to edit their webpages. All 5 testers clicked on the live preview expecting something to happen and reacted with confusion when nothing did. In particular, people really struggled with mapping between dynamic field values and custom, static content.

CONCLUSIONS

Looking forward

To see whether these new designs were effective, I ran the exact same test that I had run before the redesign. Again, the test was run with They were presented with the same series of tasks, but this time were given the InVision prototype. The results were night and day; users found the new designs to be much more intuitive, and were able to complete all of the tasks with ease.

It was exciting to work on a project that really was completely initiated by the UX team. This was the first feature that had been created using UserTesting throughout the design process. The clear difference in the feedback we received before the redesign and afterward were validating from a design perspective, and helped to make this project a strong example to show other stakeholders in our organization the value of direct user feedback.Some other learnings:

Test for many content types

We needed to try to anticipate how users would build their web pages, and the possibilities are really endless. To make sure that the live preview editing experience was as flexible as possible, I had to think through how the contextual panel would work for all possible types of content.

Working with capacity constraints

This is a service that entire companies are built around, and our resources were fairly limited. I learned to be intentional with deciding which interactions to fight for, and had to work closely with my teams to find a middle ground where everyone could get the job done without sacrificing an enjoyable experience.

Updated JUne 2024
LinkedinEmail