Skip to main content

Redesigning a Pixel Art Workspace Without Breaking Its Loyal Users

A UI/UX case study of reorganising a professional pixel art and animation tool around the canvas - 70+ interactive components, built without codebase access.

Redesigned Pro Motion NG workspace with a central canvas surrounded by docked panels for colour editing, layer management, and animation timeline
70+ interactive, resizable, swappable components
6+ tools benchmarked in competitive analysis
3 core interface problems identified
0 core tools dropped for existing artists

Disclaimer

Note that, I've omitted any confidential information from this case study. The insights shared here are my own and don't necessarily represent the views of the client.

Context


Pro Motion NG is a specialised drawing tool for creating pixel-precise images, animations, sprites, tiles, and level maps used in games. A staple for pixel artists in the gaming industry and lightweight web graphics. Under the hood it packs animation layers with blend modes, custom brushes, a tile map engine, onion skinning, colour palette editing, symmetry drawing, a gradient engine, and more.

My role was UI/UX designer. I had no access to the codebase, so this was a pure design engagement. The goal was to modernise the workspace, reduce cognitive load, and make the tool's extensive feature set more approachable without losing the capabilities existing users rely on. The design was delivered as mockups, user flows, and a documented design rationale with handoff to the client.

Challenges


Pro Motion NG carries a rich heritage. Its retro-inspired design and vast feature set built over years of development are part of its identity. That same depth meant the interface had grown dense, with many high-utility tools buried under layers of complexity. There were multiple layers that required addressing:

  • Visual Noise

    Many small, high-contrast elements competed for attention simultaneously. The dense layout of panels occasionally overshadowed the central canvas, so the artwork - the thing the tool exists to produce - was not always the thing you looked at first.

  • Deep Nesting

    Critical tools required multiple clicks to reach. Capability the tool already had was buried under the navigation needed to find it, which made the depth of the feature set read as complexity rather than as power.

  • Flat Visual Hierarchy

    Inconsistent spacing and weight meant active tools looked the same as passive information. Without a clear hierarchy, it was hard to tell what the software was currently doing, which made a capable tool feel harder to use than it should have been.

  • Backwards Compatibility With Its Users

    A redesign this thorough risks alienating the existing user base: the artists who have relyed on Pro Motion NG for years and know every quirk. Modernising the surface without invalidating the workflows underneath it was the real constraint.

Strategy


Rather than overhaul everything, the goal was to reorganise and bring natural intuitiveness to the experience - making the immense capability more approachable for a new generation of pixel artists, without losing the fundamentals existing users rely on.

Two decisions carried the work. First, conventions over novelty: anchor the redesign on layout patterns, shortcut logic, and interaction models artists already have in muscle memory from other tools, so the learning curve is someone else's. Second, curate the default view: surface only what is needed to start a session, so the workspace solves the "cold start" problem professional tools often ignore.

Discovery & Research


The redesign was driven by user-centred research, not assumptions. To find out where the interface was failing artists, I worked from three angles: what competing tools have already solved, where users get stuck in the product itself, and what working artists say about it outside the product.

  • Competitive Analysis: Compared Pro Motion NG against modern pixel art editors (Aseprite, Pyxel Edit, GraphicsGale) and general-purpose raster tools (Photoshop, Krita, Clip Studio Paint) to identify where expectations had diverged. Many of the concepts and tools the interface still offered were no longer used across raster editors, which told me the redesign was not a visual refresh so much as a bring-in line with current practice.

  • Support Ticket Analysis: Read through support tickets to find which features users struggled to find. Tickets showed the problem was rarely "this tool is bad" and almost always "I could not find this tool", which pushed the work toward reorganisation and discovery over new capability.

  • Forums & Community Threads: Reviewed forum threads and subreddit discussions to collect recurring frustrations. The complaints clustered around the same density and navigation problems the audit had flagged, confirming them as widespread rather than personal gripes.

  • Direct Artist Conversations: Spoke with artists on Discord and pixel art communities for first-hand accounts of what needed to change. A common thread emerged: users valued Pro Motion NG's unique capabilities (the animation engine, tile map editor, palette tools) but felt the interface was getting in the way. That sentence became the filter for every later design decision.

With that filter in place, the research pointed at one move: keep every unique capability exactly where power users expect it, and spend the redesign's budget on everything around it.

Design Standards & Inspiration


With the direction set, the next question was what to anchor it on. To make the transition smooth, I anchored the design on conventions users already know. Photoshop is the most widely used raster editing tool in the world, so I studied its layout patterns, shortcut conventions, and interaction models - adapting them where they made sense for pixel art workflows.

At the same time, I looked at the pixel art tools artists actually use today. Aseprite's quick colour swapping, Pyxel Edit's tile map interaction, and the clean minimalism of modern creative apps all influenced the direction. The goal was not to copy but to create an environment where a user coming from any of these tools would feel immediately at home while discovering what makes Pro Motion NG unique.

Rebuilding the Workspace as a Modular System


Pro Motion NG already offered modular panels that could be hidden, shown, combined into tabbed groups, or rearranged around the workspace. The building blocks were there, but working with them did not feel natural. So I focused on making every module intuitive: panel interactions refined with clearer visual cues, module structure normalised, and consistent corner radii, padding, and typography weights applied across every docked panel so the workspace reads as one environment rather than a collection of separate widgets.

Related tools are clustered by proximity to minimise eye travel, and the default view was curated to surface only what is necessary to start a session. The result is over 70 interactive, resizable, and swappable components that compose the interface for multiple needs - each one behaves consistently, so the same building blocks can assemble a distraction-free canvas or a fully loaded production workspace.

Redesigned top toolbarTools panelWorkspace windowIcon setLayers panelAnimation panelActions panelBrush collectionColour editorPreview windowSettings panelGeneral panel

Every designed module and underlying component provides interactions at prototype level, are easily swapped for different workspace visualisations, and are fully responsive, showcasing layouts at different resolutions.

For Long-Time Artists: Preserving the Muscle Memory


The riskiest part of a redesign this thorough is the existing user base. So I worked backwards from it: list what long-time artists would lose, then commit to keeping all of it.

  • Colour palette editor: ramp and harmony tools stayed exactly where the workflow expects them
  • Constraint engine: kept intact for legitimate hardware graphics modes
  • Formula paint mode: unchanged behaviour, refreshed presentation
  • Pattern drawing engine: preserved, since it is part of the identity

Some UI patterns were kept intentionally familiar, refreshed just enough to feel modern without forcing long-time users to relearn muscle memory. Nothing was removed to make the layout prettier.

For New Artists: Starting From the Canvas


Where the previous interface opened with everything at once, the redesign opens with the artwork. The content is always the hero, the canvas is prioritised, and generous whitespace replaces the clutter that used to compete with it.

That applies to scale, which is where the redesign deviates most from the original layout. Even at a small scale the layout communicates "professional pixel art editor" with clarity and balance. For artists who prefer a distraction-free environment, every component can still be hidden, leaving just the canvas and a minimal tool set - but now getting there and back is a deliberate, fluid action rather than a hunt through menus.

For the Client: A System Ready to Build


With no codebase access, the deliverable had to carry the implementation. So every panel was specified at prototype level rather than described, which meant the client received 70+ components that could be reviewed as working interface rather than as static screens.

The design centres on a dark, neutral workspace that keeps focus on the canvas and artwork, with consistent corner radii, padding, and typography weights unifying every docked panel. The core achievement of the design: moving from a dense, flat list of tools to a structured workspace where information density is managed intentionally. Pro, without the clutter.

Original Pro Motion NG interface with high visual noise, dense fixed-panel layout, and flat visual hierarchy competing for attention The original interface: dense fixed panels competing with the canvas for attention.

Impact


The proposed design harmonises the complex feature set into a cohesive, modern workspace, balancing high-density functionality with a clean, professional aesthetic. The intended outcome: a flexible, modular workspace that adapts to how artists work, familiar conventions that lower the learning curve, and a visual refresh that makes the software feel current without chasing trends, focused on what works.

70+ Components

Interactive, resizable, and swappable modules composing the interface for multiple workspace needs.

0 Tools Removed

Palette, constraint, formula paint, and pattern drawing tools all preserved for long-time artists.

prototype Handoff

Every module specified at prototype level, delivered as mockups, flows, and documented rationale.

The full design was delivered as mockups, user flows, and a documented rationale. The client received walkthroughs of every key decision, from layout structure to interaction patterns. What they build with it is theirs to execute.

Learnings & Retrospective


The project was delivered as design rather than shipped product, so the honest read is on the process. Two things carried the most weight:

  • Anchoring on conventions beat designing for novelty: Studying Photoshop's layout patterns, Aseprite's quick colour swapping, and Pyxel Edit's tile map interaction gave artists a familiar starting point. A user coming from any of those tools could get productive immediately, while the space that was left for invention was spent on what makes Pro Motion NG unique.
  • Filtering every decision through one sentence: "Artists value the capabilities, the interface gets in the way." That came out of the artist conversations and it settled arguments that layout preference alone would not have.
  • What I'd do differently: validate with artists before finalising panels: With no codebase access and a handoff-based engagement, the design was validated through rationale and walkthroughs rather than observed artist sessions. Prototype testing would have turned the density argument into evidence.