projects
Property Panel
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.
research
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.
Design
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.
Design
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:
- Introducing a 2-column system to enhance the arrangement of modifiers.
- Standardizing element sizes to ensure consistency and enhance readability.
Design
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:
- use affordances like the B for bold, or i for italic from well known actions so users can identify what needs to be done.
- prioritize important basic actions vs secondary actions, to help declutter the property panel and help reduce cognitive load for users
Design
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:
- Replace unnecessary dropdowns with proper UX controls to improve users confidence in their outcome and help them make decisions
Design
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.
Conclusion
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