Theme Editor
A B2B2C Tool for Customizing Payment Checkout Pages
Overview
The Theme Editor is a tool integrated into a fintech company's system that allows merchants to customize their payment checkout pages independently. It simplifies the customization process and helps merchants launch branded payment pages with less reliance on manual development.
ROLE
Competitive analysis | Wireframing | UI design | Prototyping | Collaboration
Understanding the Problem
Currently, when a merchant requests a branded and customized payment page, the process involves three main steps: creating mockups, developing a customized template, and testing it on the merchant's site for approval. The process typically takes 4–5 months from initial request to market and is better suited to large merchants who require a personalized service.
The goal of this project was to create an editor that would allow small and medium-sized merchants to design their own customized checkout pages in just a few steps, reducing the time and effort required to launch them.
Competitive Analysis
I conducted a competitive analysis of companies offering editors for payment checkout pages, focusing on editor structure, navigation and orientation, consistency, feature sets, and product limitations. The research helped identify common patterns and considerations for designing the editor.
Insights
The competitive analysis of editors from companies such as Shopify, Wix, Bolt, and Stripe helped identify common patterns and considerations for the Theme Editor.
Organized sections for editing
Organizing the editor into clear sections allows merchants to easily find and edit the parts of their checkout page they need.
Wide range of customization options
Providing a variety of customization options gives merchants more flexibility to create a personalized and branded checkout page without requiring extensive technical knowledge.
Cross-Platform Functionality
Allowing merchants to customize their checkout pages across different platforms helps maintain a consistent experience across devices.
Ideation Process
We conducted several collaborative workshops, including brainstorming sessions with cross-functional teams such as UX designers, developers, product managers, and system analysts. These sessions helped us understand the limitations of the existing system and consider different perspectives when defining the editor.
The Challenge
The developers had two predefined templates for payment pages, which significantly limited the flexibility of customization. The goal was to create a user-friendly editor that allowed merchants to personalize their checkout pages while working within these existing constraints.
Design Process
Initial Mockups
The initial mockups were created and reviewed during a collaborative workshop. We discussed different aspects of the design, including layout, functionality, and user flow, and used the feedback to refine the initial concept.
I collaborated closely with the development team to understand which aspects of the templates were adaptable and which were fixed. Based on these constraints, I focused on two key features to improve the user flow:
Modular Editor
Created a modular editor with predefined style variations, allowing users to easily find and edit specific elements of their checkout page.
Real-Time Preview
Provided users with an interactive preview of their checkout page as they made changes, giving them immediate feedback and reducing the need for multiple iterations.
The Solution
Modular Editor: Instead of offering complete freeform customization, which was not technically feasible, I designed a modular editor with predefined style variations. This allowed merchants to customize key elements such as colors, fonts, and button styles within the existing structure.
User Gains: Instead of offering complete freeform customization, which was not technically feasible, I designed a modular editor with predefined style variations. This allowed merchants to customize key elements such as colors, fonts, and button styles within the existing structure.
Real-Time Preview: The right side of the screen provides a live preview of the checkout page as changes are made.
User Gains: The real-time feedback allows users to immediately see the impact of their changes and make adjustments without repeated back-and-forth.
Prototype
Flow 2
View stock data and insert unused milk bags to the app's donations stockpile.
Additional Actions
There are two scenarios in the Theme Editor: a new merchant without an existing theme and a merchant with a pre-configured theme already applied to their site.
After a theme is added to the merchant's site, the system displays the existing themes across desktop, mobile, and tablet. The following actions are available:
-
Edit– Modify the theme's design.
-
Remove Theme– Available only when more than one theme exists.
-
Publish/Unpublish– Control the theme's visibility.
-
Rename–Change the theme's name.
-
Duplicate– Create a copy of the theme or use it as a starting point for another site.
-
Export to Production– Transfer the theme from one system environment to another without repeating the entire editing process.
Theme Selection
The merchant can select from different themes, which are categorized by industry based on the merchant's site—Gaming, Forex, and E-commerce
.png)
Themes On Site
This page displays all merchant themes connected to a specific site name.
.png)
Additional Actions
Merchants can perform the following actions on each theme: publish, rename, edit, duplicate, export, and remove.
The Editor
This page allows the merchant to select a section to customize and design according to the company's branding
Project Conclusions
1. Ongoing Challenges:
-
System and development limitations: The current system has technical limitations that affect the implementation of certain features and functionality. Working closely with the development team is important to identify possible solutions while staying within these constraints.
-
One of the challenges was finding the right balance between giving merchants flexibility to customize their checkout pages and maintaining a consistent and user-friendly experience.
2. Next Steps:
-
Address system constraints: Work with developers to explore solutions for the current system limitations.
-
Refine and test: Continue refining the design based on feedback and usability testing to better understand how merchants interact with the tool and identify areas for improvement.