An Unexpected Design Tool Kit

You’ll never guess what’s in mine…

Claire Ha
Claire Ha
Sep 1, 2020 · 5 min read

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

  1. Google Chrome, specifically Devtools
  2. Microsoft Paint or PowerPoint

Other Design Tools That I Use:

  1. Balsamiq for lo-fi visuals and wireframing
  2. 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.

Image Source: Reddit

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
Image Source: Claire Ha

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.

Take a screenshot and copy/paste 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.

Use the Dev Tools element selector to manipulate your web browser
Then, take a screenshot and copy/paste into 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. 🚀

- Claire & Harley

Product In Progress

I am my own work-in-progress product and this is just another product manager’s growth journey.

Claire Ha

Written by

Claire Ha

Product Manager @ Anvyl (formerly Walmart / Passionate about personal and professional growth.

Product In Progress

I am my own work-in-progress product and this is just another product manager’s growth journey.

Claire Ha

Written by

Claire Ha

Product Manager @ Anvyl (formerly Walmart / Passionate about personal and professional growth.

Product In Progress

I am my own work-in-progress product and this is just another product manager’s growth journey.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store