Designing Modern Products with Tools from the Past

Not very long ago in the history of man and the internet, life was simple, and so were applications. They had simple linear flows and few screens which could be stacked as layers on top of each other in Adobe Photoshop.

Of course, times change. Computers became smaller, phones became larger — interfaces now transition seamlessly between these two formats. The capabilities of web browsers and mobile devices have only increased with time. Naturally, design too has become beautifully condensed and efficient. These days, even smaller, one-page apps end up having hundreds of different states that are connected with complex business logic.

What about our tools?

The products we design keep presenting us with newer challenges owing to their increasing complexity. And yet the tools we use remain largely ignorant about these challenges. Our tools having evolved from paper and pen offer us very little in terms of managing complexity. If our tools are incapable of translating the complexity of the things we make with them, the question becomes pertinent: how can we design new products with tools from the past?

The problem of outdated tools may be solved by doing what we designers are good at doing — designing an ideal tool!

Let’s start by looking at the problems we face while designing at scale in the modern context.

1. Loosing sight of the big picture

Most design work is either about designing a new user flow, or improving an existing flow. The larger view of the flow is tossed out of the picture as soon as we start working on an artboard which represents a single screen. You see the problem here; can we be designing a screen without full knowledge of how it fits into the flow?

Of course, designers realise and try to work around this. We end up placing multiple artboards side by side, sometimes connecting them with rudimentary arrows, trying to imagine how the flow is shaping up. We have to piece together where the flow is leading. To an extent, this approach will work, that is, when there are strictly linear flows — not so much for complex flows which branch out, cross, merge. So much that the design file starts looking like a spider web, only less beautiful and more messy.

2. Taking care of all possible states

There are tens of possible states of a screen, and hundreds of possible reasons for them. There are customisations on each state due to business logic, pricing plans, empty states, errors, screen sizes . Problems arise when you must design all of these states of one single screen in a 2D environment such as Sketch/Figma. How do you design something without leaving out any possible state and use-case?

It might have happened to you at times when a couple of days after the design handoff, you receive a confused ping from the developer about a certain state. Of course, these are oversights that you can retrofit and fix. But it takes away from a clean, clear design process, and wastes time and resources. Not to mention it’s one of the reasons a product designer’s life is the most difficult right before release dates.

3. Versioning

We all have days where despite meticulously making, organising and dating artboards, pages and files, we are still stumped when trying to find a particular design. Have you ever had to return to a screen for a minor edit, but you couldn’t figure out which sketch file/page the artboard was on? Or you found 5 artboards of the same screen and they clearly belong to different product versions but you can’t tell which.

Don’t get me wrong, I love tools like Abstract and Plant which help you version your designs but what about versioning the state of your product? Your product will keep on evolving with every release but every small difference will make your design files diverge more and more with the reality of your product. This problem becomes more difficult when multiple designers work on the same file.

4. Logical flow maps

One of the biggest problems designers face every day explaining the designs, screens and flows to developers and other folks who are working on the product. If X happens, show this screen but if Y happens, use this other variation of this component.

Products like Flowmapp, Overflow, _Whimsical _try to make creating UI flows easier. These apps do the essential job of condensing flows into one view, and depicting the basic connectivity and direction. However, they run into problems once the flow “evolves”. Try keeping them in sync with your Figma or Sketch files.

To sum up

All of the aforementioned points brings us back to our original observation of products these days enlarging in detail and sophistication. A notepad was sufficient for putting words and ideas onto paper. But the increasing complexity of ideas that needed to be communicated necessitated different tools. Similarly designers are in clear need of tools that can keep up with this growing complexity. of today’s products