Product Design and Wireframes
Don Norman introduced the term “user experience” and a separate job of a product designer in his book “The Design of Everyday Things”.
A product designer needs to be involved in all stages of product development. With their broad expertise, such a professional is expected to design the most convenient, comfortable, and integrated user experience.
As a Product Management based blog, is this an out-of-scope topic? In most organizations, there will be a separate position for product designers and product managers. Product Design is a “deep dive” role, while PM is a multi-tasking role. The PM needs a fluent and strong collaboration with the product designer to be able to deliver the right product, which requires the PM to understand what a product designer does. We shall look at the responsibilities of a product designer through this article, where we shall also see that there are many parallels with what a PM does.
The capabilities that make a good product designer are qualitative research skills to be able to understand the customer in-depth, information architecture design skills to create wireframes/sketch and define the interaction-flow of the customer with the product. Both these skills are relevant for a PM job too. One thing exclusive to product designer activities is creating visual design and final look-and-feel of the product.
The Product Design Methodology
There would be multiple methodologies with focus on different parts of the design process. However, the overall activities shall remain the same across the approaches followed by different organizations. The major activities include:
Understand — It is about understanding the specific customer problem we are trying to solve along with the existing market/competitors in the space. This is done via extensive customer research/interviews of different types of customers, understanding their lifestyle and their needs, and create personas based on the same. Everything one does from this point forward will be tailored to these personas so it is important to take time here to get these right. Then one needs to identify a key customer out of the personas framed and shift focus to the needs of this specific customer persona.
Diverge — It is about ideating rough solutions to deliver on the needs of the customer. All members of the team individually sketch-out their respective solutions to be discussed further in the next stages.
Decide — The ideas generated in the last stage are vetted by all team members and the top 2–3 ideas can be selected for prototyping. This primary selection can be purely based on the effectiveness of the solution.
These top ideas are then to be prioritized based on constraints and effectiveness to decide what is worked upon first in the base prototype and what is left for later. Our earlier post on prioritization shall help you on how to go about this selection.
Prototype — A prototype is a very simplified implementation of the solution with focus only on usability and not on elegance. A thumb rule could be that it should take no more than a day to create a prototype. This can be created on a PowerPoint, word doc, a usable object, or even as an enactment by team members to convey the idea.
Validate — Conduct exhaustive interviews with around 5 potential customers to understand how they perceive the product and would interact with it. Gauge their interest and note down pointers to be discussed later. Based on the feedback, iterate, and validate further to fine-tune the product offering.
Post this, a minimum viable product can be made and tested in the market. Further iterations of this product will be based on how the current offering is performing in the market. You can refer to our earlier post on product metrics to understand what is to be focused on while evaluating a product’s performance.
Wireframes
The wireframe is a page schematic or screen blueprint, and it is a visual guide that represents the skeletal framework of a website or an application.
The main goal of wireframing, that we could get is to show the team and stakeholders which entities, pages, and components the application is going to have and how these elements of the digital product will interact with each other. And it solves the same purpose also in interviews, the interviewer also scores you on the entities, pages and components you proposed.
There are many sources to make wireframe designs. Some commonly known are Balsamiq, Adobe XD and Proto.io.
Wireframing Best Practices:
Minimise the use of colour in wireframes
If you’re using rich colour palettes in your wireframes, remind yourself of the goal of wireframing (to show which elements the product is going to have, and how they should interact with each other) and think if extra colours will help you to achieve it. If not, adding colours to your wireframes might distract the viewer’s attention and will surely make any updates more difficult.
Use simple designs of components
When you add components to your wireframes, go for basic designs. Wireframes aren’t intended to contain thoroughly designed and detailed components. Instead, they should be easily recognized by your team members and stakeholders. Adding detailed components will cost you a lot of time and effort without being particularly useful.
Maintain consistency
Similar components must look the same on all your wireframes. If the same components look different, developers are likely to question if they are actually the same and even add extra time to the estimates because of different designs.
Low to High fidelity
There’s no strict rule. Sometimes you should go for low-fidelity wireframes, while some projects might require high-fidelity ones. It depends on the project, so if you feel like adding more details to the wireframes — don’t hesitate to do it.
Sample resources :
Here are some good examples of product design cases. It will help you understand the design thinking and a quick overview before you sit for any PM interview.
Govinda Nathani & Nimish Nama
MBA, IIM Calcutta 2019–21
References:
https://www.smashingmagazine.com/2020/04/wireframe-design-success/
https://medium.com/axial-product-and-design/the-difference-between-design-and-product-management-9b8a1ec80b5
https://uxdesign.cc/product-designer-vs-product-manager-whats-the-difference-anyway-1309c6a01ee9
https://medium.theuxblog.com/a-product-design-toolkit-a-sprint-through-google-s-product-design-methodology-412b0743fadf
