Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

1. Style Commonization - Background to brand unification - Design Library - Service case study - Outcome

Slide 6

Slide 6 text

Unify Financial Services Under the PayPay Brand

Slide 7

Slide 7 text

Unify Financial Services Under the PayPay Brand

Slide 8

Slide 8 text

1. Style Commonization - Background to brand unification - Design Library - Service case study - Outcome

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

スクリーンショット 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.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ZF Design Library Production of a common design library for financial services Design Library

Slide 15

Slide 15 text

ZF Design Library Production of a common design library for financial services Design assets : 6 categories. Component : 7 categories, approximately 43 components

Slide 16

Slide 16 text

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推進室

Slide 17

Slide 17 text

Create Compliance Levels and UX Checklist Items

Slide 18

Slide 18 text

1. Style Commonization - Background to brand unification - Design Library - Service case study - Outcome

Slide 19

Slide 19 text

r Service Case Study Card, insurance, and bank services have applied the Design Library first to unify UIUX.

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

PayPay Card Mini APP UI/UX seamlessly connected from the PayPay app, simplified entry form.

Slide 22

Slide 22 text

PayPay Card Members Web The style guide was applied and based on the UI of the mini-app.

Slide 23

Slide 23 text

PayPay Card Various Websites Match the style of the sites that exist, for each purpose. Improve brand consistency.

Slide 24

Slide 24 text

PayPay Insurance Mini APP Within the PayPay app, users can complete the process of selecting and applying for insurance products with simple operations.

Slide 25

Slide 25 text

PayPay Insurance Product-specific Service Sites Almost consistent applying experience across all products. Forms with low learning cost were realized.

Slide 26

Slide 26 text

PayPay Bank Mini APP Bank functions with one tap from PayPay.

Slide 27

Slide 27 text

PayPay Bank Account Opening Form Account opening can be completed on the shortest possible day. Easy application with consistent style.

Slide 28

Slide 28 text

1. Style Commonization - Background to brand unification - Design Library - Service case study - Outcome

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ZF Design Library Production of a common design library for financial services Effective efficiency through illustration library production

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

GOOD DESIGN AWARD 2022 Winner Award-winning item: PayPay Card Rebranding

Slide 34

Slide 34 text

GOOD DESIGN AWARD 2022 Winner 1.Realized seamless UIUX with PayPay from enrolment UI to actual use

Slide 35

Slide 35 text

GOOD DESIGN AWARD 2022 Winner 2.New card face design and improved security. Card information and functions can be centrally managed via an app.

Slide 36

Slide 36 text

GOOD DESIGN AWARD 2022 Winner 3.Pay Later service was rolled out. The credit card experience was made possible by the PayPay app.

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

2. Entry Form Optimisation (EFO) - A project aiming to become the No.1 financial form - EFO case study - Outcome - UPDATE CVR

Slide 40

Slide 40 text

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?

Slide 41

Slide 41 text

Rebuild the Financial Entry Form

Slide 42

Slide 42 text

Why did finance engage in EFO? A Project Aiming to Become the No.1 Financial Form

Slide 43

Slide 43 text

The aim is to raise the level of entry forms across the financial sector. A Project Aiming to Become the No.1 Financial Form

Slide 44

Slide 44 text

Establish a promotion system across financial companies. A Project Aiming to Become the No.1 Financial Form

Slide 45

Slide 45 text

2. Entry Form Optimisation (EFO) - A project aiming to become the No.1 financial form - EFO case study - Outcome - UPDATE CVR

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

2. Entry Form Optimisation (EFO) - A project aiming to become the No.1 Financial Form - EFO case study - Outcome - UPDATE CVR

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

2. Entry Form Optimisation (EFO) - A project aiming to become the No.1 Financial Form - EFO case study - Outcome - UPDATE CVR

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

3. Summary

Slide 56

Slide 56 text

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.

Slide 57

Slide 57 text

What We Are Aiming to Achieve Deliver a seamless and common experience of PayPay financial services UIUX to users.

Slide 58

Slide 58 text

Thank You！