Company: Apptile
Role: Product Designer (Redesign Owner)
Team: CPO, Senior Developer, Associate Designer

The Problem

Our no-code mobile app builder used a right-side Properties Panel to customize "tiles"—modular app sections like carousels or grids. Over time, this panel became a bottleneck for users and internal designers alike.

Three key issues emerged:

• Blank State Confusion: If no tile was selected, the panel remained completely empty with no instruction or guidance.

• Control Overload & Poor Grouping: Users struggled to locate styling controls, which were grouped inconsistently by tile component instead of by control type. Designers often switched to another internal editor to save time.

• Overbearing Mandatory Properties: Customization was blocked whenever a required input was empty. While crucial for mobile app completeness, the experience was highly disruptive.

A detailed breakdown of how we addressed the mandatory field challenges is captured in a separate case study.

Evolving the Structure: Introducing a Third Tab

Our panel originally had just two tabs—"Content" and "Style." But the boundaries between them had blurred. Important  controls were hidden under "Content," and some essential display toggles were mixed with style-specific settings.

User Problem: They couldn’t predict where a control would appear. Sometimes essential settings were buried. Other times, fields needed at the start of customization were absent until too late.

Internal Insight: Even our own designers were switching tools mid-flow just to find familiar controls in predictable locations.

The Style Tab Mess: Why It Had to Change

The Style tab grouped controls by what they modified (like "product image" or "product title"), rather than how they modified it (like typography or border). This meant that users needed to guess where a font size control might be—was it under title? subtitle? product name?

Worse, some advanced styling options were locked behind paywalls. Users would hunt for a control, finally find it, and then discover it was gated. The lack of feedback and grouping consistency led to frustration.

We flipped the structure: now, all controls are grouped by property type:

• Typography

• Color

• Borders

• Shadows, etc.

Each group aggregates related settings across components. We also added better upgrade prompts for gated controls, setting clearer expectations.

Introducing the "Basics" Tab

With these insights in mind, we introduced a new "Basics" tab to anchor the panel experience. The structure became:

• Basics: Everything needed to get the tile functional—title, presets, list items, and quick-start inputs.

• Settings: Toggles to show/hide content, text customization, and optional tweaks.

• Style: Pure visual refinements, now logically grouped.

Why Basics First?

• It reduced cognitive overload.

• It gave users an immediate sense of progress.

• It separated essential setup from advanced tuning.

Visual and Structural Improvements

This wasn’t just a UX refactor—it was a visual rethink:

• We introduced cleaner defaults and simplified layouts.

• Some controls were redesigned to match the new structure.

• Each tab followed a visual hierarchy that was easy to navigate, reducing the time to first success.

Live Rollout, Zero Breakage

This was a live product with 100+ tiles, so we couldn’t afford disruption. We planned a phased rollout—but in production, not in staging.

Internal Component Standardization

As part of reworking tile style tags, we used the opportunity to standardize control properties across similar tile categories. For example, product grids used in search, listing, and wishlist pages now share the same styling controls—ensuring consistency and easier reuse.

This reduced the need to switch between internal & merchant facing no-code editors for achieving consistency. By exposing the right properties upfront, we made the workflow faster and more self-serve for designers and PMs.

Outcomes

• Internal efficiency: Designers stopped switching between the editors — everything they needed was in the new Properties Panel.

• Scalable framework: Rollout to 100+ tiles happened with zero regressions.

• Visual polish: Controls looked clean, consistent, and brand-ready.

• End users understood customization faster and with nominal support