My Role: UX research/design and front-end development
The Good Stuff is an online Shopify store that sells and delivers prepared frozen smoothies.
Project Goals:
Identify pinpoints for users during the checkout process and create a new design to address them.
Take the updated designed and implement them with the existing tech-stack.
UX Research
Wire-framing
User Testing
Front-end Development
User Interviews
Prototyping
Sketch
jQuery
Shopify Liquid
Javascript
Principal
GitHub
By the time users reach the checkout phase of an online shopping experience there should be no more surprises. Upon testing I discovered that no users knew there was a minimum of 6 smoothies required to make the order, forcing them back to the order page to pick more product or worse, drop out entirely. The old site had plain text stating this minimum, but no users I tested read it. I had to make sure he solution I designed and implemented was both intuitive and non-invasive.
At the top of the page, replacing where the plain text instructions were, I placed a progress bar that would gain pips as the user added items to their cart. Once the user added the minimum amount of product to their cart, the ‘minimum order’ text would be replaced with ‘checkout now’ button, which would link them to the checkout page. The animation of the bar was achieved by manipulating the CSS properties of the green bar with jQuery on each button press.
