Purely OT

About the project

Background

Purely OT is a Vancouver-based Occupational Therapy company, providing services to clients who have suffered motor-vehicle accidents.

Project Aims

This project refreshed the older version of the website developed in 2021. New pages were added to explain services provided by the company, as well as new about, rates, and contact pages.

The website also features a blog, that is connected to Sanity CMS.

Design Changes

The branding of the company and website was refreshed. Earlier versions featured cartoon-style designs. With user research, it was found that more trust was given in medical websites, when photos were of real-life. We also wanted to move away from the pink colour tone, to a cleaner white and green pallette.

Tech Stack Explained

While the website is still being statically built, I decided to move from Gatsby to NextJS for the main framework of the website. Gatsby worked perfectly for the first version of the website due to it being one-page and static. However, I wanted the flexibility to scale the website alongside the growing of the business, so if the client ever wanted additional features such as user management, or to connect to external APIs, it would be easily implementable from a framework-perspective.

The website also features Radix-UI headless components. Radix-UI ensures components such as navigation and dropdowns are accessible out-of-the-box, but unlike libraries such as Bootstrap, the components come completely unstyled. This allows the developer to use CSS (I've used Styled-Components) to easily style the components however they wish.

The contact form is connected to FormSpree, and an email is sent to the client everytime the form is submitted. FormSpree is a service which enables forms to be connected to their API without the need of a server to handle emails. They also securely store the submissions, especially important for a healthcare website.

As with the previous version, the website is connected to Sanity CMS. Sanity was extremley easy to connect to NextJS and the UI of the CMS itself is easy to customize and extend as it is built on React, and features a number of user-made plugins. One such plugin enables the user to deploy the website via Vercel right through the CMS, allowing the client to make changes and see them near-instantaneously.

The website is deployed via Vercel. The company, which also owns and maintains NextJS, recently enabled analytics as part of their service without the need of a consent banner (as no user data is stored) - this allows easy access to key metrics such as number of visits over a given period and top referrers, which gave further insight into how the website was performing.

The analytics also provides metrics into technical performance such as first meaningful paint and layout shift, which aided me into making further revisions and fixes to the site.

SEO was also a major factor of this project, as we wanted the site to rank as highly as possible. Leveraging NextJS features to handle SEO tags, as well as libraries to handle site-maps, we were able to optimise the code so it would rank highly. We also used ahrefs.com to track and analyse the SEO rankings, as well as detect any issues related to the code which could impact SEO, e.g. images being too large, or canonical tags not referencing the correct page.