Payment Gateway: Merchant Experience
Duration
Toolset
Platform
Team Size
3 Years & counting
Figma, FigJam, Fullstory, Jira, Trello
Web
27 Members
As a designer, I guide strategy and execution to align user needs with business goals. I focus on understanding requirements, defining effective UX strategies, and driving innovative solutions. I manage usability testing and feedback to refine designs for optimal usability and accessibility.
Collaboration with stakeholders, product managers, engineers, and other teams ensures a unified approach to delivering an intuitive user experience.
Imagine being a business owner juggling one software for subscription billing and another for payments—dealing with mismatched data, inefficiencies, and constant back-and-forth. This product eliminates that hassle by offering a single, unified platform where billing and payments work seamlessly together.
The Problems 🚨
New merchant
New businesses without a payment gateway face challenges in managing billing and payments effectively. They need a unified solution integrated with Chargebee to streamline processes and support growth.
Existing merchant
Businesses with existing payment gateways face inefficiencies and lack seamless integration with Chargebee, disrupting workflows and impacting customer experience. They seek a robust, integrated solution to streamline operations.
Challenges 🧗🏻
Competitive Landscape
Competing with established payment providers like Stripe, PayPal, and Adyen, requiring a differentiated approach tailored to Chargebee merchants.
Technical Integration
Balancing standalone product development with seamless integration into Chargebee’s core APIs, requiring close collaboration with engineering teams.
Time to Market
Delivering a strategic and competitive solution under tight timelines while ensuring quality and usability.
UX Canvas ✍🏼
When we had knew what are we aiming to solve, we used a collaborative approach to gain insights and define the project's direction.
-
Gain insights into the user's problem and expectations ⭐️
-
Identified users and defined expected benefits
-
Listed assumptions and questions that we needed to validate
-
Collaborated with stakeholders, product managers, legal teams, product general manager, and UX writers
-
Ensured a comprehensive understanding of the project’s scope and requirements
Competitive Analysis 🤼♂️
To stay ahead in the market, we analyzed three key competitors, diving into market trends and pricing strategies. This comparison guided us in crafting a competitive solution, complete with a robust subscription billing system.
Journey Map 🛣️
Iterative step
To provide the best experience for merchants, we thoroughly studied their journey, which helped us identify key opportunities for improvement.
-
It includes 2 main categories: Onboarding and Manage.
-
Phases: Need, Exploration & Education, Test, Setup, Collect Payments, and Manage Payments.
-
The journey map was reviewed with SMEs to make sure we included everything they needed to get on board and manage the payment gateway.
User Interactions 🙌
Iterative step
Here, the goal was clear: ensure users could interact with the system to complete tasks efficiently. We used the following techniques to achieve this:
Use Cases
Use cases helped us keep track and ensure design coverage is at most.
User Flows
User flows kept our focus on the needs of the user, and it gave us an overall picture and the opportunity to create a more seamless user experience.
Task Flows
Task flows did make the interaction minimal and meaningful to the users. Validation with the stakeholders brought some insights about users' mindsets while completing a particular task.
The Solution 💡
Iterative step
After finalizing the sketches, we transitioned to creating detailed visual designs. This phase focused on both refining aesthetics and implementing solutions through enhanced components tailored to our system.
Key highlights of this phase:
-
Enhanced Components: These are designed to address specific user needs and streamline workflows.
-
Consistency: Introduced uniformity across the platform for a cohesive user experience.
-
Alignment with Branding: Ensured visual designs adhered to Chargebee's updated branding while integrating modern elements for enhanced usability.
-
Collaboration: Worked closely with stakeholders and engineers to validate feasibility and refine components.
-
Problem Solving: Developed solutions that addressed identified challenges while delivering a seamless user experience.
Usability Testing 🔬
Iterative step
We conducted a usability test with 4 participants to ensure the user flows we designed were easy to interact with and included all the details merchants expected to see to solve their problems.
To test the product, we used a combination of Figma prototypes and coded prototypes. Since the onboarding process involved a form structure, testing that flow with a coded prototype provided us with real feedback from participants.
Use Cases Tested
-
Onboarding
-
Navigation
-
Accessing alerts & notifications
-
Responding to disputes
-
Refunds
-
Accessing deposits
Feedback Grid 📝
We used a feedback grid to ensure every comment and thought was noted down, allowing for better review and prioritization.
This was a collaborative activity with the team, which also helped us gather their feedback on users' reactions to specific tasks.
Feedback grid includes following sections:
-
Worked
-
Change
-
Questions
-
Ideas
-
Parking lot : To be picked later
Design Documentation 📂
Iterative step
After reviewing the designs as a team, the next step was the engineering handover. To ensure clarity, we created detailed design documentation that outlined the rationale behind key decisions and provided references for future updates or changes.
Design documentation includes:
-
Product design overview
-
Insights
-
Visual design specifications
-
Testing and feedback comments
-
Handoff and implementation notes
Outcomes & Lessons 🏆
-
The payments domain is complex yet rewarding, offering valuable insights through performance statistics.
-
Collaborating with all departments, especially the engineering team, was amazing. In the end, merchants interact with the code developed by the engineering team, not just the Figma prototypes.
-
I had the opportunity to validate the design through a game-changing usability test, which provided feedback that positively impacted the designs.
-
We went beyond Figma, creating coded prototypes that resulted in more accurate feedback on the interactions.
-
The design documentation I created was well-received by the engineering, legal, and documentation teams. They are using it to reference design specs and decision trails.
-
I had the chance to lead the end-to-end experience for this product, learning new things daily.
-
We continuously strive to reinvent the experience, making it more optimal based on the feedback we receive daily.