Case Study
Taking Care is a personal alarms service provider based in the UK, who approached me to build their new website using Shopify after seeing my previous work.
Like Ability Superstore, they too required VAT exemption to be applied to their products based on the customer's selection. However, their requirements were further complicated by creating packages from multiple product add-ons. For example, a package could be made up of the main personal alarm, and have optional add-ons such as installation, or a medical helpline, some of which could also be vat exempt.
The brief for the new website was to replace the current PPP Taking Care branded online, single product sales funnel with a Shopify store that sells a broader range of telecare products and services to the elderly and vulnerable.
The existing online sales funnel was complicated and difficult to use, resulting in 92% of users dropping out on the first page. And, it was limited to selling only one product, expensive to maintain, difficult to update and not scalable for new products and services.
It also lacked typical ecommerce shopping cart functionality.
To remove all these limitations using Shopify.
The initial stage for a project like this was to research how other websites were displaying buildable packages and collect my ideas and thoughts into a mood board. From this, I was able to create HTML wireframes defining layouts, navigation, structure and product to cart flow. The product page was the key component of the website because it would allow multiple products to be packaged together to create a suitable plan.
I created the wireframes in HTML, CSS and Javascript to be responsive and tested them on mobile devices to ensure the content and layouts were suitable.
Creating wireframes at an early stage of the project allows for quick revisions to be made prior to any design work starting. They can also help to identify potential usability issues with content and functionality.
Take a look at the wireframes to see it all in action.
Take a look at the wireframes to see it all in action.
Taking Care already had brand guidelines, but I had the freedom to use the elements I liked from it to create a clearer, more usable design for them.
Homepage - The design of the homepage featured a carousel displaying different messages and links.
Customise Package Page - This page was the most complicated to design as it contains many user-selectable options that define the final cost of the personal alarm package. There was also a lot of supplementary information that needed to be displayed to help users understand the available components.
Because the page was quite long, I displayed the package total as a bar fixed to the bottom of the browser viewport.
Homepage - The design of the homepage featured a carousel displaying different messages and links.
Product Pages - This page was designed to explain the key features of the selected personal alarm product.
Cart - I kept the cart simple and structured to make it easy for the user to know exactly what their purchase included.
As with all website projects, I always create static HTML/CSS templates first as it means quicker development time, and more importantly, it's much easier to test them across multiple devices, browsers and operating systems.
The static templates are saved within a GitHub repository, so I can keep track of any issues, test results and document styles for future reference. These static templates are then integrated into a bare Shopify development theme.
Ketan quickly understood our requirements and was able to overcome all the challenges associated with a VAT-exempt subscription product. We were initially concerned that the Shopify platform would be too restrictive but Ketan's ecommerce experience meant the checkout could be customised beyond what we expected.
John Swaffield, Taking Care
The core functionality of this website was the ability to create packages consisting of the main product and multiple optional product components. For example, a personal alarm watch could have optional components such as a key safe, medical helpline or installation. Each component would have its own additional price (which could be a subscription), which was further complicated by some of them having VAT exemption.
The challenge here was to create a "system" using the existing features that were already available in Shopify:
Using a combination of these, I was able to connect items together and pass them into the cart in one go. This method would also allow future packages to be created via the Shopify admin, without any additional development required.
The customise package page uses a combination of variants and products to create packages.
The customise package page uses a combination of variants and products to create packages.
With these small hidden attributes applied to the cart, I could then re-arrange the cart items so they were displayed as packages with their own set-up fees and subscription costs.
In addition to the package's functionality, I also:
We were really lucky to have found Ketan and his web development experience has been vital in the success of Taking.Care. Unlike many other Shopify web designers, Ketan has great technical development experience as well as really strong design skills.
John Swaffield, Taking Care
Since the initial launch of their new website, a few pages and sections have been redesigned to display the content in a more structured and helpful manner.
Below are screens shots of how these areas were improved over time.
Can't scroll horizontally? Hold shift + scroll on the timeline below to scroll.
