Leadership

AI-1st Product design
transformation

How I led a product design team, through AI-skepticism, to a rapid evolution of approach & capability – supporting them hands-on, through the transition

People leadership AI Transformation Up-skilling
Core capabilities Change management, leadership & line-management, inc. hands-on support, and team up-skilling
Role Line manager
The outcomes

An evolved approach to product design

Various improvements were made throughout the entirety of the product design process – including some key measurable impact:

Reduction of ave. project discovery time by 56%

Reduction of quarterly planning cycle by 45%

66 merge requests submitted from first quick wins week – 14 straight into production

Vibe-coding as standard practice for: concept testing, communicating intent & developer–designer collaboration through to production

Release of previously impossible customer delight through the creation of in-platform animations & micro-animations

Multiple efficiency gains throughout the product design process

Context
The problem

Product designers' capabilities & workflows did not match Cloudflare's newly defined ambition, of being an 'AI-1st software company'

Commercial objective

Radically transform ways of working & shipping cadence, of product design; aligning to the wider AI transformation throughout the business

Key constraints

Existing resource & team structure; continuous delivery of committed deliverables

“We are an AI-1st software development company...”

Cloudflare announced overnight, that it was now, an AI-1st software development company – as well as an expectation to radically evolve practices organisation-wide, there was also a clear expectation from leadership for efficiency gains to emerge

“The first tool that you reach for, to complete any task, should be an AI tool...”

Capability

Product designers had zero coding capability

Engagement

Individuals' natural engagement level varied wildly throughout the team

Skepticism

A significant level of skepticism of the underlying rationale for the initiative, as well as the technology's appropriateness for product design, existed throughout the team

The solution

How do you simultaneously: explore new capability; upskill, and deliver?

Without sacrificing engagement, motivation, or overwhelming the team

Obvious gains

Vibe-coding & customer insight synthesis

As a department, we needed to rapidly engage with the sprawling technology, to form an opinion of where short time-to-value could be gained – vibe-coding, and AI as a tool to add technical capability to product designers emerged as the earliest, obvious opportunity. It was an area that we knew would resonate well with the technical culture of the org, as well as expand the current capability of product design.


Our initial focus was on the use of AI to:

  • Enable designers to build their design intent – closing the gap that existed at production handover, and uplifting end customer experience
  • Build interactive prototypes for richer customer insight gathering
  • Reduce the time required to gather customer insight – using AI to both streamline study guide design & observation synthesis
Vibe-coded prototype for concept testing.
Vibe-coded prototype built to facilitate concept testing – animation & rich interactive flows allowed for efficient gathering of in-depth insight
Design intent for enhanced feature onboarding flows with vibe-coded animations.
Design intent for enhanced feature onboarding flows, featuring vibe-coded animations – something that front-end developers previously never had capacity to build. The designer built animations were inserted directly into the code base & shipped to production
A designer working directly in an AI IDE.
The AI, IDE – a new interface for designing directly in code. Entire pages were migrated to Cloudflare's new design system, by designers. No designing in figma, followed by developer building + QA – some designers were shipping entire pages straight to production at the end of the transformation
Increasing engagement

Supporting through doing, and slowly turning the tide on AI-skepticism

After creating some initial momentum & initially identifying some discrete areas of gains within our workflow, we needed to identify the wider landscape of application, throughout the entire product design process.

Engagement levels for the new tech varied wildly throughout the team, and wider department – nobody knows the ultimate impact of AI on product design, but we knew that the only option that we had was to engage & understand the new landscape. We leveraged the enthusiasm of some engaged individuals, whilst supporting the skeptics (/ individuals whose capabilities lied naturally a little further from the new technology) with hands-on coaching & trouble-shooting, through dev. environment setup, and devOps workflows. Some critical initiatives included:

  • Setting up an AI tiger-team (focussed on dedicating more time exploring the new tech.)
  • Formalising ‘Experiment Friday’ afternoons – time dedicated to understanding the capability & applicability of the new tech.
  • Growth week – a full week of formal tuition, run by our design ops dept.
  • Recurring team demos – show and tell of learnings for any kind of experimentation with AI
  • Team-led AI-Experimentation workshops – focussing on where & how we currently do & want to spend our time ie. the sub-text of using AI to remove the less-desirable tasks in the teams’ day-to-day
  • Quick wins week – a chance to focus on the ever-growing backlog of UX papercuts, and fix them, through vibe-coding solutions & releasing to production
Output of a team workshop identifying where AI could relieve burden on product design tasks.
Output of a team workshop, identifying where AI could relieve the burden, and remove low value, high-frequency product design tasks
The workflow required throughout quick wins week for designers to make meaningful changes to platform pages.
The workflow required throughout quick wins week – to enable designers to make meaningful changes to platform pages, without unintentionally over-loading front end developers, and requiring them to review overly-complex merge requests. This was an outcome of deep, hands-on collaboration with front end development leadership.
Visualisation of the various code environments and flow through to production.
Visualisation of the various code environments & flow, through internal testing environments, through to production
A designer presenting their changes to production within a team demo.
A designer presenting their changes to production, within a team demo.
Challenges

Overcoming the technical head-winds, and learning from mistakes

The core of the transformation took just over 3 months, and significant room for improvement remains. Some of the key barriers broken through, included:

  • Ever-evolving development environments, resulted in times where designers spent more time getting dev. environments working, than designing and shipping; continued technical trouble-shooting & hand-holding unblocked the team & enabled them to vibe-code, sporadically
  • Shifting the skeptic’s mindset – some team members remained relatively disengaged for a significant duration of the transition; working closely through issues 1-2-1, ensured that the only option was progress 😉
  • Addressing the elephant in the room – a mindset of AI = pending lay-offs, was a continual effort. Transparent & candid communication ensured that everybody felt heard, and all opinions were valued
  • Aligning designer & developer workflows took some honing – our initial ‘Quick wins week’ effort, resulted in front-end developers wading through impossibly complex merge requests; but our second attempt uncovered a hybrid workflow that allowed designers to make progress, whilst maintaining manageable merge requests for front end developers to review & approve
Our Quick wins week workflow enabling designers to make progress with manageable merge requests.
Our ‘Quick wins week’ workflow, enabling designers to make progress, whilst ensuring merge requests were manageable for front end developers to review & approve to production
Product design – evolved

Key learnings, and applications of AI, within the product design process

Some of the key learnings of the transformation included:

  • Using AI to build tools, to create the solutions – as opposed to trying to use AI directly, in order to create solutions
  • A steady, low-cadence, designer interaction with an AI-IDE, is critical – in order to efficiently engage with vibe-coding, and avoid the significant barrier, of a frequently breaking development environment, caused by the continual evolution of the production environment; we aimed for designers to ship 1 very small update to production per week
  • AI as a thought-partner – again, thinking of the technology more as an enabler of progress, as opposed to the ultimate solution generator
  • AI, to produce step 1 – removing the sometimes intimidating part of the process, of starting with a blank page; a very effective model became using AI to get from 0 > something, faster
  • Relationships with front-end development is key – throughout the transformation, our front-end partners were a critical enabler; product design in isolation, would have been unable to effectively evolve in line with the new technology
Our shared design leadership repo – containing various AI-related tools and automated workflows
An example of an AI skill, used to increase the operational efficiency of the department – an automated design brief AI agent skill. Generating design briefs & estimations for my team, became a common workflow for myself; removing the burden from designers, and contributing to a reduction in average project discovery time of 56%
A custom Gemini Gem, that I created for improved knowledge recall – addressing one of the biggest challenges that myself & others in the department faced within Cloudflare – the ability to recall facts and info, discussed in various meetings & training sessions. The custom Gem combined with a specific note-taking workflow, and forces Gemini to crawl personal notes, in order to easily recall actions, key info. & outcomes of meetings & working sessions
A vibe-coded prioritisation tool, that I built, to improve the clarity of team ongoing priorities; and continually re-priorities from quarter-to-quarter
A map of the product design process, highlighting all areas, where gains were leveraged through the use of AI
An initial mapping of personal manager workflows – identifying activities with elevated potential for AI gains
← Back to portfolio