Projects

Project info

Website

utopiamusic.com

Project info

Website

babylonhealth.com

Project info

Website

digitalfutures.com

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

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.

Project info

Website

clubview.io

Team

Josué Vázquez Rendo, Itziar Urbieta

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.

Project info

Site

doTERRA Marketplace

Client

doTERRA

Agency

WQA

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

Repo

github.com/mrmartineau/gatsby-theme-code-notes

Example

code-notes-example.netlify.app

My Code Notes

notes.zander.wtf

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/

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

App

personal.equals.co

🏖 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

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.

Project info

npm

npmjs.com/package/@fairfx/fuji

Client

Equals

Team

Ivo Reis and many others

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

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 = () => (
  <RichText
    richText={richTextDataFromPrismic}
    heading1={yourCustomHeading1}
    paragraph={yourCustomParagraph}
  />
)

Project info

Repo

github.com/mrmartineau/prismic-reactjs-custom

npm

npmjs.com/package/prismic-reactjs-custom

👩‍🎨 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.js
import DesignSystem from 'design-system-utils'

// your design tokens object goes here
const 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.js
import 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')};
`

Project info

Repo

github.com/mrmartineau/design-system-utils

npm

npmjs.com/package/design-system-utils

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.

Project info

Team

Nic Bell, Simon Kinslow

TMW Case Study

tmwunlimited.com/work/barilla-global-website/

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

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

Repo

github.com/TryKickoff/kickoff

Team

Ashley Nolan, Nic Bell and many others

Project duration

4+ years

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