Many a great product began with a sketch done in Sharpie on the back of a bar or coffee shop napkin. These napkin doodles are wireframes and process flows in their simplest forms. They help bring an idea for a product to life so that the look, feel and function of it can be seen and more easily described. They not only give a glimpse of what the product will look like when it’s completed, they keep everyone on the same page while it’s being developed.
Developing wireframes and process flows is the second stage of our four-part development process at Fuller Solutions that we have written more about in our eBook, which details our development process. Creating wireframes and process flows come on the heels of developing your project charter, inputs, processes, outputs and user stories. If these steps were done well, wireframes and process flows should be pretty easy to build.F
Whether you are creating the next hot tech startup, upgrading an existing product to meet new customer needs or creating a necessary internal data capture tool to gain efficiencies, wireframes and process flows keeping everyone on the same page. They are iterative and can be changed as needed, especially good for the agile or DevOps environments.
Let’s take a closer look at process flows and wireframes.
Through our first stage of product development, discovery and envisioning, user stories are captured and documented. These user stories are the basis for creating process flows. Depending on the complexity of the product being developed, there will be one or many process flows. Process flows define how a user of the product will perform certain actions as they engage in the product.
A careful review of the process flows by all involved in the product development is essential as it provides the ability to review what was initially discussed, identify gaps/missed steps in the process (there are almost always gaps!) and correct sequencing errors.
Once the final review of the process flows has been conducted and any corrections made, it is time to build the wireframes.
Getting the user experience (UX) design right is critical in software development. Understanding how a user interacts with a system, product, website or app requires some effort. UX wireframes are an important part of the UX design process. In these wireframes, an image or sets of images are developed that display the functional elements of a page within the product.
UX wireframes are used for planning a product’s structure and functionality and serve as a general reference guide as to the look and feel of the input form, as well as the groups of fields and the relative structure of the fields. Wireframes help ensure the purpose of the page is met, which is usually being informed by a business objective.
While it is tempting to draft detailed wireframes, we have found from experience that it is best to develop low-fidelity wireframes that meet the goals defined above. This also allows for us to be more flexible with changes, which inevitably occur and often serve to improve the product.
You can find an example of a low-fidelity wireframe in our eBook on our technology development process.
We hope you found this information helpful. Wireframes and process flows are a key part of technology development. But they don’t have to be fancy to work. We welcome an opportunity to help you bring your back of the napkin sketches to life.
PS – A great book on visual thinking that will help you become an expert business idea doodler is Back of the Napkin by Dan Roam, which was an Amazon Business Book of the Year back in 2008 among other accolades by Fast Company, Business Week and others.