OVERVIEW 

Wetravel is a payment platform for travel organizers to collect and distribute payments securely and manage bookings efficiently.  

In addition to gather and synthesize the payment platform research, ( see Wetravel Research, I developed the design for the payment process.

Coming to the project, Wetravel was only focusing on trip organizers to collect payments from customers, there were no features for trip organizers to pay their vendors.  

To solve this problem, we came up with all possible solutions, and it was a lot of fun bouncing ideas with rest of the team. Our research was helpful for consolidating ideas around what Wetravel represent, and we made sure to validate the approach and messaging with the founders along the way. In the end, I pulled together the dashboard and the flow for sent/request payments.

LT;DR 

A quick preview of some screens from the final product. More below about the process.

THE PROCESS 

USERFLOW 

I love the uphill challenge of brainstorming a user flow from nothing, and this project was particularly engaging because we needed to juggle the vendor and the organizers in one platform.  

Initially, we mapped out the main tasks respectively for the organizer and vendor. The main task for the organizer is to send payment to the vendor, while the main task for the vendor is to accept/request payment from the organizer. Quickly, we encountered some setback as the planning got complicated. We realized their unique tasks would require different page views.

Coming back to the drawing board, we decided that having the same views for the vendor and the organizer is crucial, especially on the main page views. We reworked the flow so the organizer and the vendor would use the page harmonious. We focused on the dashboard to be versatile for both parties.

Design Sprint

We did a design studio to come up with various solutions, which is an intensive process of sketching, presenting, collaborating, and validating among the team. I focused on the dashboard, and the payment flow when uses request payments.

Things we had to consider were: What are the common yet crucial information to show for both vendor and organizer? How many activities would the user interested to see? What information should be included in the summary? What is the visual hierarchy of the information? How would the flow looks like?

Wireframe

While we were sketching out the dashboard, we have to carefully select  the functionality and wording.

Above is the design process through the ideation phase. As expected, the process was more of an organic journey than linear path, consisting of constant revisit of the previous steps and reiteration.

Lo-Fi Testing

We fleshed out the UI sketches, created lo-fi wireframes, and got down the clickable prototype for validation testing. We conducted validation testing with 7 users, and found out there were a couple issues with wording on the dashboard.  We had some work to do. Users couldn’t exactly understand what the pending future means. For example, we would like to make the clickable CTA as simple to understand as possible.

Solution 

Overviews

PAYMENT FLOW

Validation

We conducted validation testing of the clickable prototype with 5 users for each group. Here is a summary of the findings from the "buyers" testing:

6/6 Seamlessly checked pending transaction and made payment

6/8 Found information on web pages satisfactory and trustable

5/8 Requested for more information on Wetravel security

6/8 Found the product easy to use and navigate

8/8 Understood purpose of each page