top of page
    • Mar 14
    • 2 min read

Conceptualizing the Solution: The Product Manager Way


To develop an outstanding product, the initial step involves conceptualization.

Wireframing stands out as a pivotal skill in this process.



Prototype image of food ordering application
Source: Created by AI


Wireframe


Wireframes act as visual blueprints for websites or applications, wireframes provide a skeletal framework outlining the rough arrangement of content. It serves as the foundational step towards materializing your idea, albeit with low fidelity initially.


With the accumulation of feedback, more details and fidelity are incorporated into the wireframes.


In smaller teams, individuals often take on the responsibility of wireframing themselves. Conversely, in larger companies, while specific roles may be dedicated to wireframing, familiarity with wireframing tools and techniques remains essential for effective collaboration among product managers.


Additionally, these skills are beneficial for sketching out proposals and communicating feature ideas more efficiently.


The flow works as:


Ideas > Low-fidelity Wireframes (This stage is for Product Managers) > User Research > Feedback > High-Fidelity Wireframes

Further diving deep into concept development;

Wireframes > Mockups > Prototypes



A sample showing wireframe, Prototype and Mockup


Conceptualization Stages


Stage1: Wireframes

  • This is developed first

  • The general structure and the layout are drawn

  • Low fidelity


A few examples of tools used:

POP, Hotgloo, Omnigraffle, Axure, Balsamiq


Stage 2: Mockups

  • Static displays of what the final product looks like

  • Consists of more details and colors

  • Developed by the designers

A few examples of tools used:

Photoshop, Sketch, Illustrator, Axure, UXPin


Stage 3: Prototypes

  • Usability is handled here

  • Basic interactions are designed with high fidelity in them

  • Potential problems in the user flow can be seen


A few examples of tools used:

Keynote, POP, Axure, Proto.io, inVision




Sketching Wireframes


The product manager is concerned with functions, not form (UX/UI work)

The best tools to use are pen and paper. Draw and ponder upon the two points.

  • What is the point of this page?

  • Users should be able to: function1, function2 ....



A sample sketch of wireframe
Source: medium/prototypr/io

List all the functionalities the application needs to include. Gain inspiration from your favorite websites.


Ends.


Image Source


Reference

bottom of page