Rebuilding Portfolio Design Editor
At the core of Format’s website building experience is the Design Editor. The most powerful interface in the product, the Design editor allows the user to control every aspect of how their online portfolio is presented, from the overall look and layout to typographical details — all without needing to code.
As the product designer on the team, I worked closely with the Design Director, product managers and engineers to redesign this experience from the ground up, with a focus on improving usability.
Senior Product Designer
UX and UI Design
Research and Usability Testing
Identifying the problem
Originally, all of the variables for the user’s website were presented in a long scrolling list, organized like a CSS file.
The organization of the list proved to be confusing for users who were not fluent with web design. Organized by content type rather than variable type, it did not match their mental model of how a website works.
Firstly, the variable names were not easily understood by users who were not already familiar with web design. They were often inconsistent, and hard to parse as a someone new to the platform.
Furthermore, it made it very difficult and tedious to perform common tasks such as changing all of their colours and fonts to match.
Testing and iteration
After running a series of in-person usability tests on the legacy design, I observed several universal behaviours among participants:
Uses encountering this interface for the first time would select a variable at random and begin making extreme changes — such as changing the colour to bright red — in order to discover which site element would be affected.
When modifying a variable incorrectly identified as matching their intended element, users would not see any change on their website preview, and assume that the change had no effect. However, they were actually modifying another page on their site that was not currently visible.
The accordion pattern of the sidebar added friction, making it difficult to keep track of changes made. Collapsing and uncollapsing made it tedious and time-consuming to change multiple variables at once. Changing all the text on the website from black to blue, for example, took dozens of clicks to achieve.
When unsure what to do, users clicked on the preview of their website. They expected that by clicking on the element they wished to modify, they would be able to view variables related to that object. However, there was no feedback on the preview panel to give the user the information they sought.
Prioritizing the most pressing UX issues
The usability study indicated several key insights about the mental model of users who were encountering the Design Editor for the first time.
Firstly, in the hierarchy of organization, page type was the least helpful heuristic. Users who were new to the platform were not yet familiar with the page types and therefore were not able to correctly identify the element they needed to change.
Instead of using page type as the parent entity to organize the variables, the Design Editor should be designed to support the user’s intuitive understanding of the parts of their website: Logo, Site Menu, Layout, Colour, and Typography.
This new structure would significantly improve comprehension, ease of use, and reduce the friction when making multiple changes at once.
Starting with structure
In order to set the groundwork for the necessary changes to happen, an extensive audit of 27 website themes was required. Each variable needed to be normalized, renamed, cross-referenced and placed into a specific hierarchy in order for the new design to work.
Documentation all of the changes that needed to happen was a huge undertaking, but a necessary step to propel the platform forward. While not typically considered a design tool, this Airtable spreadsheet and its thousands of cells is the culmination of a massive information architecture exercise, combined with UX copywriting, in close collaboration with engineers and product managers.
- Introduced the context menu, that allows the user to click on any item and immediately bring up the relevant variables in a dismissible overlay. This allows the user to fine-tune their design without losing their place.
- Introduced base variables and tabbed interface, which allow the user to easily make sweeping changes to the look of their site, then fine-tune the specifics.
- Introduced a new sidebar design that is organized intuitively by the type of variables. This allows a novice user to easily identify what they want to change, without prior knowledge of how the content is organized.
- An un-collapsed design allows them to easily view all of the variables of a given type, allowing them to instantly spot inconsistencies and match them.
- Users are still able to drill down to the content-specific variables, through both the sidebar and the context menu, allowing for convenient, fast editing.