Rob is available for hire
Hire RobRob Sutcliffe
Verified Expert in Engineering
User Interface Engineer and Software Developer
Reading, United Kingdom
Toptal member since February 16, 2022
Bio
Rob is a principal UI engineer with over a decade of professional experience working with React, Tailwind, and Next.js. He is particularly interested in data visualization using D3.js and Framer Motion animations. Rob has a design background as he has a degree in graphic communications and extensive experience working as a UI designer, design manager, and design consultant.
Portfolio
BNP Media, Inc.
React, JavaScript, Redux, D3.js, Material UI, Charts, Data Visualization...
PepsiCo
JavaScript, D3.js, Node.js, HTML, CSS, Alpine.js, Tailwind CSS, Git, GitHub...
Arizona State University
Tailwind CSS, Ant Design, Validation, Next.js, React, React Hook Form, SWR...
Experience
Availability
Full-time
Preferred Environment
WebStorm
The most amazing...
...thing about me is that I've set up a professional speaking group and run successful workshops about both design and development.
Work Experience
React Developer
2023 - PRESENT
BNP Media, Inc.
- Created a tool to analyze open-ended responses to questions and convert them into a treemap.
- Recreated the codebase in TypeScript, including enums and interfaces.
- Updated all D3.js charts to be responsive before creating a comparison view of the charts.
Technologies: React, JavaScript, Redux, D3.js, Material UI, Charts, Data Visualization, Dashboards, Application State Management, Node.js, TypeScript, OpenAI
Full-stack Developer
2022 - 2022
PepsiCo
- Developed a visual query builder for the marketing team to select market segments and generate reports.
- Created interactive data visualizations for reports of market segments.
- Built an analytics dashboard showing various metrics of the effectiveness of different AI data models.
Technologies: JavaScript, D3.js, Node.js, HTML, CSS, Alpine.js, Tailwind CSS, Git, GitHub, Data Visualization, Snowflake
Front-end Engineer
2022 - 2022
Arizona State University
- Added new interactions to the Course Designer tool, allowing teachers to create and preview new learning content.
- Created the teacher experience for teachers to view students' scores and responses to interactions during online courses.
- Implemented form validation and sanitation for any user inputs.
Technologies: Tailwind CSS, Ant Design, Validation, Next.js, React, React Hook Form, SWR, Axios, Styled-components, Auth, Functional Programming
UI Developer
2021 - 2021
The Economist
- Created a complex custom and responsive grid for a unique and adaptable page layout.
- Built custom transitions to animate pages in a unique way.
- Degraded substitute transition for older browsers.
- Implemented Google Tag Manager for the marketing team to track users' actions.
- Separated content into markdown files and animation/transition specs and positioned them into JSON files.
Technologies: Next.js, Framer Motion, WebGL, JSON, Markdown, CSS, DataViz, Responsive UI, Browsers, Google Tag Manager, Data Visualization
Tech Lead
2019 - 2020
FilmDoo
- Developed the Node.js scraping and analysis API to recommend films and other content based on a language level.
- Implemented observable design patterns using Socket.IO for dual-screen functionality.
- Created mobile application prototypes using React Native.
- Customized the Strapi CMS to add functionality for observables and set up daily cron jobs to mirror an existing database.
- Kept the site architecture clean, making it easy for outsourced developers to get up to speed and quickly add value to the codebase.
- Established a CI/CD pipeline with testing and automatic deployments from GitHub branches.
Technologies: Tailwind CSS, React, Next.js, Socket.IO, Heroku, GitHub, Figma, Framer Prototyping, Webpack, Node.js, React Native, CI/CD Pipelines, Functional Programming, TypeScript, TypeScript 3, User Interface (UI), Full-stack, REST, REST APIs, PostgreSQL, SQL
Principal Application Engineer
2016 - 2019
Oracle
- Liaised directly with the data science team to understand the data better and create unique D3.js data visualization.
- Created a custom browser extension for stubbing and integration testing across environments.
- Built custom user interfaces using Oracle JavaScript Enterprise Toolkit (JET).
- Wrote unit tests and maintained code coverage across the whole project.
- Participated in and administered code reviews to maintain high coding standards.
- Worked in an agile cross-functional engineering team.
Technologies: Oracle JavaScript Extension Toolkit (JET), Knockout (Knockout.js), RequireJS, Karma, Git, CSS, HTML, Jenkins, Webpack, D3.js, Node.js, Sinon.JS, DataViz, Front-end, Data Visualization
User Interface (UI) Consultant
2015 - 2016
Jive Software
- Consulted multiple multinational organizations, identifying each customer's unique needs, proposed design solutions, and customized their Jive instance.
- Mended or created templates and components built with Google Closure or Soy templates.
- Identified customer needs, then proposed and presented custom design solutions.
Technologies: JavaScript, CSS, SaaS, Closure Templates, HTML
Senior Design Manager
2013 - 2014
Chartered Institute of Marketing (CIM)
- Designed and built multiple microsites for one-off events.
- Created a complete design system of reusable components.
- Consulted directly with a leading brand agency for an international rebrand.
- Managed the complete creative team while rebranding the whole institution.
Technologies: CSS, Sass, Sketch, Illustrator CC, Design Systems, SVG, Rebranding
User Interface (UI) Designer and Developer
2012 - 2013
Hitachi Data Systems
- Rearchitected an internal project management tool using a model–view–controller (MVC) framework.
- Interviewed and observed users to help understand user flows and recreate the user experience.
- Worked directly in the project management team, ensuring the application was useful for both engineers and project management.
- Utilized multiple jQuery extensions to keep the codebase simple and easy to maintain.
Technologies: PHP, CodeIgniter, jQuery, JavaScript, Focus Groups, User Experience (UX), User Research, User Flows
Web Designer and Developer
2010 - 2012
Growth Engineering
- Built a custom content management system (CMS) using PHP for the corporate site.
- Identified the brand characteristics used for branding guidelines.
- Created custom e-learning slide templates using ActionScript.
Technologies: PHP, MySQL, jQuery, CSS, JavaScript, PHP MVC, CodeIgniter, Flash, ActionScript 3, Articulate Storyline, Adobe Captivate, Instructional Design, HTML
Web Designer and Developer
2008 - 2010
School Website
- Liaised directly with clients to ensure the design met their standards.
- Built websites from scratch on top of companies' own custom CMS.
- Handled multiple clients simultaneously and launched numerous websites per month.
Technologies: Adobe Illustrator, Adobe Photoshop, CSS, HTML, JavaScript, Flash
Experience
Economist Intelligence 75th Birthday
https://www.youtube.com/watch?v=-hYjk9hpWWoCreated a microsite for The Economist Intelligence 75th anniversary. I worked directly with the designer, strategist, and client to design and develop a unique one-off site. Transitions were created using Framer Motion.
Language Learning with Video App
https://youtu.be/2vUus1VzEyEA Strapi and Next.js application with scraping, fuzzy search, and a custom video player. Its features include JWT OAuth, fuzzy search, and a daily cron job to mirror existing databases and images. It allows teachers to find and adapt video clips from foreign language films, add questions, and set them for homework. Teachers can upload and share worksheets that relate to the lessons.
Advanced JavaScript Course for Scrimba
https://scrimba.com/playlist/p6WwDCYI worked directly with Scrimba as a guest lecturer to create an advanced JavaScript module, teaching ES6 and how to apply it to improve the application's architecture. I wrote the syllabus for the module, created the example application, recorded, and edited it, making alterations as the platform owners requested.
Socket.IO Real-time Game
https://youtu.be/c3r1glqMMsUBuilt an application for FilmDoo for students to watch and interact with films in real time and for teachers to control the film and see results at the end. The application heavily uses WebSockets and is animated with Framer Motion.
Education
2000 - 2003
Bachelor's Degree in Graphic Communications
University for the Creative Arts - Farnham, England
Certifications
SEPTEMBER 2023 - SEPTEMBER 2025
Data Analyst Professional Certificate
DataCamp
MAY 2019 - PRESENT
Information Visualization Specialization
New York University | via Coursera
MAY 2019 - PRESENT
Data Visualization with R
Data Camp
Skills
Libraries/APIs
React, D3.js, React Motion, Node.js, jQuery, RequireJS, Sinon.JS, Three.js, WebGL, Socket.IO, REST APIs, React Hook Form, Auth, Framer Motion
Tools
Adobe Illustrator, Figma, WebStorm, DataViz, Flash, Articulate Storyline, Adobe Captivate, Sketch, Illustrator CC, Karma, Git, Jenkins, Webpack, Adobe Photoshop, GitHub, Cron, Auth0
Languages
CSS, JavaScript, HTML, R, PHP, ActionScript 3, Sass, TypeScript, TypeScript 3, Markdown, SQL, Snowflake, Python
Frameworks
Tailwind CSS, Next.js, PHP MVC, CodeIgniter, Oracle JavaScript Extension Toolkit (JET), Knockout (Knockout.js), React Native, OAuth 2, JSON Web Tokens (JWT), Ant Design, Alpine.js, Redux, Material UI
Paradigms
UI Design, Design Thinking, Instructional Design, Functional Programming, REST
Platforms
Heroku
Storage
MySQL, PostgreSQL, JSON
Other
User Experience (UX), Graphic Design, Framer, APIs, Information Design, Data Analytics, Google Tag Manager, Focus Groups, User Research, User Flows, Design Systems, SVG, Rebranding, SaaS, Closure Templates, Recording, Audio, HTML Canvas, Framer Prototyping, CI/CD Pipelines, Web Video, Search, User Interface (UI), Front-end, Full-stack, Validation, SWR, Axios, Styled-components, WebSockets, Strapi, Web Scraping, Responsive UI, Browsers, Data Visualization, Data Engineering, Charts, Dashboards, Application State Management, OpenAI
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