Learning Product Design as a Beginner (52 Free Resources)

I pivoted from transportation engineering to product/UX design after becoming captivated by the intersection between technology, problem solving, and design. As a byproduct of sharing parts of this transition online, I’ve received a few emails seeking advice on making a similar a pivot which prompted me to put together this resource.

I am going to split product design into 3 categories and offer only the free online resources I personally used within each:

1. Product Thinking 🔎
2. Interaction Design 📍
3. Visual Design 🎨

Education is best done in action so I would recommend pairing these resources with the case studies you are currently building for your portfolio.

1. Product Thinking 🔎

Art created using Pablo Stanley’s new Figma Plugin Blush

Product thinking is the foundation of your skillset and will help you mitigate the four major risks that any product faces:

1. Usability (will the product be useful to its users?)
2. Desirability (if this product disappeared would your users be devastated?)
3. Feasibility (will your team be able to build it?)
4. Viability (is it smart for the business for us to build it?).

In practice, product thinking asks the questions:

• What is the problem you are trying to solve?
• How do you know it’s a problem?
• Who is it a problem for?
• How does it relate to business goals?
• How will you measure success?

Framing The Problem

• Why Product Thinking is the next big thing in UX Design
  “Product Thinking enables UX designers to ask the right questions, to build the right features and to communicate with stakeholders more efficiently.” Not only does this article articulate the value in product thinking, but summarizes the steps involved incredibly well. Bonus points for using one of my favourite product stories: the McDonald’s milkshake.
• Generative Research: Everything You Need to Know to Run a Successful Study
  Start here and your discovery plan will be set up for success. A thorough guide to performing research that will yield valuable insights. This resource will hold your hand through setting research objectives, preparing for a user research session, getting the most out of a session, and translating your findings.
• 5 Ways to Reframe a Solution to a Problem Statement
  New designers may find themselves eager to jump to a solution and begin designing before the problem has been truly explored. This resource will help reframe the solution into a problem, challenging any assumptions to build a user-centric solution.
• Design Better Podcast: Why Product Management is Misunderstood with Marty Cagan
  Product design is a different beast than product management, but both need to understand one another and work together to ship a successful product. Marty’s talk gave me valuable perspective on what a strong design team looks and feels like. Note Invision’s Design podcast is a great design resource in and of itself.

User Research

• Eliciting User Goals — Part 1
  Eliciting user goals allows you to push past what people think they want and discover what people need. This shift is crucial to ensure your product is desirable (Marty Cagan states in the above podcast a product rarely fails due to usability, but rather desirability). This article offers executable questions for a successful user interviews with two frameworks: story elicitation and “Jobs to be done”.
• UX Research Implementation Sheet
  A very helpful spreadsheet in understanding the various UX research methodologies. Not all methodologies listed apply to user research, however it does provide context for research throughout your case study. (I apologize I cannot find who the sheet belongs to, if it is you please let me know!)
• Starter Questions for User Research
  Sarah Doody is UX researcher who shares much of her work online. Her quick guide gives you a starting point with helpful sample questions to perform a user interview.
• Asking the Right Questions During User Research, Interviews and Testing
  Another fantastic guide to frame the conversation for user interviews. If you’re nervous about your first user interview this resource does a great job at putting you at ease.
• The 7 Deadly Sins of User Research
  Seven pitfalls of user research are cleverly described (credulity, dogmatism, bias, obscurantism, laziness, vagueness, and hubris) with tools to overcome them. I am of the personal belief that good product designers are even better detectives and pushing past what is immediately apparent will unravel valuable insight.
• Harvard Program on Survey Research
  If you do decide to undertake a survey as a research tool, Harvard offers a practical no non-sense guide to making the most of this pursuit.
• UX Research Cheat Sheet
  It’s important to note that UX research does not just occur at the beginning of a project. This article by the Nielsen Norman Group who are global leaders in user experience, highlights the methods available to you at any stage of your process.

Competitor Analysis

• What’s a Competitive Analysis & How Do You Conduct One?
  A competitive analysis will tell you what solutions are currently offered to solve your problem for its users, or a similar problem. This resource offers questions so specific if followed it will be impossible to not gain valuable insight into your competitors.
• A Designer’s Guide to Competitor Research
  “Remember that ‘common’ won’t always mean good, but you need to have some sense of what the conventional solutions are, since this has an impact on user expectations.” A great overview of the many ways to uncover user problems with practical guidance for performing competitor research.
• How to Conduct Heuristic Evaluation
  Heuristic evaluations are an incredible tool to evaluate a current product’s user interface if you are completing a redesign, or performing a heuristic evaluation on a competitor product. The 10 principles by Jakob Nielsen are explained with practical examples and a template to boot.

Synthesizing Information

• Using Affinity Mapping to Organize and Synthesize Initial Research
  Affinity mapping is a technique used to group common findings to inform insights, used ubiquitously, it’s certainly a must know in design.
• What is Empathy Mapping?
  While empathy may come easier to some than others, like any skill it can be honed. Leaning into an empathetic perspective will help understand the needs of your users on a deeper level. This article highlights the thinks/feels/says/does framework to do so.
• Jobs To Be Done Personas
  Personas are commonly used to develop empathy for your users and help mold your product into something users both desire and will use. Nicki uses affinity mapping and the “JBTD” framework to inform personas and her framework will undoubtably improve your empathy for your users.
• Stop Obsessing Over User Personas
  A mistake I made when first learning to develop user personas was including unnecessary information. This article tells you exactly what you really need to focus on: research findings, representing user goals and pain points, and forming insights that are context-specific and task-oriented.

2. Interaction Design 📍

Art created using Pablo Stanley’s new Figma Plugin Blush

Interaction design is all about how people move through things. The thinking goes something like… “Hey, here is the problem we’re going to solve…how are we going to get the user there?”. These flows should be easy and useful and will ultimately take a user from their problem to your solution.

User Journeys

• A Beginner’s Guide To User Journey Mapping
  This article breaks user journeys into 8 steps, allowing you to identify the touch points where users interact with your solution. What are they trying to accomplish? Where are they located? How are they feeling? What actions are they taking? What are their pain points?
• The 6 Research Process Pillars of a More Dynamic Customer Journey Map
  A more detailed guide to the fundamentals of a customer journey map, this resource provides a comprehensive guide to not the “what” of your users but the “why”.

Framing the Solution

• Agile Business MoSCoW Prioritization
  Not all ideas will make it into your final design and the MoSCoW principle (must have, should have, could have, won’t have this time), helps you prioritize the possible features you uncovered through your user journey mapping.
• Boost Your UX with These Successful Interaction Design Principles
  “Nobody likes being beaten over the head by cries of “follow the rules,” but truly excellent interaction design relies on a set of standards, best practices, conventions, and rules of thumb (heuristics).” This article deserves well over its 200 claps for doing the heavy lifting of summarizing a plethora of essential interaction design principles.
• An Interaction Design Framework to Cover All Your Bases
  Happy paths and edge cases are important to keep in mind when considering the flow you are taking your users through, and will help you build a superior user experience by covering all bases.
• The Difference Between Information Architecture (IA) and Navigation
  What is the difference between a site map and information architecture? This article highlights their relationship and why both are necessary to “look under the hood” before designing a site or app. IA organizes information across a digital product, whereas a site map and navigation will be comprised of parent pages and child pages.
• A Beginner’s Guide To Information Architecture
  Career Foundry’s video provides a practical guide to IA’s and site mapping beginning at 5:23 and will be particularly helpful to those of you who are visual learners. They also bring up card sorting here which is a great technique to help develop site architecture with your end user.
• Story Mapping, Visual Way of Building Product Backlog
  This resource was recommended to me by my mentor when I struggled to put together the pieces of a product I was building. The features defined using story mapping will help you move onto visual design with a greater understanding of the bird’s eye view of the product.

Usability Testing

• Usability Testing: How to Do-It-Yourself with Steve Krug
  Assuming you have a basic mid-fidelity prototype, you can rapidly test your product. Usability testing is invaluable in understanding how a user will interact with your product. While Steve Krug’s book Don’t Make Me Think is certainly a must read, his talk in New Zealand provides a great framework for understanding basic user testing.
• Steve Krug Downloads
  The above talk with Steve Krug pointed me in the direction of these resources for usability test sessions. I am particularly fond of the “Things a therapist would say” resource.
• Rapid usability testing for designers
  A great overview of a variety of usability testing you can perform. The Microsoft Desirability Toolkit is a particularly interesting approach. The author certainly got bonus points from my engineering brain when they mentioned p-values, confidence levels, and measuring success.

3. Visual Design 🎨

Art created using Pablo Stanley’s new Figma Plugin Blush

By now you’ve done the heavy lifting: you’ve built your foundation of taking your users through the flow from problem state to success state. Now it’s time to design a kick ass digital product. Visual design begins with wireframes and mockups, is made better through the crucial phase of testing and iteration, and ultimately ends up a high-fidelity design taking into account colours, hierarchy, typography, contrast, and micro interactions.

Interface Design

• 7 Simple & Effective Methods to Get Better at Visual/UI Design
  I love David’s 7 easy steps for improving UI, it really doesn’t get more complicated than his explanation and 9K+ claps would say a few others agree. “Do good work and share it with people”.
• How to Learn UI Design: What my first two years as a Digital Product Designer taught me
  This overview tells you the backbone of what you need to know: start on paper, reverse engineer good design, understand trade-offs, think in patterns/systems, and keep the foundation you built through product thinking and interaction design in mind.
• Responsive Grids and How to Actually Use Them
  Christie’s easy guide to responsive grids will help utilize them in your designs. Grids will improve your designs because you will understand how they will translate responsively when developed by engineers.
• The 8-Point Grid
  Before I knew about the 8-pt-grid I wasted a lot of time setting up my own spacing guides to follow. Major time saver.
• How to Use Typography in UI Design
  Typography is a visual design component that can’t be ignored and this article highlights the various characteristics of typography and how they may impact a user.
• 7 Rules for Creating Gorgeous UI
  Erik’s UI advice comes purely from application and as he puts it: “being bad and then deliberately practicing”. He gives solid examples to easily improve your UI designs and embraces that we all start out as bad UI designers, which is nothing to be embarrassed about.
• Material Design & Human Interface Guidelines
  Are you using interface controls that your user will be familiar with? Google and Apple’s interface guidelines will help you understand how your users will interact with your interface on both an iPhone and Android and allow you to follow best practices.
• Differences between Designing Native iOS Apps and Native Android Apps
  This article will help you conceptualize the differences between native iOS interfaces and android interfaces highlighted in the guidelines above, but with practical examples.
• Figma’s Live Streams
  Figma offers live streams on Youtube periodically and I learn no less than 15 new things every time I tune in. There is nothing quite like watching a designer use a design tool to up your skills quickly.
• Steve Shroeger’s Youtube Channel
  Speaking of watching a designer work, Steve has a great youtube channel where he refactors UI live. Watching Steve work will improve the simplicity of your interface designs and I happen to be a huge fan of the book he wrote with Adam Wathan (this is not a free resource but worth mentioning for its quality and value).
• Land-book & Awwwards
  Learning from other designers is crucial to improving your work and Land-book (landing pages) and Awwwards are two of my favourite resources for getting visual inspiration. Awwwards is great because of its filter feature that will allow you to quickly locate a type of site (ex: ecommerce), whereas landbook only showcases landing pages. Both are excellent, but a bonus tip is to inspect your favourite sites using your browser’s inspection tool and go poking around to understand what layouts, colours, and typefaces they are using.

Accessibility

• High Resolution Podcast: Pinterest Head of Design, August De Los Reyes, on ending disability through better design
  This podcast was truly one of the most eye-opening learning experiences I have had in the last 5 months and is a must listen. I will forever think about accessibility, disability, and universal design differently after hearing August’s perspective.
  Spoiler: You’ll learn that Pellegrino Turri, an italian inventor, invented one of the first typewriters in the 19th century after falling in love with a blind woman who was unable to respond to his letters, which ended up in us all using a keyboard today. (ps — High Resolution is another great design podcast).
• Microsoft’s Universal Design Toolkit
  Microsoft’s Universal Design Toolkit provides a framework for bringing universal design into the conversation of your product development to ensure it is baked into your product and is worth reading through.
• Designing for Accessibility is Not That Hard
  These easy to execute guidelines combat the narrative that universal design and designing with accessibility in mind is expensive or difficult.
• A Guide to Color Accessibility in Product Design
  This article gives you excellent insight into Web Content Accessibility Guidelines which as the article describes, can be a bit daunting. Colour is an easy component within your UI to get right following their guide.
• 7 Things Every Designer Needs to Know about Accessibility
  A highlight of the must knows for accessibility: your product will not be boring or ugly if you follow accessibility guidelines, don’t use colour to solely communicate information, ensure suitable contrast, and consider how screen readers and keyboards change how a user will interact with your interface.

Tools

• Figma
  A free design tool (desktop and web app) that is considered the industry standard for designing. Invision and Sketch are also used, but Figma offers the functions of both for free and exceptional collaboration as well as rapid prototyping.
• Wireframing Plugin for Figma
  Wireframing plugins help speed you up as the designer which will allow you to gain valuable feedback from your developers and users sooner.
• Google Fonts
  Google fonts is a solid option (and free) for designing with a variety of fonts if you are without an Adobe Creative cloud subscription.
• Typescale
  Typescale quickly allows you to develop a pleasing hierarchy of text for your various headings and sub-headings.
• Unsplash
  Free and usable images for your designs that also come with an easy plugin for quick Figma use.
• Miro
  Miro is a free (for a solo user) sticky note tool that is great for visualizing affinity mapping.
• Facebook Design’s Resources
  I wish I had found this resource sooner. It is fantastic for designing final mockups of your designs using their iOS UIs and mockup devices.

Learning product design can feel like drinking from a fire hydrant. There is no shortage of skills, tools, and best practices to learn and improve upon and the landscape is ever-changing. There are many tools and resources this article didn’t touch on (seeking mentorship, joining online and local design communities, etc.), perhaps that will be for another day. Try not to feel overwhelmed and stay focused on the task directly in front of you, find a resource that helps with that, and just keep going.