Projects

2020

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.

Project info

doTERRA logo
Site
doTERRA Marketplace
Client
doTERRA
Agency
WQA
2020

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.

Listing pageNote pageSkinny noteListing page (dark mode)Skinny navNote page (dark)

Project info

Repo
github.com/mrmartineau/gatsby-theme-code-notes
My Code Notes
notes.zander.wtf
2020

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 (unreleased)
  • Curve's design-system (private)
  • New version of curve.com (unreleased)

Project info

Curve logo
Team
Bharat Jay, Matt Boyle, Connor Gettel, Diego Rivas, Andrea Medda, Filcho Dragunchev, Dimitry Theulings
Samsung Pay Card announcement
techcrunch.com/samsung-pay-card-powered-by-curve/
2019

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.

Account overviewExchange currencyMarketing site

Project info

Equals Go Card logo
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
2019

“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.

Project info

“Fuji” Design System logo
npm
npmjs.com/package/@fairfx/fuji
Client
Equals
Team
Ivo Reis and many others
2019

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.

Home pageCardsBlog cardsModalNavigation

Project info

Cornmarket logo
Tech stack
Prismic CMS, Stimulus.js, .Net, Sass
Team
Neil Ballinger, Robbie Davies, Matt Noble, Zak Abu Zubair
Component library
All components
2018

prismic-reactjs-custom


An opinionated fork of prismic-reactjs that allows you to use custom React components instead of standard HTML tags

jsx
import { RichText } from 'prismic-reactjs-custom'
const RT = () => (
<RichText
richText={richTextDataFromPrismic}
heading1={yourCustomHeading1}
paragraph={yourCustomParagraph}
/>
)

Project info

Repo
github.com/mrmartineau/prismic-reactjs-custom
2018

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.

js
// ./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
2018

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.

Recipe pageSearch page

Project info

Barilla logo
Team
Nic Bell, Simon Kinslow
TMW Case Study
tmwunlimited.com/work/barilla-global-website/
2016

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.

Quote pageBlog listing page404 page

Project info

TMW Unlimited logo
Agency
TMWUnlimited...
Team
Lorena Teruel
Site at launch
tmwsite.now.sh
2014

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

Kickoff logo
Repo
github.com/TryKickoff/kickoff
Team
Ashley Nolan, Nic Bell and many others
Project duration
4+ years
2013

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.

Home pageRecipe page

Project info

The Bar logo
theBar
uk.thebar.com
Team
Nic Bell, Simon Kinslow