Property Panel

Product design

ux research


En route to a more intuitive and fast editing experience. Total customization is a huge selling point for Thunkable. However, the editing experience, at the center of the user's daily use, was, at best a lacklustre experience. Product thought it was time to change that.

business goals

The project was part of a broader effort to increase retention by diving into some of the more obvious usability issues on the platform.

design goals

Product decided to focus on improving editing because it takes up about 60% of your time on the platform. The rest of the time is split between functionality and other admin tasks. So, it's a big part of what you do. This editing upgrade is part of a larger effort to refresh the builder experience, including themes, versions, accessibility design, and component defaults.


So what’s so bad about the editing experience?

First, I completed an audit of the existing experience of editing components, and did a comparative analysis of other products in the same realm. Then to validate or null my hypothesis, I gathered qualitative data from the community and the cs team. here are the findings:

The hierarchy

The settings descriptors, toggles, and different input styles are all contributing to a lack of hierarchy and clarity. The property panel also feels like an endless scrolling experience to get to high touch point settings. It's a cluttered and unstructured layout.

Poor scannability

Everything has a different size; which makes scannability really difficult. The platform also underutilizes strong affordances from other products, for basic actions.

appropriate modifiers

There are many dropdowns even when only a few options are available; which pushes users to have a hard time identifying what to do quickly.


After research, I analyzed the findings and used the Jobs to Be Done framework to establish the design goals for future solutions. 3 opportunities stood out.

After research, I analyzed the findings and used the Jobs to Be Done framework to establish the design goals for future solutions:

jobs to be done

When trying to customize a component, users struggle to identify and quickly edit properties, so that they can speed up their building time.


Improve hierarchy

To enhance the user experience, I started by tackling the underlying structure before diving in more granular changes. Here's what was in the pipeline:

  1. Introducing a 2-column system to enhance the arrangement of modifiers.
  2. Standardizing element sizes to ensure consistency and enhance readability.


Improve scannability of properties

Users should be able to do 2 things without friction: finding the property quickly, knowing what are the controls to change it. So here was the idea:

  1. use affordances like the B for bold, or i for italic from well known actions so users can identify what needs to be done.
  2. prioritize important basic actions vs secondary actions, to help declutter the property panel and help reduce cognitive load for users


Offer appropriate ux controls

Thunkable was relying on the dropdown for almost every basic actions, even when it’s not the most appropriate one to use for users. After, auditing all the components and finding the patterns, I proposed this solution:

  1. Replace unnecessary dropdowns with proper UX controls to improve users confidence in their outcome and help them make decisions


the project was tested internally and went through 2 rounds of iterations to land on a solution that engineering could produce given current resources. A group of long-time users from the community tested the prototype. Only qualitative data was gathered and showed great feedback on the new design.


These changes were well received by our community of users, and helped us lay the foundation to explore broader changes for scaling the customization of components and move forward a faster, more intuitive building experience on Thunkable