I've helped design and build websites for museums, a few different universities (3!), regional and national government, the Co-op[erative], as well as the odd aircraft carrier…
I enjoy producing modern, fast-performing sites that don't lose sight of the importance of accessibility and maintainability.
Some things I created or contributed to
A portfolio of websites/web applications that I've worked on over the years.
- Working on shop.coop.co.uk, Co-op's delivery and click and collect service, using React, Redux, React Query, Azure functions, Imperva, Helm, Docker, GraphQL
- Integrating the frontend and a backend-for-frontend (BFF) with internal Co-op APIs as well as with Algolia (search), Contentful (CMS), and the headless e-commerce platform Naveo
- Writing many more tests (Jest, Testing Library) than in my previous roles!
- Contributing to the Co-op Experience Library and shared frontend packages
- Leading the engineering efforts of a team of up to five engineers and working with colleagues in product, delivery, and other stakeholders
London Transport Museum
- This was a fantastic project working with a great team at LTM
- I led a large part in avoiding and remediating accessibility issues on the site, and working with an external auditor
- I led the development of various components that would feed back into CTI's Voyager product, including search, news, blogs, gated content and more
- As a team we helped develop a web interface for the museum's collection, which saw a 33% increase in visits after our work
- I worked on the frontend for a new donations system which led to a 20x increase in donations
- Worked with the Greater London Authority on everything from their Drupal 7 site, follow up microsites, and their current recently launched Drupal 9 site
- The GLA were a great team to work with and this (along with London Transport Museum) was amongst my favourite CTI projects
- We took CTI Voyager and build a version of it for the GLA to allow them to share elements across multiple different Drupal sites
- I created a special version of CTI's base theme (Rutherford) and added Storybook to replace Pattern Lab
- Used Style Dictionary to create a design tokens system for the new GLA theme
- I provided accessibility advice during the planning, design, and the start of the development phase
- My last big bit of CTI work before I joined the Co-op — I wish I'd been able to spend more time on this project!
- Largely created and led the development of Voyager, an internal Drupal distribution, theme, Composer template and set of custom modules that helps CTI deliver fantastic Drupal sites
- Used as the base of all of CTI’s Drupal builds
- Saves 2-3 sprints worth of work by packaging up configuration, modular functionality, a set of pre-built components that are easily re-skinned, patches for common Drupal bugs, and IDE configuration
- Sets standards supported by automatic code linting, formatting, and documentation
- I ensured it worked great in my two main areas of interest: accessibility and front-end performance
- Designing and building an HTML prototype of a complete website overhaul
- The actual development was carried out by Terminal Four within their CMS platform
- This introduced an interesting limitation – we had switched to a very declarative, markup-centric approach (Vue, Tailwind etc) but T4's templating system was much more set up for a 'here are some very specific CSS classes and some nested
<ul>elements, now turn it into a megamenu' approach
- I presented a section detailing our development approach as part of a team of around five in the succesful pitch for this large contract
- Scrapes (via a Netlify function) the Transport for Greater Manchester to show you the time of the last Manchester Metrolink tram home (sorry TFGM!)
- Before I used serverless for this the scraping happened in a nightly run done by a Raspberry Pi in my flat – this got my residential IP banned from TFGM's website, oops!
- Uses Nuxt, but I'd like to rebuild it in something next-generation like Solid, Svelte, or Qwik
- An earlier version was (briefly) featured on the Buzfeed UK homepage
Manchester Metropolitan University
- Used Drupal to develop functionality and implement designs produced by MMU's own designers
- Worked alongside MMU's in-house developers to provide assistance and review code prior to releasing it on CTI's infrastructure
- The project's internal stakeholders used corporate IT machines that still had IE11 as the default browser, which was a notable constraint, especially as one requirement was to have different colour themes, which would have been an ideal use for CSS custom properties.
- Prototyping a Vue.js inventory tracking app to be used by the Royal Navy onboard aircraft carriers
- Used Vue, Webpack, Vuetify, and Vuex
- Produced a set of reeusable components with a documentation site built with MkDocs and vue-styleguidist
- I visited the HMS Queen Elizabeth docked at Portsmouth to observe user research and shared my work with a talk at the Manchester Vue.js meetup
- I also almost tripped over a torpedo while in the bowels of an aircraft carrier
Report wreck material
- Working with the Maritime and Coastguard Agency to prototype a GDS app for reporting wreck material and supporting its move into an Alpha and then Beta service
- Designed and build a process using the GDS prototyping kit to collect details of collected material from shipwrecks, assisted in user research, and refined the prototype
- Used Express, Node.js, Nunjucks, and Leaflet for mapping
- The service passed its GDS Alpha service assessment on its first attempt, and I was involved in the presentation to the assessors
University of West London
- Developed a new Drupal theme that incorporated Atomic Design, Pattern Lab, utility-first/atomic CSS (Tailwind), a more modern build process, standardised typographic and spacing scales, and provided (for the first time) a set of reusable components for CTI’s Drupal team. I named the theme after the Manchester-based atomic scientist Ernest Rutherford
- I received feedback years later that the project's frontend still felt very maintainable and easy to dip back into
- Built a progressively decoupled 'course' content type with Vue.js. This presented variants of courses in a dynamic, SPA-like way that didn’t compromise on editor experience, accessibility, or the shareability of URLs
- I spoke about the progressively decoupled course page in Amsterdam at DrupalCon, my first non-UK conference presentation. My session was the most attended in my time slot (350+ delegates) and one (very kind) YouTube commenter wrote “Brilliant talk. If this guy made a 10 hour series on Drupal & Vue development I’d watch it ASAP”, while another equally kind commenter called it ‘stunning’.