Save 37% off PRO during our Black Friday Sale! »

What we do for quality as merpay frontend

What we do for quality as merpay frontend

Ed7916b32b0b4fb506b10aa9ee0e1444?s=128

naughtLdy

July 08, 2021
Tweet

Transcript

  1. 1 What we do for quality as merpay frontend @naughtLdy

  2. 2 Introducing Merpay Frontend

  3. 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
  4. 4 Tech Stacks Application CI / CD Infra Monitoring Tools

  5. 5 Product Release

  6. 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
  7. 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
  8. 8 The Quality of our products

  9. 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.
 

  10. 10 Product Quality Perf Test a11y

  11. 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
  12. 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
  13. 13 How to visualize Job Schedule Job Sink Logging BigQuery

  14. 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
  15. 15 Data storage method Sink type = perf type =

    test type = a11y Each team can display chart using project key Logging BigQuery BigQuery BigQuery
  16. 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
  17. 17 Thanks