Theme Editor
A B2B2C Tool for Customizing and Designing Payment Checkout Pages
Overview
The Theme Editor is a tool integrated into a Fintech company's system, designed to allow merchants to independently personalize their payment checkout pages. It simplifies the customization process, enabling merchants to quickly and efficiently launch their payment pages.
ROLE
Competitive analysis | Wireframing | UI design | Prototyping | Collaboration
Understanding the Problem
At the current stage, when a merchant requests a branded and customized payment page, the process involves three major steps: creating mockups, developing a customized template, and testing it on the merchant's site for approval. This process typically takes 4-5 months from start to market and is more suitable for large merchants that require a personalized service.
The goal of this project was to create an editor that allows small and medium-sized merchants to design their own customized checkout payment pages in just a few steps, significantly reducing the overall time to market.
Competitive Analysis
Research was conducted on various companies using editors for payment checkout pages, examining elements such as editor structure, navigation and orientation, consistency, feature sets, and product limitations to avoid design errors.
Insights
Conducting a competitive analysis helps us understand the market landscape and identify opportunities to make our Theme Editor stand out. By evaluating competitors like Shopify, Wix, Bolt and Stripe, we gain insights into their strengths and weaknesses, enabling us to improve our product:
Organized sections for editing
Provide merchants with the flexibility to edit each needed section by organizing the editor into specific categories.
Wide range of customization options
Offers flexibility to create a truly personalized and branded checkout page without needing extensive technical knowledge.
Cross-Platform Functionality
Provides users with the flexibility to edit and customize their check out pages for all platforms, ensuring a consistent experience across different 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. Each team member brought unique perspectives, helping us understand the limitations in our system.
The Challange
The developers had two predefined templates for payment pages they used, which significantly limited the flexibility of customizations. The goal was to create a user-friendly editor that allowed clients to personalize their checkout pages while staying within these constraints.
Design Process
The initial mockups were created and reviewed collaboratively during the workshop. We discussed various design elements, including layout, functionality, and user flow, incorporating feedback from all team members to refine and enhance the design.
Initial Mockups
I collaborated closely with the development team to understand which aspects of the templates were adaptable and which were fixed. Two key features were focused on to enhance the user flow:
Modular Editor
Creating modular editor with predefined style variations to allow users to easily find and edit specific elements of their check out page.
Real-Time Preview
Provide users with an interactive preview of their check out page as they make changes, ensuring immediate feedback and reducing the need for multiple iterations.
The Solution
Modular Editor: Instead of offering complete freeform customization (which was not feasible technically), I designed a modular editor with predefined style variations. This solution allowed clients to customize key elements like colors, fonts, and button styles within the given structure
User Gains: This organized layout allows users to quickly find and edit specific elements of the check out page, making the customization process straightforward and efficient.
Real-Time Preview: The right side of the screen provides a live preview of the cashier page as changes are made.
User Gains: Real-time feedback helps users visualize the impact of their edits immediately, ensuring that the final product meets their expectations without the need for constant back-and-forth adjustments.
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.
In both scenarios, after a theme is added to the merchant's site, the system will display the existing themes across all platforms—desktop, mobile, and tablet. The following actions are available:
-
Edit– Modify and change the design of the theme.
-
Remove Theme– Enabled only if there is more than one theme.
-
Publish/Unpublish– Control the theme’s visibility.
-
Rename– Modify the theme’s name.
-
Duplicate– Create a new version or copy the theme to another site.
-
Export to Production– Transfer the theme from one system environment to another without redoing 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: We have encountered several limitations within our current system that affect the implementation of certain features and overall functionality. Addressing these constraints will be crucial for achieving the desired user experience and product performance.
-
Consistency issues: There has been a lack of consistency among team members regarding the balance between total customization for clients and maintaining a consistent and user-friendly experience. Some team members support an extensive customization options without fully considering the potential negative impact on user experience and interface consistency.
2. Next Steps:
-
Address system constraints: Work with developers to explore solutions for system limitations.
-
Develop and test: Continue to refine the design based on feedback and usability testing to test how the merchants interact with this tool. Use this feedback to guide further development and adjustments.