Startup PM Week 37: UI/UX Design as a Product Manager

If you read my first post that prompted this series, ‘Startup PM Weeks 1–36: Key Takeaways’, you’ll know that I was recently questioning whether I was spending too much time on Product Design. The answer is,“Yes, yes I am” but I’m here to tell you that it’s normal for a Startup PM and give you tips on how to cut that time down.

Photo by amayli on Unsplash

I am partly spending too much time on design because, as a Startup Product Manager, you often have little resources and have to take on additional roles if you want things done right. However, I was also spending too much time on design because I didn’t understand how to properly use design tools, such as Figma. First we’ll discuss the prerequisite tasks you should complete before creating your wireframes, why it’s worth it to use these design tools instead of just sketching your mockups, and how to make it easier with Figma plugins!

But first, let’s clarify a few terms: Wireframes, Mockups and Prototypes.

• Wireframes: Designs (usually monochrome) that focus on visualizing what a product or feature will do.
• Mockups: Static designs that focus on how a product is used and what it will looks like.
• Prototypes: High-fidelity designs that simulate how a user will interact with the product (usually clickable).

Now that you know the difference, you should see what your current development team is capable of. At my company, we can request design help from a team of designers. I’ve found that if I create mockups, the design team will implement them exactly as they are; but if I create only a wireframe, the implementation is often lackluster and boring. So I do something in-between a wireframe and a mockup while leaving lots of design notes next to each screen. Note: As a Startup PM you likely have multiple products to manage so should strive to obtain help on anything beyond wireframes and focus your efforts on using design to describe what your product will do and how your users will interact with it (without needed to go through a high-fidelity clickable prototype).

Where do I start?

Prior to visualizing what a product will do, you will want to make sure you have an understanding of who will use your product and what you product will accomplish. I’ll give a quick overview, but please comment if you want me to expand on any of these topics in another post!

1. User Research: Review any target audience or user data you can get your hands on; surveys, articles written about your audience segment, feedback from user testing, user complaints, reported bugs (whether from this product or another one).
2. Requirements Gathering and Prioritization: Once you understand your users, reach out to your product stakeholders and revisit your long-term product vision to document high-level product requirements.
3. Competitive Analysis: Look at what other companies who are accomplishing similar objectives have done. This can help you to refine what features you need to include, what features you want to include and what it out of scope. You can also look at their product reviews to assist with your user research and feature prioritization.
4. Design Inspiration: Once you have an idea of what type of features the product will include it can help to see how those individual features have been executed elsewhere. I often look up feature names such as “user payment” or “user portal” in Dribbble, codepen.io or even Pinterest.

Design Tools: Are they worth it?

You may have seen a lot of Product Managers sketch wireframes of their product to upload and share with their teams. I will admit that this is seemingly an attractive options because it is just so much easier to get out a piece of paper and draw, instead of learning how to master a design tool like Figma (which is what I use). Yet, I’ve found the following incentives for using design tools:

• Design Consistency: As a Startup PM you will likely own multiple product and features. Design consistency across your product is important for usability and using an online tool where you can copy and paste features or concepts from one product to another, will help you create consistency throughout your product and save time from re-sketching the same feature over and over again.
• Traceability: Use your designs as part of the requirements gathering process! Some stakeholders will have a hard-time visualizing your product concept and this will give them a place to start. Additionally, you can take notes at each requirement gathering session and copy over your design to a new page before you start iterating. This will help you keep track of what decision were made, by who and why.
• Real-Time Collaboration: Not only can you easily share your screen with product stakeholders and cross-functional teams, but you can invite them to view or edit your designs with you in real-time. This helps with trying out different design concepts and being able to receive immediate feedback. Along with the ‘undo’ button that makes it easy to scrap bad ideas without needing to rebuild the whole screen.
• Plugins: Plugins not only save you time on sketching commonly used features, they can also help give you ideas on how to design common features when you are stuck. For me, Plugins were the biggest game changer, after I spent months thinking I had to design everything from scratch.

So, yes, design tools are worth it, but only if you are using them correctly as a Product Manager (see Figma Plugins below). Don’t make the same mistake as me and watch UI/UX designers use Figma on YouTube and try to replicate their process. Though, if you want to get inspired (or just procrastinate because being a Startup PM is hard), chunbuns’ youtube videos will inspire you to have an organized design process.

Figma Plugins

Feather Icons: Easily import commonly used icons in website and software applications.

Wireframe: Hundreds of low-fidelity wireframes that serve as templates to jumpstart any product or feature design.

Mockflow: A mix of wireframe and feather icons, this is really a fully equipped design plugin, which is why it is not free! You can only freely import one drawing, so I just add multiple designs to “one drawing” and export them into my Figma. I then crop out the designs I don’t need for my current project. Some people use Mockflow instead of Figma, something I haven’t had time to consider. If you have any experience with the two, let me know your thoughts in the comments!

Bonus:

Blush: Provides illustrations from almost any category you can think of (shopping, currencies, avatars, etc.) Not always needed for wireframes, but it can help if you are struggling to provide your developers with images and icons for your product.

Mockuuups Studio: This allows your to pick a screen type and imbed your screen design into real photos of different devices, i.e. a computer on a desk, a hand holding a iPhone. This is a bit beyond the scope of design for product development, but it can help if you are asked to collaborate on a marketing or sales task.

Thanks for reading! Be sure to look out for my next post: ‘Startup PM Week 38: Product Ideation through Design’