Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

November 18, 2022
Tweet

More Decks by Tech-Verse2022

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Unify Financial Services Under the PayPay Brand

    View full-size slide

  6. Unify Financial Services Under the PayPay Brand

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Create Compliance Levels and UX Checklist Items

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. 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?

    View full-size slide

  40. Rebuild the Financial Entry Form

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. Thank You!

    View full-size slide