Clarity by Design: Research and UI Support for Widgets

Clarity by Design: Research and UI Support for Widgets

Widgets Pro

Studio Widget
Properties

Studio Widget
Properties

Studio Widget
Properties

Studio Widget
Properties

This project focused on UX research and UI support for widget properties inside a no-code website builder Studio (Website Builder).

This project focused on UX research and UI support for widget properties inside a no-code website builder Studio (Website Builder).

UX Design

Research

Competitive Analysis

UI Design

The aim was to make property panels — such as text, layout, accordion, and carousel controls — more intuitive, consistent, and efficient, so creators can design with clarity instead of complexity.

The aim was to make property panels — such as text, layout, accordion, and carousel controls — more intuitive, consistent, and efficient, so creators can design with clarity instead of complexity.

Project

WidgetsProperties Case Study

Role

UX & UI Support

Year

2023

Team

Jayam (Manager)

Bala (Me) - Sadam - Vishwa

Project
Breakdown

We approached the project as a balance of research and hands-on design support — starting with in-depth analysis, then creating refined solutions, and finally implementing them into the widget property panels.

Implemented and refined flows to reduce friction and streamline user tasks.

50+

Time invested in research & analysis of competitor flows and property behaviors.

30hr+

Provided UX & UI support across property panels for a wide range of widgets.

41+

Widget Analysis

Defining
Widgets Pro

The no-code platform offers 40+ powerful widgets designed to help creators build dynamic, interactive, and visually rich websites. Each widget comes with a dedicated property panel that was analyzed and refined to make customization faster, simpler, and more consistent across the platform.

The no-code platform offers 40+ powerful widgets designed to help creators build dynamic, interactive, and visually rich websites. Each widget comes with a dedicated property panel that was analyzed and refined to make customization faster, simpler, and more consistent across the platform.

Diverse Widget Ecosystem

Studio offers 40+ versatile widgets that power the creation of dynamic, functional, and visually rich websites — giving creators the flexibility to design without limitations.

Studio offers 40+ versatile widgets that power the creation of dynamic, functional, and visually rich websites — giving creators the flexibility to design without limitations.

Studio offers 40+ versatile widgets that power the creation of dynamic, functional, and visually rich websites — giving creators the flexibility to design without limitations.

Seamless Customization

Every widget comes with a dedicated property panel, enabling users to manage layouts, styles, and interactions effortlessly while maintaining consistency across the platform.

Every widget comes with a dedicated property panel, enabling users to manage layouts, styles, and interactions effortlessly while maintaining consistency across the platform.

Enhanced Usability

Through UX research and UI refinement, we simplified property controls, introduced clearer hierarchies, and improved discoverability — helping creators build faster with confidence.

Through UX research and UI refinement, we simplified property controls, introduced clearer hierarchies, and improved discoverability — helping creators build faster with confidence.

Layout Analysis

Challenges

Managing 41+ widgets within Studio’s no-code platform introduced complexity and inconsistency across property panels. Each widget had unique layouts, control behaviors, and naming patterns.

Managing 41+ widgets within Studio’s no-code platform introduced complexity and inconsistency across property panels. Each widget had unique layouts, control behaviors, and naming patterns.

Text Widget Visual

Button Widget

Solutions

We streamlined the widget property panels by introducing a clear hierarchy, consistent layouts, and simplified controls across all 41+ widgets. Through UX research and UI refinement, we improved discoverability, reduced cognitive load, and created a more intuitive experience for both beginners and advanced creators.

We streamlined the widget property panels by introducing a clear hierarchy, consistent layouts, and simplified controls across all 41+ widgets. Through UX research and UI refinement, we improved discoverability, reduced cognitive load, and created a more intuitive experience for both beginners and advanced creators.

Solution Analysis

Outcome

By providing UX research and UI support for 41+ widgets, we helped improve clarity, consistency, and usability within Studio’s property panels. The updates streamlined widget behaviors, ensured more predictable interactions, and made customization simpler and faster for creators. These refinements also introduced a scalable framework, enabling Studio to manage future widgets more efficiently while maintaining a unified experience across the platform.

Widget Properties

in Studio

Create a free website with Framer, the website builder loved by startups, designers and agencies.