2018Case Study
Switching Ability Superstore to Shopify
Ability Superstore is a leading supplier of mobility aids and disability equipment in the UK. I have been building and maintaining their website since 2009, and it has seen many changes.
They were previously managing their online store using Shopit, a bespoke ecommerce platform I had built back in 2010 but was no longer maintaining. This year they decided to move over to Shopify to take advantage of newer features and technologies.
I Provided
- A new UI design for the storefront
- A responsive Shopify theme
- Integrated a solution to enable VAT exemption on a per product level
The New Design
The brief for the new website was to have a more advice-led feel to it, which included elements such as blog posts, user guides and social media snippets. However, we didn't want to deviate too far away from the current style.
Having worked on the website design since its initial conception in 2010, I already understood the business and what the company was about; offering a good product range, excellent advice and outstanding customer service.
Analysis & Preparation
As with any new design project, I first spend some time looking at websites of competitors and similar industries and create a mood board on Pinterest.
-
Primary Red
#BC1F31 -
Primary Yellow
#FFDE00 -
Brown
#BBA291 -
Light Brown
#F6F2F0
The two key brand colours of Ability Superstore are red and yellow, both of which are quite strong, and so to offer a more neutral tone I introduced light and dark brown colours.
For fonts, I went with "Poppins" for the headings and "Roboto" for body content. Poppins complimented the Coolvetica style of the logo nicely, and Roboto offered a readable font that wasn't too wide or narrow.
To get the designs started, I began with mocking up visuals for the homepage, category page and product page.
- Product
- Home
- Category
The Product Page
The product page hosts a large product image, complete with carousel functionality and gallery. Again, a lot of whitespace helps the user digest the information efficiently.
Designing the Homepage
The challenge with designing the homepage was implementing all the information into a layout that was readable and not too overwhelming.
The Category Page
The category page was designed to give some breathing space to the products to display more items on the page.
Building the Shopify Theme
To make the process of creating the new Shopify theme easier, I first created the designs as static HTML/CSS templates. Creating static templates made development quicker and testing easier as there was no need to publish changes to a server each time. The templates resided locally on my mac allowing access by various devices for testing.
Once I was satisfied that the static templates worked in all desktop and mobile browsers, I integrated them into a bare skeleton Shopify theme section by section starting with the header and footer.
The VAT Exemption Conundrum
The core requirement for this project was to apply VAT exemption to particular products within the checkout, and an issue with Shopify is the inability to modify the checkout.
We tried many solutions:
Solution 1 (Failed)
The UK's VAT rate is 20%. My idea was to apply an automatic 20% discount to the checkout if it contained a VAT exempt product. This solution almost worked except for the fact that Shopify deducts the discount on the product and then re-applies VAT. We worked out that the discount should be 16.66%. Unfortunately, Shopify doesn't allow floating point percentages as discounts!
Solution 2 (Failed)
This idea wasn't tried due to its complexities, but was more of a plan. The idea was to duplicate every product that had a vat exempt equivalent. When the customer confirmed they were vat exempt in the cart, a little bit of Javascript would flick the eligible products over to their VAT exempt equivalents. This solution was too complicated for my liking from both development and admin views.
Solution 3 (Working)
This solution was to add a variant option containing the inclusive and exclusive VAT prices to all applicable products. The customer would select the option before adding to the cart. For this to work, the Shopify VAT had to be turned off and set to 0%.
Switching to Shopify?
I can help with your Shopify migration. Get in touch to discuss your project.