For most Fintech products, the checkout experience is the most crucial and income-generating part of their product. In this talk, Linmic will talk through his journey about how he initiated a full front-end overhaul of the checkout product at Paidy. He will deep dive into the following topics:
Any issues he encountered
The steps he took to ensure Buy-In from senior staff
The positive changes that resulted in this overhaul (including metrics!)
Future plans for improvement
4. Paidy is a fast and secure way to check out online. It
allows consumers to easily make purchases using
only an email address and phone number. No
lengthy registration. No cumbersome credit card
input. And it provides you with a secure and flexible
way to handle payments at online stores.
6. Why?
Technically, there’s room for UI performance improvement, i.e. load speed,
response time of buttons, etc.
UX issues found.
Lack of design uniqueness.
AppStore negative reviews.
Consumer feedback our customer support team have been receiving.
7. Examples of issues we needed to address were:
Unnecessary screens displayed
Redundant steps for installment
Pin Code
Form validation didn’t provide enough information
Lack of consistency in UI
10. When a user makes a mistake in the pin code, they can’t fix the specific pin. They can only
either back delete or input all digits all over again.
Old
11. Form validation didn’t provide necessary information for users to correct the wrong input, but
just a red outline.
Old
17. Results
497% CTA response time enhanced.
Load time improved by 145%.
General conversion rate boosted for 9% - for users who opted in remember-
me, it’s around 14%.
Average authorized amount increased by ¥4,000.
With design system in place, the development cycle became much shorter
along with better consistency.
Easier to convince merchants – higher merchant adoption rate.
21. “For every 1 second of improvement in load time we experienced
up to a 2% increase in conversions”
— Walmart
22. "Users expect pages to load in two seconds, and after three
seconds, up to 40% of users will abandon your site.”
— Compuware's research: why web performance matters
24. Concerns
The single most important revenue stream of the company at the time.
Stakeholders’ concerns from across departments.
“It’s already pretty good”.
Limited resources and support.
40. Web Performance
Dropped custom web fonts – Japanese font files can be pretty huge
Critical Path
Code splitting
DNS prefetch / preconnect
Use SVG images wherever possible
Tree-shaking with Webpack
Minimized the number of requests
60 FPS
Avoided unnecessary re-renders
50. Results
Met our goals and expectations – improved our business and addressed major
UX issues.
Good practices established within the team – efficiency.
Improved customer understanding – effectiveness.
Happier team, stakeholders, and users – sustainability.
Gain stronger trust from the stakeholders.
Better job satisfaction – knowing we’re doing the right things and building great
products.
