John Robert Pett, Developer in Leeds, United Kingdom
John is available for hire
Hire John

John Robert Pett

Verified Expert  in Engineering

Bio

John is an award-winning UI developer with over 10 years of experience and a keen eye for design, animation details, and code quality. His recent projects include work for Adidas, HMRC, Channel 4, Le Col Cycling, Resident Advisor, and Mitsubishi. John has a bachelor's degree in visual communication from Leeds University and brings a wealth of interface development knowledge to independent and enterprise businesses alike.

Portfolio

Container Studio
CSS, Git, HTML, Information Design, JavaScript, Jest, Material UI, React.js...
Savvy
JavaScript, React.js, WordPress Development, Git, PHP, HTML, Shopify, Next.js...
Accenture
JavaScript, React.js, Git, HTML, Jest, Storybook, 2D, HTML5, UI Development...

Experience

Availability

Full-time

Preferred Environment

JavaScript, React, Next.js, Storybook

The most amazing...

...thing I've done is working with Unmade to build online digital tools for creating knitwear.

Work Experience

Lead UI Developer

2016 - 2024
Container Studio
  • Implemented the UI for Unmade, using the browser to assist in designing and manufacturing knitwear. This won a D&AD award for the agency and made Unmade the most innovative textile startup in the industry, setting a standard for fashion technology.
  • Worked for Harbour.Space University as a creative coding lecturer and developer on the team building its main website. The project helped launch Harbour.Space as a leading institution in technology education.
  • Created the online presence of musician and performer David August. The site received critical acclaim from industry peers for style and typography.
  • Led the redesign and development of the East Street Arts charity. Created a full-stack solution with generative design patterns to reduce employees' work when creating assets for the website.
  • Served as a senior website developer for The Seasons, part of the Maybourne Hotel Group. Created an events and activities portal, which generated a community of repeat visitors to the local area and hotel.
Technologies: CSS, Git, HTML, Information Design, JavaScript, Jest, Material UI, React.js, WP Engine, TypeScript, Storybook, UX Development, UI Development, User Interface Engineering (UIE), Adobe Software Development, Figma, UI Design, HTML5, UI Development, SVG Animation, WordPress Development, Next.js, Shopify API, WordPress Development, PHP, Animation Development, Google Maps Development, UI Development, APIs, Interaction Design (IxD), Mobile UI Design, HTML5, Responsive Web Design, SVG Design, 2D, Accessibility Development, Tailwind CSS, Bitbucket, Jira, Confluence, Visual Studio Development

Senior UI Developer

2021 - 2022
Savvy
  • Developed software to integrate Le Col cycling's website and marketing into Strava to create activity-based competitions and reward schemes. This created a unique online experience for users to engage with the brand via daily activities.
  • Created multiple competition applications for Robinsons Soft Drinks, including interactive games. This included HTML5 canvas game development and animation work, with audience capture scaling beyond anything previously achieved within the brand.
  • Built multiple applications to assist Adidas Sportswear's internal communications department in streamlining its online marketing, including campaigns, audience capture, and user management.
Technologies: JavaScript, React.js, WordPress Development, Git, PHP, HTML, Shopify, Next.js, WordPress Development, Responsive Web Design, Animation Development, HTML5, Adobe Software Development, UI Development, Figma, SVG Animation, Shopify API, CSS, UI Development, APIs, Interaction Design (IxD), Mobile UI Design, User Interface Engineering (UIE), UI Development, UX Development, SVG Design, 2D, Accessibility Development, Bitbucket, Jira, Confluence, Visual Studio Development

Senior UI Developer

2019 - 2021
Accenture
  • Created a component library to rebrand Channel 4 television's online presence, allowing consistent design across all applications. My work was recognized as a benchmark for Accenture technology standards.
  • Developed software applications to assist His Majesty's Revenue and Customs (HMRC) in managing COVID-19. The project received direct praise in the press from Rishi Sunak, and all developers were awarded a badge for societal contribution.
  • Designed a component library to align design styles across all HMRC software and online applications. With great attention to accessibility, this became a world-renowned example of design for disability.
Technologies: JavaScript, React.js, Git, HTML, Jest, Storybook, 2D, HTML5, UI Development, Figma, UI Design, TypeScript, CSS, UI Development, APIs, Interaction Design (IxD), Mobile UI Design, HTML5, Responsive Web Design, Adobe Software Development, User Interface Engineering (UIE), UI Development, UX Development, SVG Design, Accessibility Development, Tailwind CSS, Bitbucket, Jira, Confluence, Visual Studio Development

Front-end Developer

2015 - 2016
B-Reel
  • Worked on a creative data presentation for Yahoo and Cannes. Developed a web-based iPad app, enabling the easy display of digital content, animation for iOS, and JavaScript web animations. Tens of thousands of festival visitors saw this work.
  • Worked on GeoVegas for the Las Vegas tourist board, utilizing 360-degree panoramas in collaboration with Google. This work positively impacted tourism in Las Vegas and the surrounding area and businesses.
  • Developed an eCommerce and multimedia app for a new season campaign for Balmain and H&M. The app featured extensive browser animations and high-quality asset rendering, and all clothing sold out within 24 hours of site deployment.
  • Worked on Zalando's Share Your Sexy Campaign, using images from Instagram and third-party APIs to create user-generated content. This work contributed to increased sales for Zalando in Spain.
  • Contributed to Zalando's Ivy Park collaboration, using high-quality image assets and video in a brochure-style eCommerce platform. Clothing sales increased instantly upon project completion, launching Ivy Park in Europe.
Technologies: React.js, JavaScript, HTML, CSS, Animation Development, HTML5, UI Development, Responsive Web Design, Google Maps Development, Mobile UI Design, SVG Animation, Git, UI Development, APIs, Interaction Design (IxD), HTML5, Adobe Software Development, User Interface Engineering (UIE), UI Development, UX Development, SVG Design, 2D, Accessibility Development, Bitbucket, Jira, Confluence

Interaction Designer

2013 - 2015
AIG Edenspiekermann
  • Created online cartography products for Heathrow Airport using Leaflet. These products simplified the airport experience and reduced airport transport times as customers could move through the airport more easily.
  • Designed and developed the agency's website, featuring a unique grid system to display its work and gain a strong web presence among its peers.
  • Created an interactive touchscreen for Transport for London (TfL), a government agency, using the TfL data API. This work received a Queen's Contribution to Design Award as a first-in-kind use of technology in the cartography space.
  • Researched and developed mobile mapping in Heathrow Airport using HTML5 APIs and used it to develop navigation tools for airport users.
  • Created a city map in the browser for Vancouver, Canada, using Leaflet and tiling techniques to create graphically rich maps with JavaScript. This increased tourists' ease of navigation within their respective cities.
  • Led the UX design for digital applications across the company.
Technologies: JavaScript, CSS, HTML, UI Design, UI Development, SVG Design, Google Maps Development, Adobe Software Development, SVG Animation, WordPress Development, WordPress Development, PHP, Git, Animation Development, UI Development, APIs, Interaction Design (IxD), Mobile UI Design, HTML5, Responsive Web Design, User Interface Engineering (UIE), UI Development, UX Development, 2D, Processing.js, Accessibility Development, Bitbucket, Jira, Confluence

Channel 4

https://www.channel4.com/
An on-demand TV and film application for British TV Channel 4. Video streaming and content information are available via this portal. I built a React Storybook component library to align all design elements across all related Channel 4 applications.

Adidas Home Court Arena

https://startdesign.com/case-study/adidas/
An interactive tabletop application for Adidas in Beijing that allows users to find associated marketing and product information in-store. This project led to multiple international Adidas stores utilizing the same approach to in-store promotion.

Harbour Space

https://harbour.space/
A brochure-style site for a new technology university in Barcelona, Spain. As the front-end developer and UI designer, I created interactive pages to attract new students (worldwide) to the university.

Gravis Capital

https://www.graviscapital.com/
Developed a Craft CMS app for Gravis Capital to display its investment portfolio in a clean, modern, and informative way. I delivered CSS and JavaScript animations and a clean implementation of a mobile responsive design.

Le Col Cycling Club

https://lecol.cc
A React and Next.js application integrated with Strava, allowing users to accumulate points via exercises and competitions. I created CSS and JavaScript animations to display datasets from users' Strava profiles.

Applied Wayfinding

http://appliedwayfinding.com/
Completed multiple web cartography projects, including interactive signage and urban mapping. These solutions use web technologies to make cities more navigable and consumable for local residents and tourists.

Unmade

https://www.unmade.com/
Unmade also uses its technology in collaboration with major brands like New Balance. Responsible for web development of a browser-based application that allows users to manipulate and design knitting patterns on their own devices and purchase their unique creations.

HMRC Government Portal

https://www.gov.uk/
Created reusable components for all government-related sites to maintain a consistent design and user experience. My UI development and interaction design were vital in making this project a benchmark for government services.

Composer Trade

https://www.composer.trade/
A Next.js application focused on a clean and modern design aesthetic with particular attention to SEO. Indexability was increased tenfold by using multiple Google tools for SEO optimization. Design implementation with Tailwind plugin development was a large part of this project.

Transport for London

http://appliedwayfinding.com/projects/real-time-digital-information-mapping/
A real-time, interactive mapping platform for use as a prototype for the future of city navigation. The initial prototype placed on Oxford Circus in London to test the validity of interactive software applications in the urban environment.

Balmain x H&M

https://projects.balmain.com/gb/balmain/projects/balmain-x-hm
Development of a web application targeted at the iPad, tablets, and touch devices to promote the collaboration of Balmain and H&M. The applications contained an eCommerce component, a brochure-like section for garment promotion, and several videos and interactive elements to promote the brands.

Teamable

https://www.teamable.com/
Teamable is an AI-powered recruitment platform requiring an informative UI to present their business and individual subscription plans for the multi-tool software they offer, built with a static WordPress website with Figma.

Haseltine Lake Kempner

https://www.hlk-ip.com/
An animated site for IP visionaries HLK. Built using WordPress — utilizing animation with both CSS and GSAP — to create some unique touches and a sense of excitement for the brand, plus a lot of colours!

Leeds Alumni Digital Magazine

https://magazine.alumni.leeds.ac.uk/
An online magazine for alumni of Leeds University in West Yorkshire. Using WordPress, I built a reusable structure to house articles, ongoing activities, and the latest news at the centre for education in the North of England. Work included management and liaison between the design studio and the client university, allowing stakeholders to inform how the product worked.

Resident Advisor

https://group.ra.co
A public portal built on WordPress. The portal gives access to all areas of business in which this digital music platform exists. This gateway improved commercial awareness for international event promoters, allowing new businesses a separate web space.
2006 - 2009

Bachelor's Degree in Visual Communication

Leeds University - Leeds, United Kingdom

Libraries/APIs

React.js, HTML5, Google Maps Development, WordPress Development, GSAP, Shopify API, HTML5

Tools

Git, Figma, Adobe Software Development, GitHub, Bitbucket, Jira, Confluence

Languages

JavaScript, CSS, HTML, PHP, TypeScript

Frameworks

Next.js, Tailwind CSS, Jest, Material UI

Paradigms

UI Design, Responsive Web Design

Platforms

WordPress Development, Animation Development, Shopify, Vercel, Visual Studio Development

Storage

WP Engine

Other

Information Design, UI Development, UI Development, User Interface Engineering (UIE), HTML5 Video, UI Development, APIs, Interaction Design (IxD), SVG Design, UX Development, Mobile UI Design, Accessibility Development, Storybook, Processing.js, 2D, SVG Animation

Collaboration That Works

How to Work with Toptal

Toptal matches you directly with global industry experts from our network in hours—not weeks or months.

1

Share your needs

Discuss your requirements and refine your scope in a call with a Toptal domain expert.
2

Choose your talent

Get a short list of expertly matched talent within 24 hours to review, interview, and choose from.
3

Start your risk-free talent trial

Work with your chosen talent on a trial basis for up to two weeks. Pay only if you decide to hire them.

Top talent is in high demand.

Start hiring