Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visual Identity for Web Payments #250

Open
ianbjacobs opened this Issue Jun 28, 2018 · 13 comments

Comments

Projects
None yet
4 participants
@ianbjacobs
Copy link
Contributor

ianbjacobs commented Jun 28, 2018

Last year in a Merchant Adoption Task Force [1] we began to look into the topic of a visual identity for use with Payment Request API and related specs. This culminated in the presentation of a draft identity at TPAC 2017 [2], but that effort did not gain traction.

I am creating this issue for tracking purposes, as we are now renewing this effort, starting with the design brief we created previously [3]. Many thanks to @rvm4 and @agektmr for their help with this.

@agektmr has created https://webpayments.slack.com/ for additional discussions.

Ian

[1] https://github.com/w3c/webpayments/wiki/Adoption2017
[2] https://www.w3.org/2017/11/07-wpwg-minutes.html#item07
[3] https://github.com/w3c/webpayments/wiki/Brand

@agektmr

This comment has been minimized.

Copy link
Collaborator

agektmr commented Jun 29, 2018

Thank @ianbjacobs for starting this issue.

Let me first copy and paste the original email I've sent to the public payment wg list.


I'm Eiji, a developer advocate at Google working on the open web focusing on payments and identity from Tokyo Japan.

As Payment Handler is becoming a good shape and being shipped on Chrome , I think it's good time to determine web payments' official logo. I heard there were efforts to create one in the past but didn't come to a conclusion.

I'd like to hear your opinion on

  • if we should do it
  • how we should do it

Luckily, Ian has already come up with set of expectations to the logo
https://github.com/w3c/webpayments/wiki/Brand

Let's follow that. And on top of what he suggested, I think:

  • Web payments logo can represent this effort and it will be far easier for people to identify a payment solution is one of web payments even they have never seen it before.
  • The logo can be a symbol across web, merchant and payment industries and will unite us together.

I'm thinking if we can use the logo for

  • Generic payment button (launches Payment Request UI instead of specific payment app directly)
  • A sticker on a technical documentation that means the technology is based on web payments

If there are enough interest, I'd like to determine how we should move things forward.
Let first tell us what you think.

Thanks.

P.S. There's a Web Payments slack and some of us have been discussing about this for sometime. Please feel free to join.
https://join.slack.com/t/webpayments/shared_invite/enQtMjQyNDI4Mjg4NjQ2LWIyYjAyMDE1MGM1YTNiYjM4NzI4OThhYzlhZjk2M2RmMDQyODk1ZWY4MzQ2ZGMxZTY0MmMxOWYzNzY3YzNlMDg

@agektmr

This comment has been minimized.

Copy link
Collaborator

agektmr commented Jun 29, 2018

Let me summarize responses I've got so far that show interest:

  • Samsung came up with one candidate logo (right before I sent the email. See Slack.).
  • Facebook is going to hire a designer for creating a logo (they've already decided this before I sent the email).
  • Mozilla indicated interest.

I think it was a total coincidence that people took action on creating a logo almost at the same time.

I really want to make this process as transparent and open as possible and consolidating the conversation here would be great.

My proposal for further (super rough) actions would be:

  1. Ask a designer to supervise this effort from professional point of view. I think FB's designer can take this as they've already started hiring process for this purpose.
  2. Make agreement on how we determine the final product. (who's eligible for proposals, who's eligible for a vote, what are criteria for the logo, etc)
  3. Call for logo proposals
  4. Vote on candidates.

Let me know what you think.

@marcoscaceres

This comment has been minimized.

Copy link
Member

marcoscaceres commented Jul 3, 2018

In the mean time... good read of things to avoid: https://uxplanet.org/the-sad-state-of-payment-buttons-4d5cef3b9578

@agektmr

This comment has been minimized.

Copy link
Collaborator

agektmr commented Jul 12, 2018

Hi all, thanks for your interest in Web Payments visual identity.

So far I haven't got any objections about the rough plan for my previous comment. Let us move forward with breaking down the plan further:

What do we want as a result?
Let's follow what's already been discussed and summarized here.

I've been kind of implying, but I'd like to explicitly propose to make this logo about "Web Payments" rather than "Payment Request" specifically. The idea is that payment handlers can use the logo as a badge to indicate that their service is compatible with Web Payments / Payment Request.

Please comment if you have any opinions on this.

Timeline

  • Expand what's been discussed, determine more firm requirements for the logo with advice from professional designers (end of July?) My understanding is @rvm4 from FB is bringing a designer for this purpose.
  • Deadline of submission (end of September)
  • Vote and determine the winner (before or around TPAC)

Feel free to comment if there's anything missing.

@marcoscaceres

This comment has been minimized.

Copy link
Member

marcoscaceres commented Jul 16, 2018

Cc’ing Mozilla folks that are interested in being part of the discussion: @sharonbautista, @e-pang, @jeanygong, and @chsiang.

From Mozilla’s perspective, there are essentially 3 options for the working group that we would like to discuss:

  1. Do nothing: encourage merchants to show the credit card network icons to stand for “basic card” payments. Allow merchants to rely on granular canMakePayment() to detect what payment handlers are installed (e.g., to detect “Basic Card”, “Apple Pay”, “Android Pay”, etc.) - and allow display of those specific icons.
  2. Create a “Web Payment” icon: when pressed, presents the payment handler options: Basic-Card, and whatever else may be installed.
  3. Create browser-specific icon: like Apple Pay does via CSS - so could be, “Pay with Firefox”, “Pay with Chrome”, etc for “Basic Card”.

Each has their pros and cons - and happy to discuss those in detail.

If we choose options 1 or 2, what should the icon do?

User: know what to expect when they activate the button. It should be accessible.
Merchant: can distinguish web payments from their standard flow and put it places that make the most sense to their business.

User agent and merchant should be able to customize to a degree so only the meaningful UI is displayed. Additionally, the button should be responsive/adaptive to layout.

An example would be social buttons – users know what to expect after clicking the button, websites choose the placement and design that makes the most sense, and they’re not overwhelming.

There might need to be a lot of educating users if we create a new button.

What should it NOT do?

  • Make assumptions about the available space in which it will be displayed.
  • Display confusing and irrelevant information
@webpayments

This comment was marked as off-topic.

Copy link

webpayments commented Jul 17, 2018

@ianbjacobs

This comment has been minimized.

Copy link
Contributor Author

ianbjacobs commented Jul 23, 2018

@marcoscaceres, @stpeter, @agektmr, and @rvm4, this topic will be on the WG's 26 July agenda [1].
Ian

[1] https://github.com/w3c/webpayments/wiki/Agenda-20180726

@webpayments

This comment was marked as off-topic.

Copy link

webpayments commented Jul 24, 2018

@marcoscaceres

This comment has been minimized.

Copy link
Member

marcoscaceres commented Aug 6, 2018

Please see Mozilla's discussion points that I posted above:
#250 (comment)

We would like to see what we proposed there discussed.

@ianbjacobs

This comment has been minimized.

Copy link
Contributor Author

ianbjacobs commented Aug 8, 2018

Hi all,

The visual identity task force had a call on 2 August:
https://www.w3.org/2018/08/02-wpwg-visual-minutes

I'd like to welcome @FoxnBunny to the project; he will begin work on a design brief.
That work will be informed by this GitHub thread and the calls.

@marcoscaceres, we touched on some of the issues you raised in your comments above.

One of the main points we are hearing is that users are surprised by this new browser UX, and so the task force is thinking about different ways to mitigate the surprise. Some ideas:

  • There are few if any in-content examples of native browser UX. Browser pop-ups are browser-branded, but do not appear in page. We thus touched on the topic of whether "more browser branding" might give people additional confidence in the sheet.

  • We also discussed whether a visual identity for Web payments might explicitly suggest "When you see this you are going to get a browser experience" (For example, though I am not a designer I was wondering whether indicating somehow "something is going to happen at the top of your browser window when you click this" would help.)

  • It was suggested on the call that users may be more familiar with "Firefox" or "Chrome" etc. than they are with the concept of "browser." And so branding "Pay with Browser" or similar may not be effective.

I would like to continue the conversation at the next call of whether and how to evoke simultaneously:

  • The specific browser the user is using
  • Similar visual identity across browsers

Ian

@marcoscaceres

This comment has been minimized.

Copy link
Member

marcoscaceres commented Aug 9, 2018

It was suggested on the call that users may be more familiar with "Firefox" or "Chrome" etc. than they are with the concept of "browser." And so branding "Pay with Browser" or similar may not be effective.

Things like this need actual user research - we should probably try to validate any assumptions before continuing.

@webpayments

This comment has been minimized.

Copy link

webpayments commented Aug 16, 2018

@ianbjacobs

This comment has been minimized.

Copy link
Contributor Author

ianbjacobs commented Aug 16, 2018

Hi Laura,

Thank you very much for the feedback, and also the cautionary tale of the contactless logo.

To me the most prominent theme that has emerged from discussion so far involves the balance between "site identity" and "browser identity". I think there are related topics under this theme:

1) Should the sheet include some merchant branding (like a favicon) so that the user feels confident that the experience is being initiated by the merchant? 
2) Should the button / identity include some browser branding (or at least imagery associated with the Web or the browser) so that the user recognizes that this experience is not "part of the page" but rather is rooted in the browser (and will be similarly available on other sites)?

I suggest we include in our discussions the sheet as well as the button/logo.

@w3c w3c deleted a comment from webpayments Mar 11, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.