Why Product Managers need to embrace the tech

After 16 years as a Product Manager, I share my thoughts on why technical knowledge is highly beneficial for product managers.

Background

I’ve been a Product Manager for 16 years. I don’t mean I’ve worked in product management for 16 years, I mean I’ve literally had the individual contributor (IC) role of Product Manager (PM) for 16 years.

Does this mean I lack the skills required to become a Director-, VP-, or Chief-of-Product? No idea, it’s never occurred to me to apply for any of those roles. Is it just a lack of ambition then? The answer to that depends on how you define ambition. If you limit your definition of professional ambition to mean “taking on more responsibility”—which is business speak for “managing people”—then yes, I have no ambition. But, if your definition of ambition includes “trying to be as good as you can in your current role”, then I would consider myself to be very ambitious (surprise! I subscribe to the latter definition).

If this all sounds like me trying to justify why I’ve had the same role for the last 16 years, then I’ve done an effective job of writing my introduction, because that’s exactly what I was aiming for.

The upshot of this is that I’ve gained some experience developed strong “opinions” on what it takes to be a good IC PM. But before I dive into what I’ve learned over the last 16 years, here’s my definition of Product Management (it can mean different things in different organisations or industries).

A PM listens to customers, understands their problems, and then uses his/her knowledge of the technology available to define and build* solutions.

*in many organisations, the PM role ends with the definition, which is a shame, the building part is one of the most rewarding aspects of being a PM—it also helps that I’ve never met a software engineer I didn’t want to go to the pub with.

While understanding customers is crucial, that ground has been thoroughly explored in PM resources. Instead, I want to focus on an equally vital but oft-overlooked aspect of product management: technical knowledge.

But that’s what engineers are for, right?

I like to compare being a PM to being an architect (of buildings, not software). Imagine you’re an architect who designs homes. You meet with the client, and you try and understand their unique situation e.g. Are they young or old? Do they enjoy entertaining or are they hermits? Do they have cats or dogs? Do they have (or plan to have) a large family? Do they enjoy gardening? Do they work from home? Do they own multiple cars? What’s their budget? When do they want to move in?

These are important questions that need to be answered before an architect can begin the design process. The home has to be designed to meet the client’s needs, but it should also be designed so that it takes advantage of the latest building materials, can be constructed economically, and that once built, is easy to maintain. To do this the architect needs to be aware of trends and advances in engineering, in building materials, in building standards etc.

Just as an architect needs to understand construction materials and engineering principles, a PM needs knowledge of the technical tools and platforms available. Without this knowledge, we risk designing solutions that are impractical, inefficient, expensive, or even impossible to build.

In other words, a PM must deeply understand not just the problem space (#obvs), but also the solution space to be truly effective.

What follows is a description of the types of technologies I try to keep up with, and the methods I use to ensure that I stay updated efficiently. I’ve also thrown in a few examples of how keeping abreast of these technologies has benefited me, my products, and my users. One big caveat, I’m a PM for a data analytics company with a big focus on UI products that run in the browser. If you’re a PM for a company that makes Halloween costumes for horses, I’m sorry, this is not the blog post for you.

The tech & resources

HTML, CSS, and JavaScript

Your tech stack might use AWS, Azure, or Google Cloud. Your developers might be coding in C# on .Net or JavaScript on Node.js. But at the end of the day, when your users interact with your product in the browser, that browser is using HTML, CSS and JavaScript to display your content.

Each of these 3 technologies is being constantly developed and updated, but it’s CSS that has probably been through the most rapid changes over the last few years. Many of the recent additions to the CSS spec can be implemented into your products to improve the experience for your users, but also to simplify the build effort i.e.  reduce the time required by your developers.

Resources

Browsers

Your product is going to be displayed to your users via a browser, and most likely one of the big 4 i.e. Chrome, Safari, Edge, and Firefox.

You should keep up-to-date on the latest features of each, understand what they have in common, and what differentiates them. For example, across the 4 browsers I've listed, there’s actually only 3 rendering engines used (the rendering engine interprets the HTML, CSS, and JavaScript to display web pages). Chrome and Edge are both based on Chromium, which uses the Blink engine. Safari uses WebKit, and Firefox uses Gecko. But, on mobile Apple devices, whatever browser you install (Chrome, Firefox etc.) you’re actually just installing Safari wrapped in some Chrome/Firefox UI.

Resources

Browser Dev Tools

The Dev Tools is a whole suite of developer focused tools running in your browser that can be accessed by hitting the F12 key on Windows (Cmd + Option + I on a Mac). These are incredibly powerful, and not just for developers. You can use them when doing some QA, to take full-page screenshots, and even to edit live web pages (very useful when you want to try out some changes you're considering to the content or UI).

Much like the browsers themselves, the Dev Tools are also updated frequently with new features, and it’s worthwhile knowing what new capabilities are available.

Resources

Windows, Mac, iOS, and Android

So, all our apps are rendered using HTML, CSS, and JavaScript, and then displayed via Chrome, Safari, Edge, and Firefox. But, those browsers are most likely going to be running on Windows, Mac, iOS, or Android. And the browsers are quite well integrated into the OS, so an app running in Chrome on Windows won’t necessarily render your product the same as Chrome running on a Mac. For example, subtle differences in font rendering, device-specific features, or OS-level optimizations can lead to variations in how a web app is displayed.

Resources

Microsoft 365

If the product you manage has an export capability, then it's likely that the exported data is going to end up in MS Office. If it's unstructured data then it's likely to be imported into Word or PowerPoint, if it's structured data then it's probably going to be end up in Excel.

By keeping up-to-date with the features of these products you can ensure that your products' exports are compatible with the products included in M365 (including Copilot). You can even advise your users on how best to derive maximum value from the data you provide them when using MS Office apps.

Resources

Examples

Ok, so what has all this technology monitoring done for me as a Product Manager? Or more importantly, how has it benefited my users? Good question, and what better way to answer than with examples?

View Transitions

View Transitions are a recent addition to CSS that allow a page element (title, paragraph, image etc.) to animate between an initial and final state. This can be within a single page or across pages. A typical example would be from a thumbnail of a video, which when clicked would transition/animate to the full size playback version of the video.

I use View Transitions on this site to transition from the article titles on the homepage, to the article titles on the article pages, this is shown in the animation below (25% of normal speed).

Animated screenshot of a list of blog titles on a blog homepage. When a title is clicked, the title transitions (or fades) into the same title but on the top of the blog article page.

The Web Share API

I recently discovered the Web Share API (via this blog post), a powerful tool that bridges JavaScript, browsers, and operating systems. Not only will it provide my users with an enhanced sharing experience, but it will also significantly reduce our research, development, and maintenance effort.

Rather than having to research the most common sharing destinations e.g. Facebook, X, LinkedIn, WeChat etc., used by my clients, and then define, build, and maintain those options—and probably sacrifice the less popular ones. The Web Share API simply invokes the Operating Systems’ native sharing menu (yes, apparently this is a thing that exists!).

The result is that the user will see only the options for the apps they have installed. This even includes the people the user most frequently/recently shares content with.

The screenshot below is taken from invoking the share option on this website, and it’s an example of what a Windows user (in this case, me) would see.

A screenshot of a modal dialog showing icons for a variety of email clients and social networks

There is one caveat however, the Web Share API is not supported on Firefox (what’s even more unfortunate is that “it’s not supported on Firefox” is something I find myself uttering far too frequently).

Progressive Web Apps

Much like the Web Share API, Progressive Web Apps (PWAs) require very little effort to implement, but can greatly improve the users’ experience.

With very little development effort, you can allow your users to “install” your web application on their OS (desktop or mobile). Your app will get a dedicated launch icon, a splash screen, and no browser chrome. On mobile your app will fill the screen, just like a native application.

Once installed, as far as the user is concerned your app will look and behave like a native Windows, Mac, iOS, or Android application—PWAs even support offline capabilities and push notifications.

The screenshot below is of this blog, which has been implemented as a PWA.

A mockup of 2 mobile phones, each of which are showing a page from the onlyRSS blog. The blog page contents take up the whole screen of the phone.

There is one caveat however, Firefox dropped their support for PWAs in 2021. A decision that has angered and perplexed developers and users alike. The good news is that PWAs are a progressive enhancement. If the user’s browser supports PWAs, then that’s great, if it doesn’t, then there’s no downside. Your app will continue to run in the browser as usual.

Python & Copilot in Excel

I’ve been waiting for this update to Excel for months (I subscribe to the MS Office roadmap updates via RSS), and only recently (Jan 2025) got access. MacOS users will have to wait until March.

The combination of Python and M365 Copilot in Excel means that Excel users can now use natural language to analyse and visualise data in Excel with the full power of Python—no knowledge of coding in Python required.

As an example, the jitter chart shown below (which is a replication of one available from within one of my products) can be created with Python in Excel with just a few prompts.

I’ve mentioned this game-changing Excel update to a few colleagues (all of whom use Excel), and none were aware of its existence.

A screenshot of a data visualisation, specifically a jitter chart that shows the age distribution of aircraft grouped by aircraft type.

Dev Tools

Here’s the description of the Chrome Dev Tools (other browsers have their own version of dev tools) taken directly from the Dev Tools website.

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools lets you edit pages on-the-fly and diagnose problems quickly, which helps you build better websites, faster.

I’ve highlighted one specific section of the description, because for Product Managers I think it’s really useful. It’s really easy to use the Dev Tools to edit the text on a webpage, and if you know some HTML & CSS, you can even make more fundamental changes to the page. This can be useful if you want to add a ticket to your backlog asking for small changes. Rather than trying to describe what you want (which could be misinterpreted) simply make the change to the live page and capture a screenshot—there’s even a screenshot tool built into Dev Tools (it even lets you capture a full page screenshot, including any of the page currently below the bottom of the viewport.)

An animation showing the dev tools being used to manually change the text of a live BBC article title. The user is swapping the word “Trump” with the word “moron”. Clearly the author of this blog post believes (correctly so) that Trump is a moron.

CSS one-liners

Last but definitely not least

I cannot write an article on the benefits of keeping up-to-date with tech without mentioning the Daily Tech News Show podcast. This podcast covers the most important tech news of the day.

The host, Tom Merritt, is a great presenter, and the show is always highly informative. I’ve been listening to DTNS (and its earlier iteration, Tech News Today) for almost 15 years, and if I ever sound like I know what I'm talking about when I'm talking about tech, it's because of Tom Merritt.

Conclusion

I hope I’ve convinced you that as a Product Manager, keeping up-to-date with the latest technologies can greatly benefit you, your products, and your users. I’ve also tried to show that it’s not as difficult as you might think. The resources I’ve listed are all free, and many are available in audio format (so you can listen while you workout), or via RSS feeds (so you'll never need to go looking for new content, and can always skip articles/posts that are not of interest).

The above tech topics and associated resources are not meant to be exhaustive, they are just some of the ones that I find useful. I think the key point is that you should be aware of the technologies that are most relevant to your products and your users, and then find the resources that will help you keep up-to-date with those technologies.