The Importance of low ‘fidelity’ wireframe as a starting point

The role of User Interface Design and User Experience are paramount these days with plethora of applications in all segments. Hence, there is lot of emphasis on including UI and UX aspects right from conceptualizing the solution for a problem. However, the amount of detail included in the initial User Interface (UI) concept for discussion, popularly referred to as a ‘wireframe’, may negatively influence the outcome of the final product i.e. it’s utility

The Problem - More detail is better for conveying ideas

Product Managers/Product Owners usually visualize their ideas primarily through approximate or rough sketches depicting the UI called ‘Wireframe’, the expectation being that the ideas expressed in the UI will quickly result in gaining consensus and implementing a solution. Some product owners are very imaginative and handson and like to share ideas visually while others are happy sticking to conveying ideas verbally. With multiple affordable subscription tools such as Visio, Axure, Invision and Proto.io using high fidelity wireframes i.e. sketches (with lot more details such as layout, colors, navigation, buttons and scroll bars) for driving the 'initial' ideas to the Agile team has become easier. In fact, high fidelity sketches called ‘mockups’ are increasingly being used during the initial ideas stage without realizing that the team’s ability to critically analyze or evaluate an idea get diminished. This results in the Engineering (UX & Development) team overlooking the rationale and instead get fixated on the solution i.e. without fully debating or understanding the user needs focus is on implementation.

Though Product Managers may not see the difference, mockups or high fidelity wireframes should preferably be used in later stages of solution design i.e. only after multiple wireframes or concepts have been brainstormed, fully debated and a single wireframe finalized by the team. A profound effect I have observed when a Product Owner conveys ideas through a mockup is that it decreases the creativity and imagination from UI/UX experts who after seeing a mockup may get influenced by the UI/UX ideas and become unable to think outside the box or come up with different interesting alternative solutions to solving the problem

The Solution - Minimal detail is better for conveying ideas

One of the ways I tackle this problem is use the 'initial' mockup and work with Product Owner to derive a list of all the user stories or use cases including those related to the on-screen elements like navigation, horizontal or vertical scrolling, layout and others. Along with we also validate each item for its

1. Relation to the current goal or objective
2. Relative priority or relative utility to user
3. Type of Data and relationships

If there is no proper justification for any aspect of the mockup I ensure that it is debated early with the Product Owner lest the Engineering team will quickly jump into its implementation. This problem is acute when teams are not 'fully' Agile in software development. 

In case the Product Owner is convinced that things have to be designed in a certain way, then both the wireframes from Product Owner and the ones put together by Engineering respectively can be discussed resulting in a final design that is sometimes much better than either of the originals

Example 1

Wireframes like these keep details to minimal and stay focussed on addressing user needs during initial discussions

Items that can be inferred from above Web Page Wireframes

As a user I want to quickly browse all the content

1. Content can be in multiple formats – DOCX, PDF, XLSX, JPEG
2. Navigation between folders
3. Content items can be more than 10, however empty state is also possible.
4. In Empty state, prompt user to create or upload documents

As a user I want to view each content in detail

1. Focus on Viewing and Editing

Example 2

Items that can be inferred from above Android App Wireframes

As a user I want to quickly browse all available Movie Titles

1. Navigate between different categories or genres
2. Quickly purchase an item if interested
3. Content items are not likely to be max 10 at a time. However, empty state is also possible
4. In emtpy state, prompt user to subscribe for email notifications when new titles become available in that genre

As a user I want to View details for a selected Movie

1. Constraints
2. Max 100 images and max 5 videos. Empty state will have at least one image but no videos.
3. Quickly purchase an item if interested
4. Navigate between different categories or genres

Are you a fellow business analyst, Product Owner or Product Manager? Let me know your thoughts