Unified PayPay Financial Brand. Initiatives to Standardize Styles and Become the No.1 Financial Forms

Shinya Hasegawa (Yahoo! JAPAN / Development Division, Financial Services Group, Finance Group / Senior Manager)

https://tech-verse.me/ja/sessions/205
https://tech-verse.me/en/sessions/205
https://tech-verse.me/ko/sessions/205

Transcript

2. Agenda - 1. Style Commonization - Background to brand unification - Design library - Service case study - Outcome - 2. Entry Form Optimisation (EFO) - A project aiming to become the No.1 financial form - UPDATE CVR - EFO case study - Outcome - 3. Summary
3. Self Introduction Shinya Hasegawa From Kamakura, Kanagawa Shinya Hasegawa Work Experience 2020- 2005- CG Production - Designer, Animator IMJ（Web Production） - Designer, Director Yahoo! JAPAN - Designer, UIUX Senior Manager, Design Manager - Service Manager PayPay Card Corp - CXO、CXO Senior Manager Senior Manager Financial Services Group, Yahoo! JAPAN
4. What we want you to take away today 1. Style Commonization ɾThrough the design library, we have a cross-finance brand and UI/UX. ɾCost savings in libraries are increasing the amount of time contributing to the original business KPIs. 2. Entry Form Optimisation (EFO) ɾSharing EFO knowledge and strengthening forms across financial services. ɾThe interaction between UI improvement and testing is repeated to improve the CVR.
5. 1. Style Commonization - Background to brand unification - Design Library - Service case study - Outcome
6. Unify Financial Services Under the PayPay Brand
7. Unify Financial Services Under the PayPay Brand
8. 1. Style Commonization - Background to brand unification - Design Library - Service case study - Outcome
9. ZF Design Library Production of a common design library for financial services Issues for financial services The designs of the ZF companies are so disparate that they do not seem to be the same brand. • Each service brand is different. • Due to the different production environments of the various companies, quality cannot be guaranteed. • There is no designer with a holistic view. • Different companies have different designers and organisational conditions.
10. スクリーンショット 2022-11-16 11.21.42 ZF Design Library Production of a common design library for financial services Expansion of the PayPay-branded financial services style guide • Aim to be recognised by users with consistent service impressions. • Create a guideline for "PayPay-ness" that should be protected. • Common library that preserves the basic design, no matter who makes the design. • Mechanisms to ensure minimum quality.
11. ZF Design Library Production of a common design library for financial services • There are no UI specifications and a lack of usable design patterns. • New UIs are being disrupted by their creators. • Different styles for different screens. Issues at the production site
12. ZF Design Library Production of a common design library for financial services • Changed production tool to Figma. • Using Figma components to unify the UI for each screen. • Research internal and external design systems. • Hearing about PayPay's production environment. Atomic Design was adopted Improvements to the production environment
13. ZF Design Library Production of a common design library for financial services Atomic Design Create components based on the Atomic Design concept from design. Detailed review in Visual Designer & Web Developer for all components. "50.4
    ݪࢠ .0-&$6-&4
    ෼ࢠ 03("/*4.4
    ੜମ 5&.1-"5&4
    ςϯϓϨʔτ 1"(&4
    ϖʔδ Methodology for designing UI design in parts. Design from the smallest unit 'atom', then agree and proceed with design work in the order of 'molecule', 'organism', 'template' and 'page'.
14. ZF Design Library Production of a common design library for financial services Design Library
15. ZF Design Library Production of a common design library for financial services Design assets : 6 categories. Component : 7 categories, approximately 43 components
16. ZF Design Library Production of a common design library for financial services A system in which finance acts as a Hub, linking brand management and design systems to each company. PayPay Brand ⾦融 UIUX推進室
17. Create Compliance Levels and UX Checklist Items
18. 1. Style Commonization - Background to brand unification - Design Library - Service case study - Outcome
19. r Service Case Study Card, insurance, and bank services have applied the Design Library first to unify UIUX.
20. PayPay Card Faces, Mounts and Envelopes The card was created with a total design, including the mount and envelope, to match the world view of the card face.
21. PayPay Card Mini APP UI/UX seamlessly connected from the PayPay app, simplified entry form.
22. PayPay Card Members Web The style guide was applied and based on the UI of the mini-app.
23. PayPay Card Various Websites Match the style of the sites that exist, for each purpose. Improve brand consistency.
24. PayPay Insurance Mini APP Within the PayPay app, users can complete the process of selecting and applying for insurance products with simple operations.
25. PayPay Insurance Product-specific Service Sites Almost consistent applying experience across all products. Forms with low learning cost were realized.
26. PayPay Bank Mini APP Bank functions with one tap from PayPay.
27. PayPay Bank Account Opening Form Account opening can be completed on the shortest possible day. Easy application with consistent style.
28. 1. Style Commonization - Background to brand unification - Design Library - Service case study - Outcome
29. ZF Design Library Production of a common design library for financial services 1. The UIUX design of the PayPay Card and PayPay Insurance have been matched. 2. The foundations for giving users a certain level of experience have been created. 3. It is now possible to operate multiple services at low cost. Outcome
30. ZF Design Library Production of a common design library for financial services Effective efficiency through illustration library production
31. ZF Design Library Production of a common design library for financial services OPX CFGPSF 
    IPVST Man-hour estimate: 31 (number of column articles)*8h (per person per day) = 248h Actual man-hours: 14 (working hours) + 2h (explaining how to use the library and understanding how to start using it) = 16h  IPVST Production costs related to illustrations were reduced by 93.5%.
32. Business Contribution Average daily increase of 330% in the number of users applying. The number of applications for Pay Later also exceeded 2 million users. High evaluation of the card face design on social networking sites and user feedback.
33. GOOD DESIGN AWARD 2022 Winner Award-winning item: PayPay Card Rebranding
34. GOOD DESIGN AWARD 2022 Winner 1.Realized seamless UIUX with PayPay from enrolment UI to actual use
35. GOOD DESIGN AWARD 2022 Winner 2.New card face design and improved security. Card information and functions can be centrally managed via an app.
36. GOOD DESIGN AWARD 2022 Winner 3.Pay Later service was rolled out. The credit card experience was made possible by the PayPay app.
37. ZF Design Library Production of a common design library for financial services 1. The same design library is shared by all ZF companies. 2. Centralize PayPay style guide and ZF design library. 3. Further efficiency in design work, with time devoted to essential service contributions. Future Direction
38. ZF Design Library Production of a common design library for financial services A new ZF Design Library is being prepared to provide a more optimal user experience.
39. 2. Entry Form Optimisation (EFO) - A project aiming to become the No.1 financial form - EFO case study - Outcome - UPDATE CVR
40. A Project Aiming to Become the No.1 Financial Form Entry Form Optimization Exploring and analysing the causes of issues such as abandonment, UIUX, etc. By solving user issues, we will improve conversion of enrolment and account opening forms. What is EFO?
41. Rebuild the Financial Entry Form
42. Why did finance engage in EFO? A Project Aiming to Become the No.1 Financial Form
43. The aim is to raise the level of entry forms across the financial sector. A Project Aiming to Become the No.1 Financial Form
44. Establish a promotion system across financial companies. A Project Aiming to Become the No.1 Financial Form
45. 2. Entry Form Optimisation (EFO) - A project aiming to become the No.1 financial form - EFO case study - Outcome - UPDATE CVR
46. UPDATE CVR Name of EFO initiative across financial businesses. Consolidation of previous AB test results. You can quickly check the AB test results you want with the search and filtering functions.
47. UPDATE CVR EFO Checklist Scoring table for each service. We have prepared a checklist for you to follow at EFO. By scoring each service and services from other companies, we conducted a fixed-point comparison of form scores.
48. Measure CVR trends for each service form from the beginning to the end of the financial year. Fixed-point management reports on the wins and losses of EFO measures and the relationship to CVR in UI improvements. UPDATE CVR
49. 2. Entry Form Optimisation (EFO) - A project aiming to become the No.1 Financial Form - EFO case study - Outcome - UPDATE CVR
50. EFO Case Study PayPay Card (Former Yahoo! Card) Some users may be unsure which to choose and may have left the system and are reconsidering their decision. Hypothesis 53.85% → 54.43% +0.58% Effect Anything that is confusing and cannot be changed once chosen is a quit point. It would be nice to add something to support the choice. Conclusion カードデザインに人気色ラベル追加 Before After
51. EFO Case Study Issue of low CVR via the PayPay APP. When looking at the number of steps on the application page, it is assumed that the application cannot be completed easily so users are leaving the application. So we indicated the time required. Hypothesis 18.85% →18.50% -0.35% Effect From the point of view of PayPay users, the "minimum 5 minutes" was perceived as long. On the contrary, it may have increased the reasons for abandonment. Conclusion カードデザインに人気色ラベル追加 Before After PayPay Card
52. EFO Case Study PayPay Card (Former Yahoo! Card) It is said that it is better for smartphones to answer one question at a time, rather than a long page with multiple items on one page. Examples of horizontal development among financial group companies. Hypothesis 50.32% → 52.22% +1.90% Effect As hypothesised. This format should be used when creating new forms, as it is a standard EFO measure these days. Conclusion カードデザインに人気色ラベル追加 Before After
53. 2. Entry Form Optimisation (EFO) - A project aiming to become the No.1 Financial Form - EFO case study - Outcome - UPDATE CVR
54. Outcome A project aiming to become the No.1 financial form 1. New UI created in line with past cases and 52 checkpoints. 2. The UI could be created efficiently by sharing knowledge among other companies. 3. Creating winning UI parts to improve CVR. Outcome & Future Direction
55. 3. Summary
56. Summary 1. Style Commonization ɾThrough the design library, we have a cross-finance brand and UI/UX. ɾCost savings in libraries are increasing the amount of time contributing to the original business KPIs. 2. Entry Form Optimisation (EFO) ɾSharing EFO knowledge and strengthening forms across financial services. ɾThe interaction between UI improvement and testing is repeated to improve the CVR.
57. What We Are Aiming to Achieve Deliver a seamless and common experience of PayPay financial services UIUX to users.
58. Thank You！