John Jost/Projects

  1. F1 Design System.

    As a Principal Full-Stack Developer, I led the development of the new Formula 1 Design System to support a globally scaled, high-traffic platform. I was also responsible for the end-to-end migration from a legacy system to Next.js, enhancing performance, accessibility and long-term maintainability. Having originally built the previous iteration of the platform, I provided continuity and architectural insight throughout the transformation.

    • design system (Figma + Storybook)
    • full-stack development
    • Next.js
    • Tailwind
    • a11y
  2. Travis Perkins plc.

    As a Solution Architect, I was responsible for the day-to-day design, implementation and technical delivery of a server-side rendered e-commerce platform based on Nuxt.js for one of the largest retailers in the UK.

    • Vue.js / SSR Nuxt.js / Vuex
    • TypeScript
    • Tailwind CSS
    • Jest
    • REST API
    • strategy / technical direction
  3. Lloyds Bank.

    At Lloyds Bank I worked extensively with React.js on the technical delivery of the Strong Customer Authentication project, introducing additional multi-factor authentication screens to existing user login journeys. This involved implementing new React UI components for each 2FA method, including app verification, card reader verification, SMS code verification and phone call verification, consuming method-specific APIs and integrating them into the existing SPA.

    • React / MobX
    • SPA
    • REST API
    • styled components
    • Jest
    • multi-factor authentication
  4. Valtech.

    Coming from a design background, I enjoy working closely with UX teams to ensure the final product is a joy to use. At Valtech, I worked closely with the Lead UX Designer to create a highly interactive proof of concept for a public sector client. The prototype was built using React with styled components, and most of the components I created were production-ready and reused in the final application build.

    • React
    • rapid prototyping
    • UX
    • REST API
    • styled components
  5. Deloitte Digital.

    At Deloitte Digital I was Technical Lead for the NHS / GOV.UK Coronavirus Testing website, working extensively with Vue.js. My role centred around managing a cross-border team of developers delivering rapid response during the COVID-19 crisis. It was one of the fastest-paced roles of my career, and helped millions of people access coronavirus tests 24/7 on web and mobile.

    • tech design
    • documentation
    • code quality
    • Vue.js / Vuex
  6. Calvin Klein.

    Calvin Klein's brand identity is rooted in pop culture, particularly its youth-oriented CK One fragrance. The brand enlisted 11 everyday young adults across the USA — from Mexican immigrants to indigenous natives — in a new campaign which amplifies each distinct voice as they broadcast their own experiences, perspectives and hopes for the future. An integral part of the campaign is the collaborative Spotify playlist app, which I hand-built to help the brand create a space to share collective hopes for the future.

    • React
    • Spotify API
    • SPA
    • animation
    • mobile web
  7. Nissan.

    Nissan launched the Ariya, a new electric crossover vehicle and successor to the Leaf EV, and needed a cutting-edge visual experience to showcase the vehicle to customers. Together with teams across the globe, I helped shape and craft an interactive 3D React vehicle brochure site, primarily overseeing the implementation of CSS animations across components to strict motion design requirements.

    • React
    • vanilla JavaScript
    • CSS / SASS
    • animation
    • SPA
    • mobile web
  8. Publicis Sapient.

    Having gained significant experience with the bespoke Nissan web platform, I provided core support to teams from London, Latin America and Asia, helping shape features for the manufacturer’s online presence. Working closely with the end client, Director of Technology and Technical Product and Experience Lead, I was responsible for translating business requirements into solution design and technical implementation.

    • tech design
    • documentation
    • vanilla JavaScript
    • node.js
    • business analysis
  9. Formula 1.

    The FIA Formula 1 Championship is one of the most recognisable competitions in the world. After over 20 years, Formula 1 revealed a refreshed visual identity, and I was part of the team responsible for bringing the new design to fans across the globe. My work involved planning the delivery strategy alongside the Tech Director and providing hands-on support to the team.

    • strategy
    • React
    • vanilla JavaScript
    • CSS / SASS
  10. Digitas LBI.

    Renault and Nissan Alliance appointed Digitas LBi to handle their €50m global portfolio of websites, elevating brand presence and consumer experience worldwide. I joined DLBi as a Lead Interface Developer in the Release Preparation team, where I was responsible for maintaining consistently high code quality across the platform, before being selected as Lead ID for the launch of the new global identity for Dacia.

    • tech design
    • documentation
    • code quality
    • vanilla JavaScript
    • debugging
    • node.js
  11. Dare.

    At DARE I was responsible for rapid development of modules for the main EE website within the pre-existing project environment, working in strict accordance with brand style guides and dynamic client requests.

    • HTML
    • CSS / SASS
    • vanilla JavaScript
    • mobile web
  12. POSSIBLE.

    POSSIBLE was tasked with revamping Canon’s digital presence. As a leading manufacturer of imaging and optical products with a highly demanding customer base, Canon required a unified experience across global markets, easily accessible on any device. Working closely with POSSIBLE’s Head of Design and Creative Technology Lead, I was responsible for the architecture and execution of a new digital platform for the brand.

    • tech design
    • React
    • CSS / SASS
    • mobile web
  13. FCB Inferno.

    FCB Inferno brought me on board to develop a mobile-first web app for the nationwide This Girl Can campaign. Built primarily with Backbone.js, the app used HTML5 Canvas APIs for dynamic image generation on the client and hardware-accelerated CSS3 transitions to provide users with a native-like experience.

    • Backbone.js
    • CSS / LESS
    • animation
    • mobile web
    • SPA
  14. McDonald’s.

    McDonald’s Monopoly is one of the UK’s biggest and longest-running online promotions. Customers could play on the go using optimised mobile and tablet versions, and track prizes through an interactive location map using real-time data.

    • Backbone.js
    • CSS / SASS
    • UX
    • animation
    • SPA
    • mobile web
  15. Monterosa.

    To celebrate Rugby World Cup 2015, Adidas AG teamed up with Monterosa to create the Adidas XV Challenge — a rugby card game for fans. Built with Backbone.js on top of Express.js / Node.js, the app recreated the experience of classic card games directly on users’ phones.

    • Backbone.js
    • tech design
    • API
    • CSS / LESS
    • SPA
    • UX
  16. tag worldwide.

    As a Senior Front-End Developer at TAG Worldwide, I was responsible for authoring a Node.js / PhantomJS-based automation framework for on-demand deployment of multilingual iOS applications for Bristol-Myers Squibb.

    • node.js
    • Phantom.js
    • tech design
  17. Clubhouse Studios.

    This small but rather mighty creative studio based in Shoreditch needed a hand to complete a brand new website for a chain of premium Indian restaurants in London. The website won the Awwwards Site of the Day prize.

    • WordPress
    • PHP
    • SQL
    • CSS / LESS
    • jQuery
    • mobile web
  18. iris worldwide.

    At Iris I worked as lead developer on a series of projects for the BMW Group / MINI, most notably a web-based car chooser for customer retention and a Christmas Special mobile website.

    • Backbone.js
    • vanilla JavaScript
    • SPA
    • mobile web
  19. NatWest.

    At Reward I was in charge of a complete overhaul of NatWest’s Cashback Plus website. I was involved in all phases of the project, initially working closely with the Sapient Nitro design team and UX experts from Somo on the mobile-first prototype, before coordinating a team of developers to ensure smooth delivery.

    • UX
    • product design
    • prototyping
    • CSS / LESS
    • Bootstrap
  20. Outside Line.

    I was initially hired by Outside Line to work for brands including Kellogg’s, Arla Foods and Rekorderlig on a series of campaigns, which eventually led to more work for Saatchi & Saatchi.

    • HTML
    • vanilla JavaScript
    • CSS / SASS / LESS
  21. Saatchi & Saatchi.

    I joined Saatchi & Saatchi when Publicis Groupe acquired Outside Line, working on a variety of projects ranging from standalone websites to landing pages and Facebook applications across high-profile clients.

    • Backbone.js
    • CSS / SASS
    • vanilla JavaScript
    • API
    • mobile web

Note: Some projects are not listed here due to confidentiality reasons. I have worked on many other projects for various clients over the years, but I can only share a selection of them here. If you are interested in learning more about my work, please feel free to reach out to me directly.