Designing With D4 Approach

Using data driven dynamic design approach for efficient product development cycle

In today’s world, the data is playing a vital role in many ways, but there is one question that most people in the technology field have been thinking over. Have we yet utilized the full potential of using data in project management? We use well-researched approaches to tackle project management, but even to this day, it remains an art and is often at the behest of the skillful project manager.

There are several tools to help one identify bottlenecks and track the project progress. But these tools do not accommodate a commonly overlooked aspect of product development: The design aspect.

One can argue that “design management” falls outside of the purview of these tools, and one should use dedicated tools like Invision, Zeplin etc. for such needs. But why should design be treated as a facet that is fundamentally different from front-end, back-end coding or database administration and management? After all, a mockup of the application screen tells a wonderful story.

Design is not just about aesthetics, user experience or customer delight, but design mockups can inform and sometimes even shape some of the architectural and structural choices made by the other teams.

On the opposite end of the stick, design mockups should be shaped by the constraints of the actual application. Usually this happens after an initial version of the application is available.

Let’s look at a real world scenario where prototypes are designed and developed without real data. One can’t predict the changes in initial requirement over the project lifecycle or estimate the constraints of an environment at the design stage itself. Often, such situations lead to multiple iterations. To tackle this, we propose and advocate a data centered dynamic approach to design. Instead of drafting a comprehensive framework, we will use the design segment as a vehicle for exploring some unconventional approaches, while maintaining a rhyme in tandem with some emerging trends in the design universe.

Principle 1: Expose

A standard design mockup is composed of various artistic and structural elements. These are woven together with creative threads which seek to inspire, articulate and communicate the very essence of the application.

However, in spite of its aesthetic projections, the mockup lacks a very vital element that directly affects user experience: static image used as design mockup. This portrays the application’s features into a lifeless matrix of pixels, which does not react or respond to external inputs.


In this amazing video, Bret Victor pinpoints this very same problem:

The computer is an artistic medium, it should not make lifeless productions.

To combat this issue, we introduce the first principle: Expose the controllable inputs of your art. What does this mean ?

The rectangle in the above image exposes ‘control points’, which act as anchors allowing the rectangle to be modified. It freely moves as the user desires, and yet it is bound to the browser window (environmental constraint). The rectangle cannot be moved past the dimensions of the browser window. Thus exposing controls is not just about freeform manipulation, it is about informed constraints and creating an exploration space.

Contrast this with the static image of a rectangle delivered by a typical designer, it lacks any modifiable controls and therefore it cannot respond to external stimuli.

The following sections explain why exposing such controls is extremely important, both from a creative as well as a practical standpoint.

Principle 2: Explore

“We shall not cease from exploration, and at the end of all our exploring will be to arrive where we started and know the place for the first time.”
— T. S. Eliot

Given a medium that exposes controllable inputs, it is easy to see how an exploration of the space is encouraged and even warranted. Let’s have a look at a simple fractal tree as shown below:

Exploring height gives an idea of simulating tree growth


Oscillating initial angle gives the appearance of tree swaying in the wind

Both instances of discovery noted above would not have occurred if the medium did not expose the controls permitting the explorations. This is the key idea behind the Exploration principle i.e. to extend and fully take advantage of a responding medium; the stimuli must force the medium into allowed transition states. Some of which may be new and entirely tangential to the original state.

Principle 3: Bind

The exploration is incomplete without the context of “real” data. Such an experiment can identify good vs bad states in the early stages of the design cycle.

The imperfections in data will immediately reflect in the exploration space and give the designer a comprehensive view of the edge cases involved.

Various tools do this by exposing “API”s that simulate real data. An example would be sample phone numbers that follow a specific format: xxx-yyy-zzzz
However, this is still far from the “real” data that we are talking about. In essence the final product is going to use the data sent from the back-end side, which is varied and has its own form. Simulating this using factories is a commendable effort but ultimately does not bridge the underlying gaps in the design/dev cycle.

However, with the advent of API documentation and testing tools like Swagger, API Blueprint etc. the gap is closing fast. A good product cycle must learn how to take advantage of these tools in every aspect.

Way forward

With the principles outlined above, designer is informed about the constraints of browser by mirroring the environment.

Several companies are taking efforts to solve the design challenges of future to a certain extent. Sketch data populator, a new extension for Photoshop/Sketch allows user to use mock data at the early stages of design and apply the same style to many elements enabling WYSIWYG. Adobe XD (earlier known as Project comet) and Craft by Invision Labs received lot of attention; as they were set to tackle some of the fundamental problems that occur while designing mobile or web interfaces. It allows realistic data import from web, Google sheets and local file system.

Though these plugins look promising, they do not cater to the need of an adaptive and dynamic layout. It will take some time for it to come to fruition. The use of meaningful data needs widespread adoption by design community. The reason being, immediate feedback given to designers considering the constraints of an environment, will result in efficient product cycle.

Still, there is one thing that needs to be addressed i.e. getting real data at the earliest stages of a project. Though it depends on external factors which are sometimes not in our control, all members of a project management team should at least be able to see the unified picture of an entire project. This will bridge the gap in terms of understanding of a requirement amongst product managers, developers and designers. Through this, the team can attain the closest resemblance to the envisioned product in a reduced product lifecycle.