Redesigning GemPages to reduce editor friction for 5,000+ Shopify merchants

GemPages is a Shopify page builder — a no-code editor that lets online store owners design high-converting landing pages, product pages, and collection pages without writing a single line of code. At the time of this project, it served over 5,000 active merchants, ranging from solo entrepreneurs to mid-size e-commerce brands.

As product designer at EcomSolid, I was responsible for the complete redesign of the GemPages Editor interface — the core workspace where users spend the majority of their time. The brief covered both a structural overhaul of the dashboard and the introduction of dark mode as a first-class feature.

GemPages had grown organically over time, and the editor dashboard showed it. Features had been added without a coherent structural principle — navigation was inconsistent, key actions were buried, and the workspace felt cluttered rather than focused. Merchants spending hours in the editor every day were dealing with friction that accumulated over every session.

The feedback from user surveys was consistent: the layout was confusing for new users, and experienced users had developed workarounds for common tasks that should have been straightforward. There was also a persistent request for dark mode — not just a preference, but a genuine usability issue for people editing at night or in dim environments.

I started with surveys and interviews with existing GemPages users — a mix of new merchants (under 3 months) and power users (over a year). The goal was to map the specific friction points in their daily editing workflow and understand how they mentally modelled the editor's structure.

Key findings: new users consistently got lost trying to find element settings; experienced users had memorized workarounds for tasks that shouldn't require them; and virtually every interviewed merchant mentioned wanting dark mode within the first 5 minutes.

I moved through several rounds of wireframes — focusing first on the information architecture of the sidebar and toolbar, before designing individual components. Each round was tested with a small group of merchants before moving to higher fidelity.

For dark mode, I designed the color system from scratch rather than simply inverting the light palette. Every component had to be verified against contrast requirements in both modes before being approved for development.

A restructured editor layout prioritising the most-used features at the top level of navigation, with a cleaner workspace that reduced visual clutter without removing functionality. Key editing tools moved from nested menus to the primary toolbar, cutting the average number of clicks for common tasks.

A full dark theme designed from the ground up — not a CSS inversion, but a purpose-built alternative color system with verified contrast ratios across every component. Dark mode became one of the most-mentioned improvements in post-launch reviews, with merchants citing reduced eye strain during extended editing sessions.

Both the redesign and dark mode maintained full compatibility with Shopify's design conventions and merchant expectations — an important constraint that shaped many interaction decisions throughout the project.