In Jack of All Trades, Master of One, I discussed the importance of being T-shaped — that is, an individual who has breadth of knowledge in a variety of disciplines, but depth in one. As a T-shaped product manager, you should have just enough competence in other domains to steer your team through the product development lifecycle.
But there are other situations where having a multi-disciplinary skill set is useful. In the same article, I briefly discussed how I used a hodgepodge set of tools to create mid-fi designs in the absence of design resources on our team. Today, I will show you what’s in my tool box and share design tips for non-designers.
Before I go any further, it’s important to note that as a product manager, creating and sharing mid- or hi-fi visuals should be your last resort, especially if you already have designers. And personally for me, I’d like to outgrow doing tactical work like this in favor of strategic work with more impact; but, I contend that it’s still a valuable skill.
Now with that out of the way… let’s take a peek into my tool kit!
My Non-Designer Design Tools
- Google Chrome, specifically Devtools
- Microsoft Paint or PowerPoint
Other Design Tools That I Use:
- Balsamiq for lo-fi visuals and wireframing
- And from time to time, Figma
To teach you how powerful these tools are, let’s take a look at Reddit’s “Saved” feature.
This is how Reddit’s “Saved” feature looks today ↓
There’s zero functionality to organize, filter or sort through your saved posts. For Reddit users, it’s a painful experience akin to wading through a dumping ground. Imagine having to infinitely scroll down this list to find a post that you saved years ago.
This is my design ↓
Before the big reveal, keep in mind that this is not a product or design case study 😅 and its only purpose is to give you a little taste of the magic you can create with unsuspecting tools like Google Chrome and MS Paint.
I’ll skip the why (again, it’s not a product case study!) and go straight to the what:
- Quick filters to filter saved posts by tag
- Link to enter “edit mode” and manage tags in bulk
- Each post now has its tags listed next to the Unsave button
Do you notice how the fonts, icons, and colors are all consistent with Reddit’s existing UI?
Now teach me how!
For Mac users, you can use Microsoft PowerPoint instead of MS Paint — instructions will slightly vary, but you’ll figure it out.😉
🧱 Step 1— Start with your base
Use Google Chrome to navigate to Reddit’s “Saved” feature. Take a screenshot and copy/paste it into MS Paint.
🏈 Step 2— Create your game plan
Google Chrome’s DevTools lets you temporarily manipulate a user interface in the browser. It’s great for devs to debug, but as a PM, we can use it to make changes, screenshot and Frankenstein into MS Paint.
Consider where there are similar components on Reddit (buttons, dropdowns, text, links) that you can manipulate to your liking and achieve your vision.
🔧 Step 3— Cue up DevTools
In your browser, right-click and select “Inspect” (ctrl+shift+i for Windows)
🧟♂️ Step 4 — Frankenstein
In DevTools, click on the element selector icon at the top left.
Then, in your browser, select the element on Reddit’s “Saved” page that you would like to manipulate — preferably text, unless are familiar with HTML/CSS.
DevTools will automatically highlight the corresponding code for the element and you can double click to make edits, like changing the text in a button.
Take a screenshot of the newly manipulated element and copy/paste it where you want in MS Paint.
💄Step 5 — Touch Up (or don’t)
Make some minor touch ups and then you’re done! Or don’t, it’s not a hi-fi design after all.
Closing Thoughts & Reminders
- This is a last resort! → Some, including myself, would argue that this is low-value work for a PM. More often than not, you can use pen & paper, a whiteboard or Balsamiq to express something visually, so only use this when absolutely necessary.
- But you never know when it may come in handy! → So, continue to grow as a T-shaped individual and add this skill to your utility belt.
- You are not the design expert! → The few months that our team had no product designers was a very humbling experience. While I was able to create designs that looked good on the surface, they ultimately were not intuitive for users and required a number of UX changes after the initial MVP. Designing products is much more than making something pretty — so, leverage your designers if you have them AND respect their skills!
Thank you for taking the time to read and for being a part of my product manager growth journey.
Have some thoughts, comments, opinions? Let me know what’s on your mind — after all, “feedback is the breakfast of champions”.
Check out my LinkTree to see what else I’ve been up to. 🚀
