Lunacy case study

Designing features for a more approachable desktop editor

An interaction design case for a native Windows design editor, focused on making interface building and common canvas editing easier for less experienced users.

Role

Product Designer

Product

Native design editor

Platform

Windows desktop app

Focus

Interaction patterns and editor usability

Context

Make a professional editor feel easier to start with.

Lunacy is a native Windows design editor with built-in assets such as icons, photos, illustrations, and UI kits. The product team wanted to move it in a more approachable direction without turning it into a lightweight tool.

The direction was already defined when I joined. The design work was about translating that direction into editor interactions that reduced the amount of product knowledge people needed before they could build and edit useful interface layouts.

Help users build interfaces without learning advanced UI kit workflows first
Make reusable elements easier to understand, place, and edit
Move frequent editing decisions closer to the object on canvas

My role

I translated the product direction into editor interactions.

I worked as a Product Designer on feature design for the editor itself. The main task was to turn a strategic direction into concrete interaction patterns that could fit into an already complex desktop product.

Translated a more approachable product direction into concrete editor behavior
Designed interaction patterns for components, states, alignment, and text editing
Worked within the constraints of a complex native Windows design tool

Challenge

Simplify a professional editor without removing capability.

Design tools often assume a lot of prior knowledge. For Lunacy, the challenge was to make common workflows feel more direct while keeping the power users expect from a desktop editor.

Component mechanics were powerful, but hard for less experienced users to approach
Many common actions depended on detached right-side property controls
Simplification had to preserve the depth expected from a professional editor

Feature 1

A simpler component system for non-designers.

Non-designers often needed to assemble interfaces without understanding advanced component or UI kit workflows first. We introduced basic elements such as buttons, inputs, checkboxes, radio buttons, toggles, dropdowns, and lists.

These elements gave users a practical alternative when complex UI kits such as Material or iOS were too heavy for the task. The larger idea was to make interface building and editing feel more direct: elements lived in libraries, had understandable states, and could be edited without manually digging through symbol mechanics.

Basic elements and libraries

Lunacy basic UI elements — Basic elements gave users a simpler set of interface building blocks when full UI kits such as Material or iOS were more than they needed.

Lunacy basic element categories — Users could start from familiar categories such as buttons, text inputs, checkboxes, radio buttons, toggles, dropdowns, and lists.

Element states

Creating a new element state — Creating a new state stayed inside the same editor context instead of becoming a separate advanced workflow.

Direct editing

Element selected on canvas — Selecting an element exposed the reusable object in context before entering a deeper editing mode.

Symbol editing on canvas — Direct editing kept the object and its context visible, instead of making users dig into symbols manually.

Feature 2

Moving common editing actions closer to the canvas.

Many common edits in design tools happen through the right-side properties panel. That works, but it constantly pulls attention away from the selected object.

Magnets and the floating text toolbar used the same principle: keep frequent decisions close to the canvas, where the user is already looking.

Floating toolbar for text

Magnets for alignment

Magnets made alignment available next to the selected object, reducing the need to hunt through panel controls.

Magnets inside a frame — Magnets made alignment behavior visible directly around the selected object.

Magnets with multiple selected objects — The same interaction pattern helped users understand spacing and alignment across multiple objects.

Why this case matters

Small interaction choices shaped a more approachable desktop editor.

Lunacy was not a web app or a lightweight prototyping tool. It was a native Windows editor, where small interaction details could make complex functionality feel either approachable or hidden.

The value of this work was in making reusable elements easier to work with and bringing frequent editing actions closer to the object being edited.

Reusable elements became easier to start from, modify, and reason about
Common editing actions became more visible near the selected object
The case shows interaction design work inside a dense desktop product

Learnings

Simplifying a complex tool is about reducing effort, not removing capability.

This project taught me that simplifying a complex tool is not about stripping features away. It is about reducing the effort required to use those features.

It also reinforced how different desktop product design can be from web or mobile. In dense editor interfaces, the UX often depends on whether controls feel connected to the object and task itself.