$30 off During Our Annual Pro Sale. View Details »

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

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

Tech-Verse2022
PRO

November 18, 2022
Tweet

More Decks by Tech-Verse2022

Other Decks in Technology

Transcript

  1. None
  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!