An interaction design framework to cover all your bases

Pointers to keep in mind before delving deep in micro-interactions and pixel level details.

My first few years as a designer involved a lot of learning that was mostly through trial and error. It usually followed the format of — understand the problem, try a few ideas out, guess what process works best, and go ahead and do it. This way of designing definitely did teach me quite a bit and I learned about dead-ends as and when I approached them. In my naive years, there was not too much thought put into an organized way of doings things. As I grow as a designer, I have noticed myself building frameworks and process guidelines for myself. This has been necessary because of the impact the designs achieve, the stakes involved, and the scale of the projects.

With increasing stakes of the designs, it is important to iron-out details and get as much right in the MVE (minimal viable experience; I don’t believe in MVPs, and that’s for a different discussion) that I am designing for.

Over the years, I found myself going back to the drawing board because I missed out some key elements of the design flow. On retrospective, I realized this was because I was not really following a format to iron out the designs before the hand-off.

Engineers really love having complete designs that are well thought-through and are logically thorough.

Enter the Framework

To aid with thorough designs, I came up with a framework that tries to cover all bases of the flow that I am designing. Some instances, it has proven to be helpful in thinking about cases that were not thought through earlier in the process.

The framework that I use is nothing that we designers already don’t do, but it is a conglomeration of the important pointers that we sometimes tend to forget while designing.

The framework consists of four sections that I like to divide my designs into –