I design .

I'm Ketan ‐ A Melbourne web designer and developer
with over 20 years of industry experience.

2020Case Study

Creating Taking Care's Shopify website

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.

Taking Care Homepage 2021 Arrow pointing to homepage screenshot.
Desktop version of the Taking Care homepage redesigned in 2021.

I Provided

  • Functional wireframes
  • Designs for the new website
  • A responsive Shopify theme
  • Built an integrated solution for the packages, VAT exemption and add-ons without the need for any third-party apps
  • A solution to connect the Shopify cart with their direct debit provider (who is not a Shopify payments partner)
  • Core web vitals/website speed and performance improvements

The Brief

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.

Analysis & Preparation

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.

A moodboard created in Pinterest.
A moodboard created in Pinterest.

Wireframes

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.

Homepage
Monotone wireframe of the Taking Care homepage.
Customise package page
Monotone wireframe of the Taking Care product page.

Tools I used for creating the wireframes

  • HTML/CSS and Javascript
  • VS Code
  • Google storage bucket for publishing to a test URL

Take a look at the wireframes to see it all in action.

View wireframes

Product information page
Monotone wireframe of the product information page.
Cart
Monotone wireframe of the shopping cart.

Tools I used for creating the wireframes

  • HTML/CSS and Javascript
  • VS Code
  • Google storage bucket for publishing to a test URL

Take a look at the wireframes to see it all in action.

View wireframes

The New Design

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.

Version 1 of the homepage.

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.

Version 1 of the customise package page.

Tools I used for creating the UI designs

  • Sketch App
  • Marvel App

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.

Version 1 of the product page.

Cart - I kept the cart simple and structured to make it easy for the user to know exactly what their purchase included.

Version 1 of the shopping cart.

Tools I used for creating the UI designs

  • Sketch App
  • Marvel App

Building the Shopify Theme

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.

Tools I used for creating the static templates

  • HTML/CSS and Javascript
  • VS Code
  • Marvel App
  • Browserstack for testing on multiple browsers
  • Google storage bucket for publishing to a test URL

View static templates

Designing the Packages Functionality

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:

  • Product variants are used to handle subscription costs and VAT exemption.
  • Item properties to help connect components to the main product.
  • Cart attributes to save additional data.
  • And, product tags to help assign other products to the main item.

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.

A close up of the customise your package section on the product page.

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.

A close up of a customised package in the cart.

Other Functionality

In addition to the package's functionality, I also:

  • Developed a solution for implementing a Direct Debit option via the checkout, using Taking Care's third-party provider.
  • Built a filtered comparison page that works using Algolia.
  • Ongoing design and UX improvements
  • Shopify 2.0 migration

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

Evolution of the Design

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.

  • 2020 Homepage
  • 2021 Homepage
  • 2020 Product Page
  • 2021 Product Page
  • 2020 Customise Package
  • 2021 Customise Package
  • 2020 Cart
  • 2021 Cart
Homepage version 1 created in 2020.
Homepage version 2 created in 2021.
Product page version 1 created in 2020.
Product page version 2 created in 2021.
Customise package page version 1 created in 2020.
Customise package page version 2 created in 2021.
Cart page version 1 created in 2020.
Cart page version 2 created in 2021.