Wireframes — Mockups — Prototypes: All same? Product Owner/Manager’s job?

Recently, I am being involved in the product UX Improvements process. I felt that Wireframes, prototypes, and mockups are very common terms in UI/UX design but people/scrum teams often confuse them. Scrum team expects PO (product owner) / PM (Product Manager) to create prototypes and most of the time, they called design differently as Mockups/wireframes/prototypes assuming that all are the same. A few basic questions could arise here.

* Really, are all terms the same?
* Is PM/PO are responsible/accountable to create everything?

First, let’s try to understand the differences and then get to the point of what PM/PO is responsible for. (Interested - the difference between PM & PO?)

“wireframes ,Mockups and prototypes serve distinct and unique roles in the design process.”

>>> WH (What/Why/How) for WIREFRAMES:

> What:

• A wireframe is a basic, low-fidelity representation of the initial product concept, containing the essential elements that would feature on a webpage or app.
• You cannot just start right away because you may undergo the risk of overlooking something or missing a vital element. In this respect, a wireframe will help gather things together and see the big picture.
• The idea is to — keep it simple!!!

> Why Wireframe is important?

• Helps to showcase bigger picture/vision/flow/business objectives, etc.
• Easy to communicate [Mosty used for internal communication and NOT for user testing]
• Low cost attached: Use pan/paper -> draw sketch -> analyze / brainstrom.

> How to Create Wireframe?

Basically, there are two types of wireframes:

• Hand drawn [pan/paper]
• Digital wireframe [using free/commercial tools]: like UXpin, Balsamiq, whimsical, etc. There are plenty of tools you can use!

>>> WH (What/Why/How) for MOCKUPS:

> What:

• Unlike wireframe, A mockup is a static wireframe with much more UI and visual details. It gives viewers a more realistic impression of how the final website/app will look like
• But still, a mockup is not clickable (just like the wireframe). As opposed to a wireframe, a mockup is either a mid or high-fidelity display of design.

> Why Mockup is important?

• Experiment with the visual side of the product to see what looks the best
• Easy to communicate [Widely used for client communication and could be for user testing]
• Rich colors, styles, graphics, and typography with actual texts.

> How to Create Mockup?

• As compared to a wireframe, you can’t draw the mockup. You might need to use a mockup tool. There are plenty of them, too. You might want to try Figma, Marvel, InVision, or sketch.

>>> WH (What/Why/How) for PROTOTYPES:

> What:

• A prototype is a fully interactive, high-fidelity, functional mockup with high-fidelity UIs, rich interactions, and animations.
• Relatively simple working model of an app or webpage.

> Why Prototype is important?

• Check whether the customer’s problem/need is met. Attract more client/feedback at an early stage.
• Validate concepts / Idea.
• Useful to test user journey.

> How to Create Prototype?

• As compared to a wireframe, you can’t draw the prototype. You might need to use a tool. There are plenty of them, too. You might want to try Figma, Marvel, InVision, Adobe XD or sketch.

Conclusion: By now, you should have a clear understanding of the distinctions between wireframes, prototypes, and mockups. A lot of the characteristics of these three processes actually complement each other. The major benefit is to get early feedback on the idea/concept and reduce the development/iterative cost.

*** Is PM/PO responsible to create everything? ***

As PM/PO, Have you ever tried to communicate with developers about a user story and found yourself struggling over your description? Is the actual requirement misunderstood just based on verbal / written communication? If so, perhaps it’s time to consider wireframing or other visual prototyping methods to help ensure your message comes through to your team.

• It purely depends on whether prototyping/mockup comes under PM's primary responsibility. For small org/startups, it may be. But I don’t think it has to be pixel-perfect. I would advocate that wireframing is essential for the PM and it creates a lot of clarity on Epic/Feature/user stories. It helps the scrum team to understand the global objective and user journey.
• The organization usually has UI/UX designer to convert a wireframe to mockup/prototypes (executable). A close collaboration between PM and UI/UX team is key to success. It will help to translate user feedback to the actual design and help to reduce a lot of waste.