DUI #2: Checkout
Daily UI: Checkout
Checkout page for OnTrack, a fitness platform for those that have fallen off from working out and want to get back and stay on track with the help of an active and supportive community.
Why a subscription? OnTrack doesn't sell products (yet?), but they offer several membership tiers. A 30-day free trial helps them quickly onboard new users that are interested, but not ready to commit. Checkout pages can be tight spaces with a lot of little details. They're information and interaction heavy. Throw in some error messages along with multiple payment options and things will get busy real quick.
With that in mind, there were three goals for OnTrack's checkout page:
keep it simple
make payment methods easy and clear
all purchase information should be visible
I continued to use the split screen layout to keep things simple, spacious, and organized. Pops of color can be found only where users can take action and on hover for buttons to quickly identify payment methods. And you can't miss the trial details.
Brought back the lighter blue from the sign up and log in pages as the default hover color for primary buttons (slide 2). I also swapped the slanted buttons for pill buttons. The pill shape is more consistent with the O in the brand's logo and helps to begin establishing a motif.
Should I bring back the slanted buttons or keep the pill?
