search

revelrylabs / bn-mobile-react

BigNeon React Native Repo
BSD 3-Clause "New" or "Revised" License
2 stars 7 forks source link

Checkout Promo Code - UX Enhancements #563

Open brittanygay opened 5 years ago

brittanygay commented 5 years ago

Broken out from #524

Per our discussion in https://github.com/revelrylabs/bn-mobile-react/pull/554, we could enhance this layout to better the UX.

It looks like I should click on the 'review promo code' button moreso than anything else on this screen. Im not sure what a user should do once they've added a successful promo code. (Click the back button? Click on the ticket row? Close the app?)

Everyone on the team agrees with the above experience, but more suggestions are welcome in this ticket.

The purpose of this ticket is to come up with a better solution for this screen.

53516172-4a233100-3a91-11e9-93f7-f0e81ee4a272.png

brittanygay commented 5 years ago

Assigning to @Mcscott142 to approve the above AC

daybreaker commented 5 years ago

One idea is showing the original price crossed out maybe, with the new price, and an extra row on the ticket saying Promo applied or something?

zmelamed commented 5 years ago

@brittanygay any more thoughts on making it clearer that the user needs to select the ticket type to proceed?

brittanygay commented 5 years ago

Gathering some thoughts for this now, will post what I have soon

brittanygay commented 5 years ago

Here's a detailed solution with some quick wires reflecting my ideas for the promo code UX:

  1. Move the promo code section to the next screen, so it will be above the "Enter Paymnent" section. This keeps all payment options in one place, and it makes it easier for the user to understand

563-1

563-2

  1. The "Promo Code" section will be a screen by itself, just the same as the payment information screen is set up.

563-3

  1. Once the promo code is added, the user is then directed to continue to complete the checkout flow

563-4

  1. Once a promo code is added, it will reflect on the subtotal section, showing the user how much the promo code deducts the total price

563-5

Assigning over to @zmelamed to take a look!

zmelamed commented 5 years ago

This is a quick concept, but what about something like this: image The issue is: 1) We want to implement something that isn't significantly different from what is there because we're likely going to do a bigger overhaul of checkout to simplify 2) Promo code needs to be part of the first step because there are promo codes that actually expose tickets that aren't yet visible, so it can't be applied after the tickets are selected.

Can you iterate on/clean up the above approach where we wouldn't change too much on that view

Mcscott142 commented 5 years ago

@brittanygay see above comment.

brittanygay commented 5 years ago

Ah I see what you mean @zmelamed, I wasn't aware that we would be changing up the checkout flow so much and how the promo code reveals new tickets.

Let me sketch up some new wire solutions and I'll post in here today

brittanygay commented 5 years ago

@zmelamed after reviewing your notes a little more, I like what you have mocked up and I agree on this new approach. Here's my reasoning:

  1. The "Apply Code" now looks more like it's an action within the Promo section only, instead of a button sitting underneath that may confuse the user/make them want to click the Remove button rather than move onto the rest of the Checkout userflow
  2. "Remove Code" can look the same once a code is applied, and we could use either red text or have an X icon next to it to help indicate so.
  3. It is clear that the Promo Code section is separate from the Ticket Type section, plus the user can clearly see what new tickets are exposed once the promo code is applied
  4. It's also clear that the user needs to then select a ticket type in order to continue checking out

I do think it would be nice to keep any promo code price deductions listed under the Subtotal on the Checkout flow (if there are any), so it's clear to the user that their promo code was applied when they are about to purchase their ticket.

brittanygay commented 5 years ago

Assigning back to @zmelamed so we can come to a conclusion and get this rolling!

zmelamed commented 5 years ago

Yeah lets just keep it without the promo code price change as I don't know that that is actually available on the client side and just for simplicity sake for now.

One thing to also keep in mind when implementing this is that the event descriptions can be very long, or they may be non existent. So when you implement this please keep that in mind, the price and the select button should remain at the top with the ticket type name rather than floating to the vertical middle of the ticket type cart if the description becomes lengthy.

Also, the select button should probably just switch to a grey "sold out" state if it is sold out

revelry-stalebot[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

iamjoshfrank commented 5 years ago

Removing SCORE label, changing to draft. Based on the Issue comments, it looks like we need to write a clear Scenario and Acceptance Criteria upon which we can implement the solution.

revelry-stalebot[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.