Worldcubeassociation.org: Improve Registration Flow for Payments

[pingskills]

Here are some ideas on how the flow could be improved from some emails:

From @jfly
There are 3 states a user's registration can be in:

1. The user is not logged in.

I think we handle this case great, although there is a missing period on the last sentence.

1. The user has not registered (there's also the case where they did register, but their registration was deleted, which maybe we could handly slightly differently, but for now, I'm going to consider them the same).

This is pretty good, but is starting to get a bit cluttered. I love the fact that we tell the user about our preferred events feature, but I think it should be a little more subdued... how about a hint underneath the events field?

I don't feel the "The entry fee is..." alert fits in very well. Looking forward, we're going to need a bit of javascript on this message, because the entry fee will change based on the events the user is registered for. Maybe this could become a "Fee" field underneath the Events field in the form? Or maybe it would make more sense to have a message right before the big green Register button saying something like "after you register, you will need to pay a fee of $10". Or maybe change the register button text to say "Register and pay $10 fee" (that might be confusing because it seems weird to click a "pay" button without ever entering any credit card information.

_@larspetrus - It could look similar to the line items in the form:_

_Fee $10 (paid) or Fee $10 (unpaid) or Fee $10 Pay here etc_

1. The user has registered but not paid in full.

Ok, this is the real problem page, IMO. Again, the "speed up registration" message feels too obstrusive.

_@larspetrus - I like the idea of default events, but the implementation could be more practical and streamlined. How to change that is a discussion for another occasion, but for now it can maybe be moved out of the way. It's not the second most important thing on these pages!_

_Likewise, when registration closes does not deserve headline placement when you have already registered, and could also be under the fold._

I think instead of saying "You can see your registration information below", we should just say "you have registered for Comp, but you have not fully paid your registration fee. Your registration will not be considered complete until you pay in full. You can also edit your registration (this would be a link)". The key idea here is to actually get rid of that "update registration" form. I think it's too distracting at this point, and the user should be focused on the fact that they have registered, but still need to pay. I think it's fine to allow editing your registration even if you have not fully paid, but we just shouldn't shove it in the user's face.

1. The user has registered and paid in full.

This looks fine for now, but will need some work once we allow per event pricing. We'll need to make it clear to the user how much more they'll have to pay after they add in 2x2.

_@larspetrus - The big unanswered question on this page is what happens to my $10 if I hit Delete ?_

[BiscuitCubed]

As to the last line

"@larspetrus - The big unanswered question on this page is what happens to my $10 if I hit Delete ?"

it's always been handled as you are not entitled to any money back if you drop events/registration, but the organizer may issue a refund. The two options under this assumption are as follows

1. Have an option the organizers can set that when a registration is deleted (but only before a competition begins, or possibly some date set by the organizers) you get a refund. Not sure how viable this is with stripe.

2. Email the organizer letting them know that a registration with partial or full payment has been canceled, and let them decide how to handle it.

I'll post a second comment on cleaning up the rest of the page

[BiscuitCubed]

As for the cleaning up of the alerts, my thought is there should be a maximum of one alert. Anything after that will seem, and is, cluttered. I say the registration closing time should take that slot if you're not signed up, but if you are the "Your registration has been approved!" should take it. I think the preferred events message should be directly under the events selection, and maybe should only include "You can set your preferred events here." as well as updating the edit page to be more descriptive of how they work. I think above the actual form should be payment info, as well as incorporating the suggestion of an editable text field for organizers (#1095)

Alternatively, it may be better to display how much has been and needs to be paid next to the "register/update registration" and "delete" buttons. Maybe in the form "You have paid $x/$y". The one problem with that is it may be too easy to miss.

I don't have a local setup, but I went into inspect element and came up with this mock up.

NOTE: I added info about how much has been paid/needs to be paid above and below. In practice, we'd pick one and not the other. Looking at this mock up, I really like how the info in a well looks.

[BiscuitCubed]

One more thing, maybe for per event cost, we could add a panel next to the actual form that has each event and their prices listed. Maybe the form uses col-md-8, and the and the panel is col-md-4. The comments box doesn't need to be that wide anyway. It'd be way to intensive to add a row and columns in inspect element, so I'm not going to try to mock it up, but I hope you get what I mean.

[viroulep]

I'm kind of looking into it right now, I've been working on adding an optional donation field so I may as well do this too.

I've modified the layout according to some suggestions in this thread, here are the states:

• Unregistered:
  

• Registered not paid:
  

• Registered and paid:
  

I think an improvement could be to add some kind of panel for the registrations status (with the information that currently are displayed first as alerts info/warning/danger).

[BiscuitCubed]

I still think that we should have a max of one alert.

For example, the second and third alert on the unregistered view can be right above the event selector without any highlighting, or in a well as I demonstrated in my post above.

[jfly]

This is definitely a step in the right direction, @viroulep! I agree with @BiscuitCubed about alert overload.

---

The "you may need to pay a registration fee" alert is quite weird now that we know if they need to pay a registration fee.

---

Nitpick, but I don't like that "Entry fees" are a disabled <input> (on the registered, but not paid page). It makes it look like something the user gets to pick, which it definitely is not:

Can we just make that plaintext instead of a disabled input? I believe the bootstrap class we want is called `.form-control-static.

---

Similarly, I believe the "The entry fee is ..." alert (on the unregistered page) should also just become a .form-control-static.

---

Similarly, on the registered and paid page, I think that "You have paid your entry fee in full" alert could just become a less obstrusive .form-control-static:

---

I do still feel like the "registered, but not paid" page is overwhelming with 2 forms on it:

I believe I suggested this elsewhere, how do you feel about make the "edit your registration" form a click away when the user has unpaid reg fees?

---

These are all suggestions. Feel free to agree or disagree. If you agree, don't feel that you have to actually implement my suggestion. If it feels appropriate, make issues for each of the little things I suggested and we can tackle them one by one.

[viroulep]

While reworking this I've been trying to actually open all possible views for registrations, and one kind of bother me: when registrations are closed, we simply can't see our registration's information anymore!
I think it would make sense to display read only information (maybe if registration is closed and competition is not past), in a similar way we display read only registrations when they're accepted.

What do you think?

[viroulep]

Here is a lot of screenshots:

• Will open (basically no-changes):
  
• Closed without an existing registration (no-changes):
  
• Registration opened, with entry fees, but no stripe account connected:
  
• Registration opened, entry fees and stripe account connected:
  

I still need to update the messages for these one, and remove the reference to the entry fee.

• Registration and payment pending:
  

• Registration paid, pending
  

• Registration paid and accepted:
  

• Registration paid and accepted, registrations closed:
  
  (I implemented my last message for this, the only change compared to the previous screenshot is the panel footer saying that registrations are closed)

• And finally registrations closed but the user can manage them:
  
  (There is no registration fees attached to this comp)

I think I took care of every concerns (I actually agreed with them), except for @jfly last one: I'm not a fan of separate pages for the registration edition form and payment form.
Also while writing this I realize there may be a nice alternative: what about folding the "Registration details" panel when the payment form is shown? Would that implement your suggestion?

[jfly]

This is really awesome work, @viroulep! Folding the registration details form when the payment form is shown sounds like a good compromise to me.

Some random nitpicks:

• @keemy taught me about putting "positive actions" on the right hand side, and now I can't help but be bothered when that's not the case. See:
  

(citation: http://www.creativebloq.com/netmag/why-people-focus-right-hand-side-design-3146267)

• "entree" -> "entry"
  

[viroulep]

There:

I also inverted the two buttons, PR incoming.

[pingskills]

Great work @viroulep!

[viroulep]

Great work @viroulep!

This is really awesome work, @viroulep!

Thanks :blush:

[BiscuitCubed]

Looks great! The only thing I don't like is the text with the green background. It feels clunky and out of place. Not sure if there's a great solution for that though.

Good work!

[viroulep]

I tried without the green background but it was (unfortunately) barely noticeable:

Would not be hard to simply remove the bg color though!