One simple example of a user flow could be: a user enters your eCommerce website after clicking on an ad about, say, grey derby shoes. This journey includes the point where they entered your website/app, all the points where they interacted with the website/app (like the pages they visited and the buttons they clicked on till their final transaction), and where they exited the website/app.

User flow refers to the path or journey of a user during a website or app session. This will ensure the hard work you put into your research reflects in your wireframe and doesn’t go to waste.īe sure to document all the key pieces of information you come across.Īrrange the research based on macro and micro categories, using folders and subfolders.Ĭreate cheat sheets to capture key concepts such as buyer use cases, buying behaviors, or any intriguing user feedback you may have come across in your research. Therefore, before you dive in, make sure to document and organize all your research information in a way that you don’t waste too much time and effort accessing them. At various points in your wireframing process, you will need to keep coming back to this research. You are going to collect a lot of data, including use cases, buyer profiles, market research data, and project requirements, during your research. Make it easy to refer back to the research data Research about the end users, their preferences, and buying behaviors so that you can address their needs with the wireframe.īased on your end user research, define common use cases to better understand the scenarios you are designing for.Ĭonduct market research and competitor analysis to identify design trends and best practices. Getting this clarity is foundational to the wireframe design. Your design should not only help the business deliver its message or products to customers but more importantly make it easy for customers to navigate the page and find what they need without much hard work.Ĭheck in with stakeholders to understand key project needs. And to do that, you will need to gauge the requirements of your design project and the expectations of your stakeholders and end users.

It may be tempting to start pouring out your wireframe ideas immediately, but before you do that, think of the larger goal: designing a compelling user interface (UI). Conduct research to get clarity and direction With that covered, let’s look at the steps involved in creating a wireframe.

Sample wireframe being designed in MockFlow WireframePro (Source)

Wireframepro wrap text