ul{ margin-left: 40px; list-style:none; }

Localizing the billing flow

REFRESHING THE BILLING FLOW FOR USERS IN EXPANDING MARKETS

Billing-Hero-1

BACKGROUND

My role on this project

Collaborated developers and product manager
As the designer for this squad, I collaborated with the product manager to define multiple user scenarios and flows, wireframes, high-fidelity designs, and interactive prototypes. Together, we defined the scope of this project while roadmapping out future improvements.

The challenge

Currently, Calendly only supports credit card payments. However as Calendly expands to global markets and an increasing number of users joined from outside the US, we needed to adjust the payment methods in the billing flow to provide a more localized experience for non-US customers. 

Why this matters
Paypal is one of the top preferred payment methods in many European countries, including Germany, France, Portugal, and Spain. In general online, 8% of people abandon shopping carts due to insufficient credit card payment options and 19% abandon due to not trusting the site with their card info.

Preferred payment method for European countries

paywithpaypalformatted

DESIGN QUESTIONS

Always keep the user at the center of the question
At the offset of the process, I worked with the product and engineering managers to define what were the most strategic areas to improve the user experience when adding the new payment method. 

Q. How might we build user trust in the billing experience?
Indicate to users a level of trust and security in our payment process by giving them access to a method they know and trust already.

Q. How might we use the language in the billing flow to address any fears?
Anticipate where users might confront confusion or need additional assurance in the billing and upgrade process and adding language to address these concerns.

Q. How might we add clarity to the process so that users have a better understanding of what they are paying for?
Use typographical and visual hierarchy principles to adjust the visual design and grouping of information so that key information presents when needed.

USER RESEARCH

User flows

In the initial research, we defined the user scenarios needed to add a payment method since this affects current users of the product as well.

Scoping

Many of the issues here crossover with the research I did for a previous project to better understand user pain points in the upgrade flow. Based on user surveys and calls, we identified user difficulties in the billing process. These centered around understanding what plans they are choosing and trusting the security of the payment modal.

Scoping + Future improvements
To maintain the project scope, we needed to keep the improvement laser-focused on updating the payment method. In exploring solutions, I included areas for possible improvement in the future that addressed these pain points. 

Market Research

I analyzed current UX patterns for adding payment methods. I wanted to ensure any solution implemented now would support adding more payment methods in the future.


Before starting on wireframes, I find it best to sketch out common patterns. This way I can create a strong mental modal of how the design will work without immediately restricting it to the current UX.

Market-Analysis

PROCESS

Wireframes

The wireframes focused on exploring specific solutions for the various scenarios. I separated the solutions into 'bins' based on the estimated level of development and user testing effort they would require.

We implemented a version of the medium-lift solution highlighted above. Due to scope we did not pursue reworking the upgrade modals or the billing page.

Content Strategy

I changed the language used on the page to give users a clear indication of the next steps. I wanted to mitigate any surprises or fears during the payment process.

Working with a content strategist, we removed words that felt too "tech" or "computer" language. We added descriptions around payment security, navigation, and state changes to inform and assure users in the process. 

Content-Strategy

RESULTS

Reflection

There is still more that can be improved in terms of helping add clarity and building trust. However, the new version of billing flow sets the stage for future improvements that will help further increase user understanding, and hopefully create a more seamless process.

SITEMAP

CREATIVE PROJECTS
Ceramics
Animation (Coming Soon)´╗┐
Illustration 
3D Illustration (Coming Soon)
Interactive Websites (Coming Soon)

INTERESTS
Travel Essays
Book Recommendations
Every peach (Coming Soon)

Designed by Rachel Arredondo