Projects
2020Heights
Heights
I joined Heights, the brain health start-up, to develop their brand new design system and to help with the replatform of their website from Shopify to Gatsby. The Gatsby site was launched in mid-November 2020 and massively increased performance on the website which lead to more conversions.
Project info

- Website
- yourheights.com
- Design System Storybook
- ui.heights.engineering (WIP)
- Team
- Nico Martin, Adam Symons, Julz Contoguris
2020ClubView
ClubView
I worked with ClubView, an early stage startup creating a data and AI product for football financing, to build various internal and external applications for their product.
Their projects spanned the entire stack and involved creating APIs, setting-up and managing PostgreSQL databases with TypeORM, as well as a performant React application. Besides what has previously been mentioned, this project makes use of Tailwind CSS, react-hook-form and Storybook for rapid component development.
2020doTERRA
doTERRA
I implemented various key features and customisations on top of the Saleor storefront open-source project for doTERRA's new marketplace site. The storefront is a GraphQL-powered, PWA, single-page application.
2020Code Notes
Code Notes
A Gatsby theme for publishing code-related notes to your website
I created the theme (gatsby-theme-code-notes) because I could not find the perfect app to store all my many code-related notes. I wanted these notes to be in a public and open format so that they were easily accessible and shareable. Notes are created with Markdown or MDX which allows for much more expressive notes. Of course there's dark mode too 😉!
You can see my code notes website at notes.zander.wtf.






Project info
- My Code Notes
- notes.zander.wtf
2020Curve
Curve
I joined Curve to work on a greenfield project in partnership with Samsung. I developed a small, but important web application that was part of the wider user journey for the integration with the new Samsung Pay Card product. This application used Next.js with an Express.js back-end and integrated with various APIs from Samsung and internal Curve APIs.
I also created the first version of Curve's design system for the web. Initially with focus on product applications, the design system has since evolved into a more general system for all Curve's web properties. It is based on Theme UI.
The final project at Curve was to redevelop curve.com, the company's public-facing website. This used the Contentful headless CMS and the Gatsby static site generator. This project further iterated on the design system and made it commonplace within the web application team.
Notable Projects
- Samsung Pay Card integration
- Curve's design-system (private)
- New version of curve.com
Project info
- Team
- Bharat Jay, Matt Boyle, Connor Gettel, Diego Rivas, Andrea Medda, Dimitry Theulings
- Samsung Pay Card announcement
- techcrunch.com/samsung-pay-card-powered-by-curve/
2019Equals Go Card
Equals Go Card
User account area for the brand new Equals Go multi-currency card
In 2019 Equals released a brand new product, the Equals Go card. It is a multi-currency card with up to 15 currencies that makes it easier and cheaper for people to manage their money while abroad. I worked on the web app for this product, which encompassed the user account area for customers.



Project info

- 🏖 Team
- Colin Agbabiaka, Steven Archer, Tim Brooke, Ben Tomkinson, Charilaos Georgakakis, Jamie Halvorson, Tabasom Aryamanesh, Joshua Anderson, Lloyd Asamoah, Ben Tubby
- Tech stack
- React, Next.js, Typescript, Redux (Saga), Express, AWS Lambdas, Styled Components, Design System Utils, Prismic CMS
- Duration
- 1.5 years
- Client
- Equals
2019“Fuji” Design System
“Fuji” Design System
Fuji is Equals.com's design system
Fuji is Equals' design system. I created it and lead development while I contracted there. Fuji's components are React-based and use Styled Components and Design System Utils. It is used by many apps at Equals.
2019Cornmarket
Cornmarket
Re-platforming of this Irish institution's website
I was tech lead and lead front-end developer for the re-platforming of Cornmarket's new website. With a design-system led approach, I started the front-end development, then handed over to the cross-functional remote dev team (from India, which I managed) whilst continuing as lead front-end dev.





Project info

- Tech stack
- Prismic CMS, Stimulus.js, .Net, Sass
- Team
- Neil Ballinger, Robbie Davies, Matt Noble, Zak Abu Zubair
- Component library
- All components
- Client
- Cornmarket
- Agency
- Nimbletank
2018prismic-reactjs-custom
prismic-reactjs-custom
An opinionated fork of prismic-reactjs that allows you to use custom React components instead of standard HTML tags
import { RichText } from 'prismic-reactjs-custom'const RT = () => (<RichTextrichText={richTextDataFromPrismic}heading1={yourCustomHeading1}paragraph={yourCustomParagraph}/>)
2018Design System Utils
Design System Utils
👩🎨 Access your design tokens with ease
A micro library to ensure your CSS-in-JS styles stay consistent with your brand's design-system. Works with styled-components, emotion, glamorous and all other CSS-in-JS libraries.
// ./tokens/index.jsimport DesignSystem from 'design-system-utils'// your design tokens object goes hereconst designTokens = {type: {sizes: {s: '20px',m: '36px',l: '42px',},fontFamily: {sans: '"Helvetica Neue", Helvetica, Arial, sans-serif',serif: 'Georgia, "Times New Roman", Times, serif',},},}export const tokens = new DesignSystem(designTokens)// ./components/ExampleComponent.jsimport styled from 'styled-component'import { tokens } from '../tokens'export const ExampleComponent = styled.div`font-family: ${tokens.get('type.fontFamily.sans')};font-size: ${tokens.fs('m')};`
2018Barilla
Barilla
Redesigning and building Barilla’s new global website to fulfil the variety of needs of their 30+ local markets.
Before this project, each of Barilla’s local markets used a different website, with different content, presenting a very inconsistent view of the brand. Our challenge was to create and design a modern new site that could host the wide-range of content needed to deliver an effective web experience across markets.


2016TMW Unlimited
TMW Unlimited
Complete redesign and development of TMW's existing website
Lorena Teruel and I were given free reign to update TMW's old website. We spent a number of weeks coming up with the strategy, UX and thinking behind the new version of the site.
Having such close collaboration with design, development and stakeholders meant that ideas were validated and tested in a massively reduced time. This was an entirely new approach for TMW and resulted in a complete shift in how new projects were developed at the agency.



Project info

- Agency
- TMWUnlimited...
- Team
- Lorena Teruel
- Site at launch
- tmwsite.now.sh
- Blog post
- Creating dynamic layouts with Jekyll
2014Kickoff
Kickoff
Front-end framework used on all TMW projects and beyond
Developed in partnership with Ash Nolan, Kickoff is a lightweight, flexible and robust front-end framework that is a great starting point for any web site. We developed it while at TMW, but it grew way beyond internal projects into something that many other companies and developers use on projects of all sizes.
Project info

- Team
- Ashley Nolan, Nic Bell and many others
- Project duration
- 4+ years
2013The Bar
The Bar
Created a multi-platform consumer Pan-European website aimed at inspiring and educating consumers in the art of making spirits-based mixed drinks and cocktails for any social occasion.
Created a multi-platform consumer Pan-European website aimed at inspiring and educating consumers in the art of making spirits-based mixed drinks and cocktails for any social occasion.


Project info

- theBar
- uk.thebar.com
- Team
- Nic Bell, Simon Kinslow
- TMW Case Study
- tmwunlimited.com/work/diageo-the-bar