The challenge
For the first project we needed to start selling the training courses. There was already a basic website, made with Sculpin.io and TailwindCSS to work from but the product had changed slightly, more refined, with the option for monthly public courses, ideal for individuals or bespoke private versions of the same courses catering to businesses. We needed to get the user journey correct.
We also had a last minute problem with embedding Stripe Checkout as a payment method into the static website. Stripe don’t do all the different countries VAT in a way the business needed so Joeri worked into the night to create a Drupal website (which we’ll eventually use as the marketing site) which would take the payments and Drupal Commerce deal with all the VAT requirements.
Now we’ve got three sites that need design and very little time left. GO GO GO!
The approach
I started mapping out a sitemap in Figma to better understand where we were missing content. By doing this mobile-first and with basic blocks we can get site and page hierarchy right quickly. The traffic light dots helped us to see what content we already had, what needed amending and what needed to be written from scratch.
There’s still a long way to go with a few more features to enhance such as a timelime where we can explain the course units and show sample content. We’re going to leave this until the site is in Drupal because we know that would be easier to do.
The result
Our first round of testing came back with this lovely quote:
This is great! A lot of the info I need without being too verbose
Sustainability report
Homepage Before: Only 0.58g of CO2. 66% cleaner than other pages tested.
Homepage After: 0.57g of CO2 (We have a lot more to do, there’s some accessibility issues to resolve)
Public page on creation: 0.79g of CO2 (again we want to tidy this up some more)