Donation Checkout
Petspiration GrouP + Stripe
Creating a checkout using Stripe to a non-transactional site created issues we wouldn’t necessarily find on a regular ecommerce site. Using Stripe’s native checkout, it became clear it didn’t require traditional information like a user’s name and billing address and without the functionality of an account portal, there was no way to gather this information for a donation. Furthermore, adding form fields to gather this information with just the sole “Donate” button to process everything would not work either as Stripe only takes data from its native fields.
So to create a functional checkout for the user, I split the checkout into 3 steps to show a clear pathway to input and gather the data. The flow of the steps is maintained by having the following step inactive and greyed out to avoid any part being skipped. At the end of this process we are now able to provide the user with a tax invoice to store via a klaviyo integration.
Product Card Update
Petpost
An overhaul of the PetPost UI was needed to facilitate the integration of an auto delivery system using the Recharge Shopify plugin. One key area was the product cards. Key elements that needed to be added to the component were the auto delivery price (Repeat Delivery) and a size selector to show range and price when a new size is selected. Based on user feedback with the original design, a key issue was the inability to see if a product was out of stock until a user landed on the product page, so a function was added to override the rrp price (bottom right corner) with an “Out of Stock” message and grey out all pricing.
Mini cart
Petpost
Another component that need a redesign was the mini cart. It was small and lacked functionality so I pushed for a side drawer/ panel design to provide more real estate and integrate more features. The new design allows users to edit the items added to cart and gives them the opportunity to make it an auto delivery. The additional functionality also means users can skip the main cart page and move straight to checkout, reducing the clicks needed to complete a transaction.