Raising Awareness for Coeliac Disease

Working alongside McCann, I supported Coeliac UK with their Coeliac Awareness Week in the summer of 2015. The work produced would go onto to support subsequent annual campaigns.

Coeliac UK Awareness Week

The campaign was centered around the development of an online assessment platform, which users could use and receive a recommendation on whether they should consult with their doctor about potentially having Coeliac Disease. McCann would handle the overall campaign, strategy and collateral. I would handle the development of the assessment platform.

The platform required the following:

• Assessment form
• User area
• Admin area
• Static informational pages

Stack

The setup was fairly basic. The backend was powered by Laravel and frontend HTML (Blade), CSS (Bootstrap) and JavaScript (jQuery).

After working closely with the team at Coeliac UK and McCann to establish the core requirements, I began work on an initial ERD to map out how we'd structure and store the relevant data.

Due to the amount of detail on the assessment, I decided to decouple the content from the backend. We would simply reference a series of human friendly shortcodes for the questions and answers to make it easier to map on the frontend, opposed to guessing what incremental ID belonged to what. This approach brought a few benefits:

• Simpler database structure
• The assessment is entirely client side - we didn't need to load any assessment data to display the form
• I could move quickly when building out the form, without it being completely populated by the database
• Slight changes to the copy could be made without touching the database

The drawbacks being:

• Less parity between the frontend and database
• Repeating questions and answers outside of the base form meant duplication
• More of a chore to maintain

As it was only me touching the code for the platform, I opted to stick with this approach.

The form itself was made up of multiple steps and varying input types, with basic validation happening in jQuery to ensure completeness and validity before changing steps.

To deploy, a VPS was setup and GH actions to deploy + build on commit. Nothing fancy.

Teething Issues

With a huge amount of traffic coming from TV appearances, adverts and editorials - we were getting reports of outages on the site via uptime robot. Looking through the logs, we were hitting our maximum amount of concurrent database connections. It seemed the VPS that was used had a fairly low limit.

We quickly migrated to a beefier dedicated server and that would keep is in good stead for a number of years.

2021 Refresh

For the 2021 awareness campaign, Coeliac UK had undergone a rebrand and produced new range of campaign collateral. As the platform required a lot of visual changes to compliment the brand material, it was the perfect opportunity to give the site an entire overhaul. I set out a few key objectives:

• Upgrade to Laravel 8
• Migrate frontend to React
• Decouple frontend from backend
• Improve mobile view
• Improve accessibility

Backend

The backend was running a very much outdated version of Laravel (v5) and was becoming difficult to maintain and potentially vulnerable. Fortunately, the architecture was pretty straight forwards. We had models setup for the key entities: user, questions, answers, submission etc. I setup a new Laravel v8 project and transplanted these models across. The actual logic surrounding the assessment data barely needing touching.

The main changes were a result of moving the frontend to be decoupled from the backend:

• A new API layer (previously data was accessed directly in Blade views and forms)
• An authentication pattern which supported a separate subdomain

Laravel makes this pretty trivial. I setup various CRUD API endpoints to:

• Create and manage assessment submissions
• Create and manage user records

I then implemented Sanctum which allowed me to make use of SPA authentication.

Frontend

I had primarily been using React (Next.js) at this point, so porting the frontend to this was a no-brainer. I didn't really make use of any of the existing code - I tend to work best from scratch rather than trying to mould something that exists. As part of the visual refresh, I only had a series of colours and images to go off. I redesigned the site from top to bottom, with mobile usability and accessibility at its core, all while fitting the new look and feel of the charity.

The various static pages, auth flows and user area came together pretty quickly. The chunk of the work came with the rebuild of the actual assessment form itself.

Previously the form was powered by some gnarly jQuery logic to guide the user through the form with basic validation. Switching to React allowed me to break the form up into a series of components, using context to share state between the steps. Validation and logic could be tightly coupled to each step then all the data is simply thrown at the API upon completion.

Making the assessment more accessible was a key priority for me as part of the rebuild - such as being able to complete the form entirely by keyboard. I leaned a lot on Headless UI and Tailwind UI components to make this happen, as a lot of the attention to detail comes out of the box.

Coeliac UK Assessment Platform

---

Overall, I'm pretty proud of this project. The assessment tool has been a massive success, advising almost half a million people and is still operational to this day.

The rebuild gave me an opportunity to take advantage of lessons learned over the years, improve the system from top to bottom and keep it alive and kicking for hopefully another few years.