At Apptile, Shopify merchants build mobile apps without code, using stackable components called Tiles. Each Tile is customizable through a right-hand panel in the editor.
But as Tiles grew in number and complexity, the panel became cluttered and unintuitive. We undertook a full redesign to simplify this experience for both internal teams and customers.
My Role
Owned the redesign end-to-end—scoped problems, restructured the panel, and led rollout coordination across 100+ live tiles.
Team
CPO, Senior Engineer (Manas), Designer (Aritra)
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:
Solving the Blank Panel
We added a simple fallback message with guidance when no tile was selected. This quick fix helped users orient themselves and reduced confusion during onboarding.
Mandatory Properties — Fixed at the Root
We took a two-pronged approach to solve the friction caused by mandatory fields; First, we improved visibility by grouping all required fields ensuring users saw what was needed right at the start. Then, we tackled the root cause—null triggers. By reworking 2–3 key controls to avoid null states altogether, we eliminated the very need for mandatory prompts.
Evolving the Structure: Introducing a Third Tab
Our panel originally had just two tabs—"Content" and "Style."
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.
