Slide 1
Slide 1 text
1
What we do for quality as merpay
frontend
@naughtLdy
Slide 2
Slide 2 text
2
Introducing Merpay Frontend
Slide 3
Slide 3 text
3
Product Details
For Customer
● Campaign
● Coupon
● Deferred Payment
● Net Payment
● P2P Transfer
● Application Form
● Partner Dashboard
For Partner
● Customer Support Tool
● Merchant Support Tool
For Operator
Slide 4
Slide 4 text
4
Tech Stacks
Application CI / CD Infra Monitoring
Tools
Slide 5
Slide 5 text
5
Product Release
Slide 6
Slide 6 text
6
Product Release History
2019/2 3
Merpay 1st release
Code Payment / Coupon
Merpay Smart Payment
Net payment
5
4 2020/7 2021/3
Merpay Smart Payment (fixed amount)
Send/Receive
Virtual Card
Slide 7
Slide 7 text
7
Product Release History - Focus Topics
2019/2 3
Merpay 1st release
Code Payment / Coupon
Merpay Smart Payment
Net payment
5
4 2020/7 2021/3
Merpay Smart Payment (fixed amount)
Send/Receive
Virtual Card
Release First Eliminate Technical Debt Quality
● Merpay Frontend のこれまでとこれから
● メルペイのエンジニア組織を
EMとして振り返ってみた
Tech Blog
Slide 8
Slide 8 text
8
The Quality of our products
Slide 9
Slide 9 text
9
Product Quality
Why work on it ?
● Improve the customer experience
● How can we improve the customer experience
● It can be improved by increasing the quality indicators
such as Test, Perf, a11y, etc.
Slide 10
Slide 10 text
10
Product Quality
Perf Test a11y
Slide 11
Slide 11 text
11
Where to start
● Data Visualization Team
○ Making up the measurement system
○ Defining Data Format
● Perf / Test / a11y Team
○ Defining the quality criteria
○ How to measure
○ How to improve
Team Strategy
Slide 12
Slide 12 text
12
Where to start
● Data Visualization Team
○ Making up the measurement system
○ Defining Data Format
● Perf / Test / a11y Team
○ Defining the quality criteria
○ How to measure
○ How to improve
Team Strategy
Slide 13
Slide 13 text
13
How to visualize
Job
Schedule
Job
Sink
Logging
BigQuery
Slide 14
Slide 14 text
14
Data Format
{
"type": "{{ data type }}" ,
"project": "{{ project name }}" ,
"data": {
// want to upload data
// need to same type definition per type
}
}
● type
○ perf, test, a11y ...
○ use for Logging Sink
● project
○ use for Looker
Slide 15
Slide 15 text
15
Data storage method
Sink
type = perf type = test type = a11y
Each team can display chart using project key
Logging
BigQuery BigQuery
BigQuery
Slide 16
Slide 16 text
16
Conclusion
● Merpay frontend is working on perf, test and a11y as quality
● Setting baseline for each quality and working to improve them
● We are using Looker ML dashboard to visualize each microservice
Slide 17
Slide 17 text
17
Thanks