Redesigning Vimeo’s billing
and payment experience
Company
Vimeo
Role
Product Designer
Responsibilities
User research
User flows
Low fidelity wireframing
Prototyping
High fidelity mockups
Usability testing
Project Overview
During my time working as an account manager for Vimeo where I was responsible for 600+ enterprise accounts, I solved countless issues for clients daily. A large number of client issues and complaints related to billing matters. My colleagues and I were spending a significant amount of time solving billing issues and chasing clients to settle unpaid bills. This was time that we couldn’t spend more productively in upselling client subscriptions, interact with clients and train them on new features etc.
As such, I raised this problem to my management as I believed there should be a more efficient way of handling billing processes. I tried to understand and map the root causes of the billing issues, which are described below.
Problem
The billing portal to make payments is on a separate website from vimeo.com. This confuses the users as the login details for the billing portal are different than the login details to the user’s vimeo.com account.
1.
Users are unaware of the pending invoices as the payment emails that are sent are often being unnoticed.
2.
Users are unable to receive or download the payment receipts from the billing portal and as a result email the account receivables team or the account managers.
3.
Users are unable to update their billing information from the billing portal unless an email is sent to the account receivables team.
4.
Final Design
Mockups
Design Impact
Improving the billing and payment page was one of the highest priorities to fix as the company was struggling with customers not making their payment on time.
Part 1: Research insights
Synthesizing findings
User interview was conducted with 7 Vimeo Enterprise customers
Internal support ticket investigation
Feedback from account managers who speak directly with customers
Before - Billing portal login page
Before - Billing portal homepage
Part 2: Designing and testing
Wireframing & Prototyping
After defining the key issues users were facing, mid to high fidelity wireframes and clickable prototypes were created.
User Testings
The following testings were performed with 8 people and iterations were made several times to come up with the final designs.
Click testing
Task completion
A/B testing
Part 3: Refining the designs
1. Reduce the number of clicks to reach Billing & Payment
2. Billing portal page with better navigation and UI
3. Access to payment and billing information
4. Payment notification banner displayed on homepage
Part 4: Next steps
