Back

Automating Success: How We Designed a Checkout Flow that Empowers Users and Teams at xChange

My role

Led internal research, working closely with finance operations teams.
Project lead responsible for mapping user flows and creating final designs.
Ensured technical viability through iterations, involving tech and design reviews.
Collaborated closely with developers for a successful project handoff.
Played a pivotal role in transitioning the flow to the new UI kit (Compass design system).

My role

Working on the checkout part of the wallet product was my first feature work and my initiation to the product as a whole. This project helped me understand the product in depth and get a better understanding of how it operates.

During the project i led the end to end design direction, user research from both interviews and internal stakeholders as well as deployment and user testing.

The projects launch was met with success based on our metrics and feedback from both customers and internal operations teams.

Outcomes

Significant decrease in support communications and tickets.

Automated the process, allowing internal teams to focus on larger tasks.

Improved customer experience and transaction efficiency.

Key screens

1.a Main screen showing all available payment options.

1.b Dynamic overview card with a module structure.

1.c Success / Failed widget showing vital information regarding the transaction.

Context

Customers engaging with the xChange trading product faced inefficiencies in the checkout process. Transactions were reliant on manual email communication, posing challenges for both customers and internal teams. This manual approach not only consumed considerable time but also introduced the potential for errors, hindering the overall efficiency of the trading platform.

Significant decrease in support calls and tickets.

Automated the process, allowing internal teams to focus on larger tasks.

Improved customer experience and transaction efficiency.

To address these challenges, a comprehensive research phase was initiated. User interviews were conducted to gain valuable insights into customer pain points and preferences. Simultaneously, internal research involved close collaboration with payment operations teams, who were in constant communication with clients. Based on this research we came to the following conclusions.

The problem

As a first step after the research phase was to create a problem statement and a hypothesis. These two key information pieces would used to align both the product team stakeholders and also inform other product teams in the organisation.

Hypothesis

By automating and optimising the transaction flow, we could not only decrease support calls but also significantly enhance the overall user experience. The transition from manual to automated processes would empower internal teams, allowing them to redirect their focus towards more substantial tasks. Furthermore, the integration of invoice features aimed to address user feedback, fostering increased engagement and transactions.

By having a clear and well constructed hypothesis that is based on real data, we were able to pin point three major aspects that would need to be adressed during the flow creation. These aspects or points were crucial in the success of this project.

“The process should be simple and modular enough to cover multiple products.”

Wallet integration: Customers wanted to use the wallet balance as a means of payment for their transactions.

Payment methods: Aside from the wallet, customers expressed their opinion that the checkout should include other popular payment methods such as credit card and bank transfer.

Streamlined approach: The checkout flow would set the precedent on transaction endpoints. Thus a modular approach would be beneficial.

The project focused on streamlining the checkout process into a few pages, aligning with established e-commerce patterns. Integration with Stripe was implemented to ensure secure and efficient transactions. The payment flow was meticulously designed to accommodate both wallet balance (platform-specific credits) and third-party payment methods, such as credit cards and bank transfers. Rigorous attention was given to address multiple edge cases for a robust solution.

Creating the flow

The flow focused on streamlining the checkout process into a few pages, aligning with established e-commerce patterns. Integration with Stripe was also implemented to ensure secure and efficient transactions during the payment process. The payment flow was meticulously designed to accommodate both wallet balance (platform-specific credits) and third-party payment methods, such as credit cards and bank transfers. Rigorous attention was given to address multiple edge cases for a robust solution.

4.a High level overview of the main flow.

Another aspect of the checkout flow was the use of the wallet balance. This balance refers to the balance a customer might have after transacting on the platform. By utilising this balance, the user will be able to complete transaction based on their earnings from previous deals and thus reach their goal faster. To accomadate this feature we created a flow specifically with the usage of the wallet in mind as a default. This enabled us to cover all edge cases as show in the image 4.b.