John Robert Pett, UI Developer in Leeds, United Kingdom
John Robert Pett

UI Developer in Leeds, United Kingdom

Member since February 1, 2017
John is an award-winning UI developer with 10 years of experience and a keen eye for design, animation details, and code quality. Recent projects include work for Adidas, HMRC, Channel 4, Le Col Cycling, William Hill, and Robinsons Soft Drinks. 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.
John is now available for hire

Portfolio

  • Container Studio
    CSS, Git, HTML, HTML5, Information Design, JavaScript, Jest...
  • Savvy Marketing
    JavaScript, React, WordPress, SCSS, Design, Git, PHP, HTML, Shopify, Sass...
  • Accenture
    JavaScript, React, SCSS, Git, HTML, Jest, Storybook, 2D, 3D, ES7, Sass, HTML5...

Experience

Location

Leeds, United Kingdom

Availability

Full-time

Preferred Environment

JavaScript, React, WordPress, SCSS, Webpack, CSS3, HTML5, Vanilla JS

The most amazing...

...thing I've done was shaping Adidas retail in Beijing with RFID-integrated touchscreens, giving users a rich media experience.

Employment

  • UI Developer

    2016 - PRESENT
    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 tech.
    • Worked for Harbour Space University as a lecturer of creative coding and a 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, HTML5, Information Design, JavaScript, Jest, MUI (Material UI), React, SCSS, WP Engine, Sass, TypeScript, Storybook, User Experience (UX), User Interface (UI), User Interface Engineering (UIE), Responsive UI, Responsive UX Design, Adobe CC, Webflow, Figma, API Integration, UI Design, UX Design, HTML5 APIs, Angular, UI Development, SVG Animation, WordPress REST API, WordPress API, Next.js, Shopify API, Webpack, WordPress, PHP, Design, Typography, GreenSock Animation Platform (GSAP), Google Maps API, UI Animation, APIs, Interaction Design (IxD), CSS3 Animation, CSS3, Vanilla JS, Mobile UI, Touch Interactions, Video.js, Animated Interactions, Web Project Management, HTML5 Canvas, Responsive Web Design (RWD), Photoshop CC, Adobe Illustrator, SVG, Interactive UI, HTML Email, HTML Templates, Mailchimp, Moment.js, jQuery, 2D
  • Senior UI Developer

    2021 - 2022
    Savvy Marketing
    • 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. My work included HTML5 canvas game development and animation work, and audience capture scaled 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, WordPress, SCSS, Design, Git, PHP, HTML, Shopify, Sass, HTML Email, HTML Templates, Next.js, Mailchimp, WordPress API, Responsive Web Design (RWD), GreenSock Animation Platform (GSAP), Games, HTML5 Canvas, Adobe CC, Animated Interactions, Video Ads, Video.js, UI Development, Figma, SVG Animation, WordPress REST API, Shopify API, Webpack, CSS, Typography, UI Animation, APIs, Interaction Design (IxD), CSS3 Animation, CSS3, Vanilla JS, Mobile UI, Touch Interactions, API Integration, Responsive UX Design, Responsive UI, User Interface Engineering (UIE), User Interface (UI), Photoshop CC, User Experience (UX), Adobe Illustrator, SVG, Interactive UI, Webflow, Moment.js, jQuery, 2D
  • 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, SCSS, Git, HTML, Jest, Storybook, 2D, 3D, ES7, Sass, HTML5, HTML5 APIs, UI, UX, UI Development, UX Design, Interactive UI, Figma, Django, UI Design, TypeScript, Webpack, CSS, Design, Typography, UI Animation, APIs, Interaction Design (IxD), CSS3 Animation, CSS3, Vanilla JS, Mobile UI, Touch Interactions, Video.js, API Integration, Animated Interactions, Web Project Management, HTML5 Canvas, Responsive Web Design (RWD), Adobe CC, Responsive UX Design, Responsive UI, User Interface Engineering (UIE), User Interface (UI), Photoshop CC, User Experience (UX), SVG, HTML Templates, Moment.js, jQuery
  • 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, JavaScript, SCSS, HTML, CSS, Sass, GreenSock Animation Platform (GSAP), HTML5 APIs, HTML5, Three.js, Marionette.js, UI Development, CSS3, CSS3 Animation, Responsive Web Design (RWD), 360° Video, Google Maps API, Instagram, Angular, iPad, Mobile UI, SVG Animation, Git, Typography, Webpack, UI Animation, APIs, Interaction Design (IxD), Vanilla JS, Touch Interactions, Video.js, API Integration, Animated Interactions, HTML5 Canvas, Adobe CC, Responsive UX Design, Responsive UI, User Interface Engineering (UIE), User Interface (UI), Photoshop CC, User Experience (UX), SVG, Interactive UI, Moment.js, jQuery, 2D
  • Interaction Designer

    2013 - 2015
    AIG Edenspiekermann
    • Created online cartography products for Heathrow Airport using LeafletJS. These products simplified the airport experience and reduced airport transport times as customers could more easily move through the airport.
    • Designed and developed the agency's website (using WordPress and Saas), 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 LeafletJS 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 print and digital applications across the company.
    Technologies: HTML5, JavaScript, CSS, Design, Typography, HTML, Sass, UI Design, UI Development, UX, UI, Adobe Illustrator, SVG, LeafletJS, Google Maps API, Adobe CC, SVG Animation, WordPress API, SCSS, WordPress, PHP, Git, GreenSock Animation Platform (GSAP), UX Design, Cartography, UI Animation, APIs, Interaction Design (IxD), CSS3 Animation, CSS3, Vanilla JS, Mobile UI, Touch Interactions, Video.js, API Integration, Animated Interactions, HTML5 Canvas, Responsive Web Design (RWD), Responsive UX Design, Responsive UI, User Interface Engineering (UIE), User Interface (UI), Photoshop CC, User Experience (UX), Interactive UI, HTML Email, HTML Templates, Mailchimp, Moment.js, jQuery, 2D, Processing.js

Experience

  • 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/redefining-the-retail-experience/

    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.

  • The Season
    https://www.maybourne.com/the-season/

    A calendar application for hotel group guests to find interesting things to do in and around London. Many guests use this stylish and effective tool each month during their stays in the group's extensive collection of hotels.

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

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

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

  • Living Map
    https://www.livingmap.com/

    Web cartography for major international cities, including London and New York. This included the internal mapping for several airports, most notably Heathrow in London, and creating mobile, web, and physical interactive signage to navigate places and spaces.

  • Warp Records
    https://warp.net/

    Providing creative technology project assistance for several Warp musicians and artists. Work included site development for Brian Eno, a Spotify listening platform application, and several Tumblr theme development projects.

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

  • East Street Arts
    https://www.eaststreetarts.org.uk/

    Web design and development for Leeds-based arts charity East Street Arts. Utilizing colour choices and palette creation technology to create a website with generative image creation from other artists' work.

  • Entourage Collection
    https://www.entourage-collection.com/

    A web portal for the work of Entourage, a boutique event coordinator and curator. We created brochure-style content for the web and mobile devices. The focus was on minimalism and a pared-back design with inspiring photography.

  • Robinsons Fruitshoot
    https://fruitshoot.com/en-us/

    Parallax and user interaction-based animations for the launch of Robinsons Fruitshoot. Through interaction and mouse-play, users could win prizes and learn about the brand, creating a rich experience to entertain the user.

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

  • Monza
    https://www.monzanet.it/

    Monza is a racetrack of pedigree known throughout Europe and the world. While working for the agency, The George in Barcelona, we created a new design direction and implementation for the famous race brand.

  • Commercial Estates Group
    https://www.ceg.co.uk/

    Web development for CEG, a local estate management company in the North of England. This included brochure-style layouts and a simple design to ensure that the website was very easy to find and consume what you are looking for. The website was also made with Gatsby as a way to work with a headless CMS.

  • 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!

  • Dermoi
    https://dermoi.com/

    Contributing to creating the online presence for a health and beauty startup called Dermoi! Taking the project from the initial branding to a fully branded eCommerce experience that launched the company to a successful position in the healthcare market.

  • Solidarity Sports
    https://www.solidaritysports.org/

    A charity project to help relieve the poverty caused by the Grenfell Towers disaster in London. Along with Studio Build, we created an online tool for people to donate to and learn about how this philanthropy organization works. The project raised over a million pounds for the Grenfell charity.

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

  • David Brown Automotive
    https://www.davidbrownautomotive.com/

    Provided developer support for this brochure platform's ongoing design and development. Built on WordPress, the site comprises both a public-facing and client portal for sales and management requirements. The role included adding user interaction improvements and improving code quality as the product matured.

Skills

  • Languages

    SCSS, JavaScript, CSS, HTML, HTML5, Sass, CSS3, PHP, TypeScript
  • Libraries/APIs

    React, jQuery, HTML5 APIs, Google Maps API, WordPress API, WordPress REST API, GSAP, SoundCloud API, LeafletJS, Tumblr API, Spotify API, Moment.js, Shopify API, HTML5 Canvas
  • Paradigms

    UI Design, UX Design, Responsive Web Design (RWD)
  • Platforms

    WordPress, GreenSock Animation Platform (GSAP), Shopify, Craft CMS, Webflow
  • Other

    Typography, HMTL5, UI Development, UI, CSS3 Animation, Design, UI Animation, APIs, Cartography, Interaction Design (IxD), UX, SVG, Interactive UI, HTML Email, HTML Templates, User Experience (UX), User Interface (UI), User Interface Engineering (UIE), Responsive UI, Responsive UX Design, Web Project Management, Animated Interactions, API Integration, Mobile UI, Storybook, Information Design, Processing.js, 2D, 3D, Strava, iPad, SVG Animation, Gatsby, Touch Interactions
  • Frameworks

    Video.js, Vanilla JS, Jest, MUI (Material UI), Django, Angular, Next.js
  • Tools

    Git, Webpack, Figma, Adobe Illustrator, Mailchimp, Adobe CC, Photoshop CC
  • Storage

    WP Engine

Education

  • Bachelor's Degree in Visual Communication
    2006 - 2009
    Leeds University - Leeds, United Kingdom

To view more profiles

Join Toptal
Share it with others