Designing Modern Products with Tools from the Past

Not very long ago in the history of man’s foray into the interwebs, life was simple, and so were applications. They had simple linear flows and so few screens that all of them could be stacked together in the same Adobe Photoshop file.

Of course, times change. Computers become smaller, phones become larger — interfaces now transition 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.

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 basic 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.

In the life cycle of a product, most of the times the first step is when we’re actually designing a new user flow, or repairing an existing flow. However, the larger view of the flow is tossed out of the picture as soon as we start working on work 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 realize this. We 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, and almost interact in all directions at every screen.

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, error states, screen sizes — the picture is clear. The problem arises when you must design all of these states and appearances 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 deranged right before shipping.

It is clear that our tools need better version control. 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 mock. 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 with every designer working on the same set of files.

A rather uncomfortably large problem is successfully sharing and communicating about designs, screens and flows with non-designers that also work on the product. How does a designer explain said flow in terms of individual elements to developers and managers, while also making sure it brings across all the nuances of a bird’s eye view?

New 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.

All of the aforementioned points brings us back to our original observation of products these days enlarging in detail and sophistication. We are in clear need of tools that can keep up with this growing complexity.

As an analogy, 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. This has our mission in Atlas, to be able to enable product creators to design and develop software products in a better way. Instead of creating the ultimate tool, we want to create an environment for regular design and product management tools to be integrated and be optimally used.

Related posts:

Marketing strategies will always do best if you are going to succeed in marketing. Marketing field is the highest competitive field we have, and if you don’t know the statistics of marketing, then…

Losing control of asynchronous code in JavaScript is undoubtedly easy. Closures and in-place definitions of anonymous functions allow for a smooth programming experience that doesn’t require the…

If we want uncover what makes us unique, then we must do the work that others are unwilling to do: the rigorous task of constant self-actualization. Raising our own self-awareness will deepen our…