Setup Design Environment

Overview

Now we’re ready to design the product by creating wireframes. Wireframes are low fidelity designs that are used to communicate how users will experience the product. In a fully staffed development team, wireframes are created by a UX designer with guidance from the product manager. However, product managers will often create wireframes themselves when they don’t have designers available.

Wireframes are extremely useful to the product development process. First, they help you clarify your own ideas. Something that you thought would be easy might actually be quite difficult to design. You might realize the value is not there and change your initial idea. It’s very normal for this process between wireframing and PRD creation to be iterative.

Second, they help align everyone on the product concept. Seeing how a user will go through an application is much easier than reading a description and then trying to imagine what will happen. In an organization, product managers will often have to bring many stakeholders onboard to the same vision. Having wireframes make communication much easier and clearer.

Finally, they are particularly useful for development. Often, a product manager will provide the development team with both wireframes and a PRD to explain exactly what needs to be built. Developers can see what should happen and read any specifics, therefore reducing the likelihood of possible errors or misunderstandings.

Setup

Get Figma

We will be using Figma to design our wireframes. Figma is a popular design tool that runs in the browser. If your experience speed issues or prefer a desktop experience, you can download their desktop application.

• Go to Figma
• Create an account

Get the Torch Design Kit

• Create a copy of the Torch Design Kit in your Figma account. It contains styles and components that we will use to create our wireframes.
• Open the Torch Design Kit while logged into Figma
• Create a copy of the kit in your own account