In our day-to-day routine, we often see a lot of physical products, but only a handful trigger us to touch and feel them. Do you know why? The physical Product could range from simple things like Pens, Chairs, Tables, Mobiles, Laptops and Books to big-ticket items like Cars, Bikes etc. The first sight of attraction is the ‘Looks’ that compel us to feel the Product by touching and experiencing it. Our mind is pre-programmed to look at visually appealing things and derive pleasure by physically connecting with them. The User Interface / User Experience (UI/UX) are refined terminologies adopted by the Tech companies to describe the Look, Feel, Appeal & Experience per se. However, there is much more to attribute to this acronym with the advent of Design Thinking, human-centred iterative process designers use to tackle problems in new-age digital Products. Let us deep dive to understand if there is any difference between UI and UX, how these ended up overlapping with the Product Manager’s portfolio, and the tool stack that can help PM manage the UI/UX diligently.
Difference between UI & UX:
Firstly, let’s turn to our old school friend in the pocket – the Oxford dictionary – to understand more about the words ‘Experience‘ & ‘Interface‘.
Experience: (the process of getting) knowledge or skill from doing, seeing, or feeling things.
From the dictionary definition, it is pretty apparent that experience is an assortment of dimensions like interaction, visual, feel etc.
Interface: A device or program enabling a user to communicate with a computer.
It appears from the definition that the ‘interface’ deals with something tangible or visual. Going by this logic, the UX seems to be a superset of UI if these dictionary definitions are considered.
Applying this reasoning in the Product Design context, UX is a term with a much broader scope that deals with visuals, Interaction, Feel, Information Architecture, concept articulation, User motivations, User flows and User environment.
UI is more of a discipline that builds on the foundation laid by the UX, primarily dealing with something tangible and visual, including but not limited to, Typography, Colors, Style, Branding, Spacing, Boldness & Iconography, etc. Notably, there is a piece of overlap between these two disciplines. More often than not, we see UI and UX designers working together on the same projects, simultaneously complementing each other. Hence, more companies refer to the common expression “UI/UX”. Even in terms of Job Descriptions, the companies that highly emphasize design principles (Apple, Google, etc.) have a separate JD for UI and UX designers. In contrast, others have a common JD encompassing all the design aspects outlined above.
Overlap with PM portfolio:
Product Management, by definition, deals with the Product’s overall success, with the responsibilities like Identification of User Pain points, strengthening Usecase, Competitive analysis, MVP, Rapid Prototyping, Product Market Fit (PMF), UI/UX design, Prioritize Features, Development, Testing, Release, to name a few. More importantly, making a solid case for the Product Vision. Remember the famous Venn diagram?. The PMs are at the heart of managing Tech, UI/UX and Business.
The activities like understanding business context, user pain points, user environments, user motivations, Brainstorming, Persona identification, Journey mapping, User flows & Wireframing resonate well with both the PM and the Designer job. Note that many small to mid-size firms have the PM himself do all these activities unless there is an absolute need to bring in a different perspective. After all, these activities are the meat to making a solid case for the Product – the main job of PM.
PM Tool stack for UI/UX:
Below is the list of tools PMs use to deal with UI/UX. Note the below is not an exhaustive list.
| Activity | Deliverable | Tools |
| Concept Design | Personas, Empathy Maps, User Journey, Journey Maps | Whiteboard, Menti meter, Miro, PPT, Survey Monkey |
| Information Architecture | Site Maps & Layouts, Page Layouts, Task flows | Visio, PPT, draw.io |
| Wireframing | Low fidelity wireframes (Greyscale) | draw.io, PPT, Axure, Adobe XD |
| Interaction | High fidelity wireframes | Axure, Balsamiq, Invision, Adobe XD |
| Visual Design | Mockups, HTML pages, CSS | Photoshop, Sketch, Figma, Adobe XD |