Mockup: Re-architecting a Native Editor System

Mockup is a native iOS, iPadOS, and macOS design tool used by over 636k designers to sketch, wireframe, and prototype ideas.
As it evolved into an advanced design environment, the editor became both the product’s core surface and its scalability risk. I led the re-architecture of the editor system to support growth without increasing cognitive load or compromising native behavior.

Timeline

September-November 2025

Platforms

iOS · iPadOS · macOS

Project under

Apprime Studio

Role

Product Designer

Team

1 Developer (founder & manager)
1 Product Design Intern (under my direction)

The editor hit a structural limit

Mockup’s feature set was expanding quickly. Users requested advanced capabilities such as gradients, shadows, columns and rows, and snap-to-guides. In parallel, Apple Design Evangelists recommended adding Liquid Glass elements to support designing for iOS 26 and iPadOS 26.

As the team planned the new features, we noticed that the editor sidebar had become difficult to scan.

Adding new capabilities risked increasing confusion.

Signals that confirmed the breakdown

The problem surfaced consistently across qualitative feedback and internal testing.

——————————————————————————————————————————————————————————————————————————————————————————--——————————--———

App Store reviews & user emails

1

The editor was described as “confusing,” particularly for prototyping

2

Features were reported as “hard to find”

3

The elements section was described as “messy” as new sets were introduced

App Store reviews & user emails

1

The editor was described as “confusing,” particularly for prototyping

2

Features were reported as “hard to find”

3

The elements section was described as “messy” as new sets were introduced

Internal usability testing

1

No clear hierarchy, all tools competed equally for attention

2

Inconsistent button priority

3

The elements section became overwhelming with added sets

4

Existing UI and interaction details felt unpolished, especially in prototyping

It was the absence of scalable system.

Defining the design strategy

I led a comparative analysis of native Apple apps across the iOS, iPadOS, and macOS, as well as established design tools, to better understand expectations around editor organization.

Clear patterns emerged.

Native Apple apps

rely on grouped lists, where features and their options live

Native Apple apps

rely on grouped lists, where features and their options live

Industry tools

1

Group related featured under titled sections

2

Progressively reveal options

3

Often allow users to show or hide entire sections

Across both, hierarchy was the primary mechanism for scalability.

The goal was to create an editor structure that could absorb new features while decreasing cognitive load.

Exploration & direction setting

I explored an industry-informed adaptation of the native pattern.

The challenge was

1

Resolving grouping, density, and interaction patterns

2

Ensuring consistency, scalability, and feasibility across devices.

Three grouping approaches were considered

1

Each function remained independent, with repeated titles across rows

2

Related controls grouped under shared sections (e.g. Appearance)

3

Broader groupings (e.g. Appearance and Effects)

Option 2 was selected as it reduced redundancy while maintaining clear, intuitive grouping. Due to constraints introduced by the Liquid Glass system, translucency required careful handling of backgrounds, colors, and opacity.

I focused on consistency and feasibility

Controls were unified across the editor (steppers, sliders, toggles,…), aligning similar actions under consistent patterns.

To manage density, especially on iPhone,

I explored collapsible sections. Collapsing higher-level views wasn't implementable, so I applied it to section-level groupings (Appearance, Effects).

In parallel, I explored scaling the elements library

1

A sheet-based approach (similar to Figma)

2

Inline editing within the sidebar

The sheet introduced friction and stacked modals on iPhone, so we selected inline sidebar editing, allowing users to manage visibility directly in context. Grouping element sets was also explored and discarded in favor of keeping them independent to simplify editing.

to enable direct customization where growth was expected. We aligned on a contextual model, where visible element sets adapt to the current sketch. I then evaluated two management patterns:

I led the decisions throughout,

while a Product Design intern explored component-level variations under my direction, enabling rapid iteration while maintaining consistency.

These iterations clarified the limits of the model before it was formalized in the final system.

The editor system

I re-architected the editor sidebar around consistent, grouped, titled, and collapsible sections.

Grouped lists and headers

improved scannability and established a clear hierarchy

The editable elements section

allowed users to show or hide entire element sets directly within the sidebar as Liquid Glass sets were added

Collapsible sections

reduced visual clutter and improved reachability on iPhone

Alongside the structural changes,

I clarified button priority and refined existing UI and interaction details, particularly within prototyping, so legacy features fit naturally within the new system

Impact

"The right-side inspector panel gains a cleaner layout with new Appearance and Effects sections […]"

Only publicly released work is shown. Internal explorations remain confidential.

Mockup is a product of Apprime Studio. All designs and trademarks belong to their respective owners.