E-commerce Store in Webflow
The ultimate aim of an e-commerce store is obviously to convert visitors into paying customers, so from a design aspect, the user interface (UI) and user experience (UX) had to maintain a level of familiarity with other e-commerce stores, to shoppers.
Thankfully, Webflow, with its wealth of design flexibility features allowed for custom transitions and micro interactions to be built that enabled the store to capture and maintain user attention.
The look and feel of the product shopping pages was kept “minimalist”, showcasing attractive images, with all product details, and information such as the size chart and shipping instructions, were hidden off the page, in a product drawer, appearing at the click of a “Quick View” button, which was custom designed and built for the client, as it’s not a standard Webflow e-commerce feature.
Information such as the size chart and shipping instructions were also hidden off page, saving screen real estate, but as importantly, providing the opportunity to build in the UI transitions and micro-interactions that would enhance the user experience and differentiate it from other online stores. For example, when the size chart is clicked, it flies in, skewed and distorted, and then flips open, providing a futuristic feel, in line with one of the key themes of the brand: cyberpunk.
Similar UI interactions were built for other elements, such as the shipping fees component.
In addition to the web front-end design and development, a Google Sheets feed was built to automate updates in Google Merchant Centre and Facebook / Instagram Shops.
The Results
Toggery, before they stopped trading (evidently due to price increases from their sourced supplier and in shipping fees), achieved an incredible 80% products to shopping cart rate, based on conversion data from Google Analytics 4.
