The 15-minutes wireframe

When developing web components like booking calendar, you need a detailed concept of the ux. A good ux concept saves development time and prevents misunderstandings. Especially if you design critical components, maybe one that is involved in generating revenue, you need to be sure the targeted audience will effectively use it.

If you are a one-man show, like me, you are a developer and a ux designer in a person. As a developer I’m mainly focused on the architecture of the software, bugfixings and keeping the code scalable. That’s a lot of thoughts that consume most of my time, e.g. choosing the  right payment API. But if you think of the front- end, you think in pictures and primary of the user. In my opinion it’s easier to dive into the design process as becoming warm with the code. Let me give you an example.

The subway wireframe

In the past months I sketched a few components while a was on the way to my company. I spend about 15 minutes every day in the subway to arrive at work and another 15 to get back. I always take my college block with me. I use these time slots to design new wireframes or optimize existing ones over the days (chunking of process). After the ux design finishes I have the big picture to go on for  optimizition. When there is nothing more to remove (!) developing can start. Usually during development some things of the ux could change. The reasons are long. One of them could be the limited technical support of the software platform (e.g. left-to-right swiping on the iOS result in moving back in history. If you planned bring the side menu to front this way, it would be inconsistent).

How to begin

If you have a college block and a pen, then your are ready to go. If not, buy one. I prefer A5 paper, because these are handy and in every situation usable.

  1. Start by writing a headline (the name of your component).
  2. Make your first sketch.
  3. Optimize it. I prefer to add as less as possible. Only focus on these parts that are meaningful to the component and the ux.
  4. Think of the solution: how would you develop the component (I assume you are a developer too right here).
  5. Repeat step 3.

Sometimes it’s necessary to focus on certain parts of the component while others are finished. For this situation it isn’t necessary to redraw the whole component. Think of a comic. You should pick the weak part and dive into.

The right time, the right place

Knowing when you are most productive is an advantage. My preferred time for new concepts is in the morning on the way to work. This is a good time to bring fresh ideas to paper. The way back home I use to refactor the wireframe I made in the morning. It happens from time to time that I reflect the ux during work day and see reasons to make changes. Find your productive time of the day and try to improve your wireframes over and over.

However your plans are on developing a component, it’s a common and suggested way to make some thoughts before developing the components. The time one developing a prototype before doing wireframes shouldn’t be underestimated. Front end development is still a time consuming job.