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