Why iterative design, destruction and rebuilding are critical processes

A king brings six men into a dark building. They cannot see anything. The king says to them, "I have bought this animal from the wild lands to the East. It is called an elephant." "What is an elephant?" the men ask. The king says, "Feel the elephant and describe it to me." The man who feels a leg says the elephant is like a pillar, the one who feels the tail says the elephant is like a rope, the one who feels the trunk says the elephant is like a tree branch, the one who feels the ear says the elephant is like a hand fan, the one who feels the belly says the elephant is like a wall, and the one who feels the tusk says the elephant is like a solid pipe. "You are all correct", says the king, "You are each feeling just a part of the elephant." — The Psychologist's View of UX Design

The story of the elephant reminds me of the different view of design that people of different backgrounds, education, and experience have. A visual designer approaches design from one point of view, the interaction designer from another, and the programmer from yet another. It can be helpful to understand the part of the elephant that others are experiencing.

This could not be more true. I think back to when I started designing - knowing nothing about it, and certainly nothing about development or user experience - and even then I thought I understood my audience and visitors.

It was only after breaking out and expanding into alternate forms of art, like photography, and more critical forms of thinking related to development that I began looking at projects in a more analytical way. I would get to design all I wanted but I would also be thinking about the next step in the process - understanding how the layout would break apart and come together, this time away form the canvas and in the browser. Following this was my exploration into user experience -understanding what people think and why they think it. Most importantly understanding what would make users perform a certain action and change the design and layout of the page to ensure that they get all the encouragement and frictionless experience needed to do so.

The common basis for all of these developments and explorations into other fields is that there is a need for greater understanding. Always on a quest better yourself and knowing that there is more to learn at all times. The King's experiment showed that each of those people thought they had the answer, which, in essence, they did, but none of them knew that there was so much more behind the answer they gave. There is so much more beyond just the colors and layout of the design, so much beyond the click of an interaction - the trick is to recognize this and the to pursue the ability to understand and even predict it.

REWORK

Iteration is a critical part of any artist/designer/photographer's workflow. They say it takes 10,000 hours of practice to become an expert at a certain task. In those 10,000 hours, it is tough not to iterate and rework projects. Start from scratch and attempt things over and over again to see how you might approach it differently or where you may end up on the tenth try.

Learning through iteration is a powerful tool. In today's web age, rapid prototyping is becoming more common, along with repeatable patterns and code libraries. Using these to speed up your workflow is beneficial in its own right, but it also allows you to rework at almost unbelievable speeds.

Working with UX also allows you to rework easily whether you are building static wireframes or going the simple route and using post-it notes to work through user flows. Either way, you can move entire sections, re-work entire interactions and start/end points for users without batting an eye-lid or worrying about hours lost.

The importance of this part of the process is to allow you to develop the idea quickly - not to make a polished product.

"Nobody has told us that it's OK for it to look crappy at first." – Sarah Paramenter

The important thing to focus in with reworking is breaking down your processes. Doing so lets you build ones that are exceptionally more advanced. Hours spent are never wasted - they may be lost on something that never sees day, but you become a better designer, developer, artist, etc for spending that time. And you get the added bonus of those streamlined processes that let you move faster and more efficiently next time.

But the threat of a cliff is the cost of the pasture. The world swells, pivots, and grows when we close the gaps of our untruths. A willingness to imagine things differently and suspend our disbelief for one another are the interfaces we create to shape the world. – The Shape of Design, Frank Chimero

REDESIGN

Start on paper. Move to wireframes or rapid prototypes. Design the small details. Go backward then come forward again.

Understand that redesigning is a process - an integral one - similar to the original act of designing.

See the evolution of work and you start to understand that while you were happy with one result, there we so many unexplored parallels that you had not yet discovered.

Design gains value as it moves from hand to hand; context to context; need to need. – The Shape of Design, Frank Chimero

Breaking these design stages up is also beneficial. Taking a day to sketch and gather your thoughts, then on another day start the wireframing process, and so on - this will allow you to start fresh on each stage/iteration.

REBUILD

Evolution of code is no different than evolution of design. There are always multiple paths that lead to the same destination - multiple ways of solving each code problem.

Building an entire site is a great task but an even better one is to take that same structure, tear it down and rebuild it with different solutions.

You can always try consciously approaching and solving the problems differently but more often than not, you will do this subconsciously using new techniques that you have developed since completing the original development.

For example, with my portfolio site being completed in January, I knew it was nearing time to revisit the code-base. I had been doing responsive design for a few months and was still using a packaged framework. Upon opening the code, there were many issues that were immediately apparent like not being mobile first, having "tablet" and "mobile" classes to show content instead of having a content strategy that arranged content properly for each view.

Once I rebuilt the site, it was mobile first and handled content properly - the major outcome, however, was that load times were cut from 3-4 seconds, down to be under 1 consistently.

The concept of rapid prototyping that I mentioned in the Redesign section is also pertinent here. If you go straight from wireframes to designing in the browser, you'll have an earlier start at iterative code and therefore automatically have a second iteration when you start to build out the "final version." This benefit puts you a step ahead in most cases and is one of many benefits of rapid prototyping & designing in the browsers.

"To think about web responsibly is to think about proportions and not pixels" - @trentwalton