Making complex shop settings feel simple—and connecting them to a storefront that works.
Shop builder · Backend settings · Storefront · Mobile checkout
Design an online shop builder connected to a clear, structured backend settings system.
Design a shop builder supported by clear, structured backend settings.
The project unfolded in phases, each introducing new challenges. The central design task was to make complex backend settings easy to understand and manage, while maintaining a seamless connection to the customer-facing storefront.
Key questions shaped the design process:
What makes a settings interface intuitive and easy to navigate?
Where should tags and chips appear without obscuring product information?
How can discounted products be presented clearly?
What makes language management and translation flows intuitive?
How can checkout feel straightforward from start to finish?
Different businesses, one flexible platform.
Launch online stores with customizable templates and marketing tools.
Reach new customers while managing inventory in one place.
Build distinctive storefronts with customizable themes and plugins.
Support international customers with multiple currencies and languages.
Three principles guided decisions throughout the project.
Help shop owners set up, customize, and manage their storefronts independently.
Make settings and storefront interactions easy to navigate across devices.
Keep common tasks efficient through clear, user-centered workflows.
From understanding the problem to designing the experience.
Research user needs, identify pain points, and understand the problem.
Translate research findings into clear problem statements and project goals.
Explore a range of ideas and potential solutions.
Develop wireframes, mockups, and prototypes to test and communicate selected solutions.
Examples from the backend settings and the storefront.
Each screen shows the problem, the thinking behind it, and the resulting solution.
How might users navigate a wide range of shop settings without feeling overwhelmed?
Research, competitor analysis, and user feedback pointed toward a familiar, straightforward navigation structure.
A scannable settings overview with distinct entry points and concise descriptions.
How should individual settings pages organize information and controls for easy use?
Research, competitor analysis, and testing informed a simple structure with clearly defined sections.
A centered layout with clear groupings and consistent spacing, making settings easier to scan.
How can users add languages, edit translations, and remove languages without unnecessary steps?
Research, competitor analysis, and feedback supported editing translations directly in context.
A table-based interface with inline editing for managing languages and translations in one place.
How can product tags be displayed without covering important product imagery?
Research and surveys highlighted the need for a clear default view with flexibility to customize it. Competitor analysis informed the layout.
A flexible product grid that keeps imagery visible and places tags unobtrusively, using reduced opacity where appropriate.
How can shoppers recognize special offers and understand when they expire?
Research, testing, and feedback informed a simple presentation with prominent timing cues.
Timers and progress indicators distinguish active offers and communicate when deals end or begin.
How can shoppers explore product variants, including unavailable options?
Research and feedback helped shape familiar ways to switch between colors, sizes, and availability states.
Clear selection controls—buttons, swatches, and image-based options—make variants easier to compare.
How can shoppers understand what a bundle includes and how much they save?
Research and testing emphasized visibility of each included item and direct access to its details.
A clear list of bundled items, supported by a prominent savings label.
An additional exploration: mobile checkout.
A clear checkout flow helps shoppers complete their purchases with confidence. This exploration maps the key decisions and presents the mobile entry screen.
Mobile checkout user flow
Mobile checkout interface
Project outcomes
The principles that guided the work and the improvements the redesign aimed to deliver.
The key principles that kept usability at the center of design decisions.
User interviews, feedback, competitor benchmarking, and input from internal experts grounded decisions in evidence rather than assumptions.
Each MVP was scoped to deliver value while advancing a shared platform vision. Lessons from one release informed the next.
Shared interaction patterns, components, spacing, hierarchy, and visual language created a more consistent and predictable experience.
Ongoing collaboration with product, engineering, support, and QA helped balance user needs, technical feasibility, and business goals.
Early prototypes and usability checks helped test assumptions, clarify interactions, and reduce the risk of rework.
How the new progressive web app (PWA) addressed limitations of the previous system and supported product goals.
The new PWA replaced the previous LTS system with a foundation designed for greater speed, stability, and scalability.
Clearer flows and simpler decision points aimed to reduce friction during store setup and everyday management.
Simplified onboarding, inventory handling, and order management made core workflows more straightforward.
Shared UX patterns and a unified UI language supported faster collaboration and greater consistency across MVP releases.
Reusable components and consolidated interaction logic made it easier to extend the product and maintain consistency over time.
