As product managers, we communicate in many different ways. There’s power in speech, whether a presentation, TED talk, on Clubhouse, or via podcast.
Then, there’s the written word, whether that’s email, documentation, meeting notes, or this Substack newsletter.
Then, there’s the picture that is worth a thousand words, whether that’s diagrams, sketches, memes, giphys, emojis, or Google search for images.
But if a picture is worth a thousand words, what about a prototype?
Building Prototypes vs Building Thinking
There are two schools of thought:
One school is that there are lots of bad ideas. Most products don’t work because of “stupid ideas”, and if we had spent the time on evaluating ideas in a more systematic manner, we’d stop building things to start.
The other school is that ideas don’t matter, it’s all about execution. Lots of bad ideas work and make a lot of money (e.g., MLM, Quibi, NFTs). And until you can execute, your idea is just words on paper.
During my time teaching at Cornell and UC Berkeley, I noticed the focus in the course on developing better product thinking with frameworks. And that makes sense, as most of my writing here is teaching frameworks.
But frameworks and thinking get you only so far. Once you have a 2x2 matrix or you’ve brainstormed some ideas, how do you communicate the idea in a concrete manner that’s easy to understand? I argue that it’s easier to do this nowadays with prototype software than ever before given the growth in What You See Is What You Get editors and the modern term of no-code tools.
Why prototypes for software products
Creating some type of functioning product forces you to think through a lot of problems that you don’t have to when you’re only dealing with frameworks. What’s the sequence of activities? What’s the experience? How does a user get value from the feature?
And while you might think you have to learn to code or learn to design, it’s easier than ever to copy UI design kits and build a software prototype that communicates an idea. If you’ve never done this before, I recommend three steps:
Obtain a UI design kit.
What’s a UI design kit? “A UI kit, or user interface kit, is a collection of assets that contains a set of design elements such as UI components and styles. Some examples of UI components are input forms, widgets, and navigation menus.” For those who are front-end developers, you might have heard about Bootstrap. For those who have used Figma, you might be familiar with community UI kits.
Getting access to a UI kit will save you considerable time from inventing common UI behaviors like input forms or buttons. You can download free kits in Figma or many other communities. Too lazy to search or ask your designer, try Material UI Kit.
Pick a prototyping software
Those UI design components aren’t going to turn into interactive screens themselves. While you could design screens and simulate the behavior, it’s usually better to pick a dedicated prototyping tool. You might have these already at your company (e.g., Figma, Invision), but an easy one that’s free to try is Proto.io. Besides being free, the other benefit is it comes with a decent number of UI design components out of the box.
Give yourself time, at least an hour.
If you’ve never created a software prototype before, it’s going to feel challenging. You’re learning several things at the same time: the software, a new process of communicating, and how to design interactions.
No matter how proficient you are as a user of software, designing a simple login page or process (if you’ve never done it), always takes surprising more thought. Try it. Try to design a user login screen that handles different rejection reasons.
As you go through the prototyping challenge, remember to both dive deep (e.g., should we offer tooltips for the password length) and periodically, think about the end picture. Remind yourself of the primary experience or even draw a simple flow diagram to keep yourself focused.
After an hour or so, when you have a basic experience, show instead of tell. Use the prototype you’ve created to communicate your idea. Remember, prototyping here is not to build the perfect solution, but quickly communicate an idea without talking, words, or just pictures so that people can experience the idea.
Additional Reading
Have a recommendation for a prototyping tool that isn’t Invision, Figma, or Proto.io? Drop a comment below and share why you use it.