The Booc ReadyTheme is our newest ReadyTheme featuring a simple elegant design and packed full of cutting edge commerce features.
This is the first ReadyTheme to showcase our brand new Checkout Process. Each step of the checkout process was re-thought from the ground up, with a focus on usability across all devices.
When we set out to rebuild our checkout framework, we asked, “How could we simplify the process, yet make it intuitive enough so that important elements are not lost in the process”. We knew we had areas to improve upon and rather than patching them up, we chose to redesign the entire process from the ground up, starting with the basket page.
Basket Page
We’ve added the ability to add or subtract quantities from your basket with the click of a button. This may seem like a “nice-to-have” feature on desktop, however, it no longer requires you to pull up the numeric keyboard on mobile when changing quantities, saving you a handful of clicks. Additionally, we have set the quantity to update automatically when the amount of items have been changed. These decisions reduce the amount of clicks as well as buttons on the page.
Coupon code input fields generally beg you to scour the Internet for a discount code. Rather than encourage our customers to leave the page, we’ve chosen to hide the field by default and not call as much attention to it. If you do have a code, simply click “Have a Promo Code?” and the field will be made visible.
Customer Information
Simplifying the checkout and reducing the number of steps was a primary goal of ours. We best accomplish this on the Customer Information page by combining it with the “Login” page.
In our new Checkout, it is assumed that the user is a new shopper. However, if you already have an account, select the “Login” tab and sign in right on the same page. The “Login” tab also allows you to register a new account.
In an effort to make the form fields less daunting, the “Business Address” is marked “Same as Shipping” by default and is hidden. Dynamic form fields have titles embedded within them that shift upwards as you begin typing. This saves precious real estate on mobile while keeping the labels visible at all times.
Shipping
There is no longer a need to select card type on the Shipping page. Instead, you only select whether you want to pay by Credit Card or another form of payment such as PayPal, and the card type is automatically detected for you on the Payment page. This also allows the customer to use a different card type on the Payment page, without having to go back a step to modify their selection.
To further optimize for mobile, we’re presenting options as buttons rather than dropdowns. Small changes like these go a long way in improving the mobile experience by reducing the number of clicks.
Payment
Aesthetics can do quite a bit to make a site look pretty. They can also influence our buying decisions. We intentionally placed all the payment information within a frame which includes the label “Secure Payment”. This change helps reassure shoppers that they are paying via a secure process as opposed to the fields simply being displayed in the same fashion as everything else on the site.
As mentioned in the previous section, we’ve included an auto-detector that recognizes the type of credit card based on the first four digits. This eliminates the need to select the credit card manually.
A Simpler Checkout
We’ve removed unnecessary fields and stripped the header and footer of distractions in order to create a simpler, more focused checkout that has minimal interruptions. This process aims to improve the user experience and increase checkout conversion rates. We can’t wait to see how it will improve your store.