Programming For Designers

Apurva Ulabhaje
Design with code
Published in
9 min readFeb 6, 2019

Why should a designer learn to code? | How to apply programming concepts while designing experiences?

Photo by Ben on Unsplash

3 things a designer should know to design and implement the best possible experiences :
How and what to design?
How to present the design to others?
How are others perceiving his design?
.
.
.

Let’s take an example of a designer named X. So Mr. X was given the task of designing an AI-based solution for a particular product. He sat for hours analyzing the problem, researching and understanding the user behavior, and finally came up with a concept. He presented it with a lot of maps, sketches, and user journeys. His team members and the investor understood the idea very well. They were able to visualize it and they liked it as well. After a few days, Mr. X got a call saying that his idea cannot go further because the investor was not able to see a lot of scope in it. So Mr. X decided he will hire a coder and make a basic prototype of his concept so that the investor can understand it better and experience the concept. The coder made the prototype. But Mr. X was disappointed, the prototype was not exactly like what he had imagined and experienced in his head. Even with a few more attempts of explaining the coder, Mr. X was not satisfied with the prototype and his idea was not taken forward.

Should designers code?

Designers are creators and have to think beyond reality to design the solution. The solution that the designer comes up with does not necessarily have to be a realistic and a working solution. The solution can be as vague and hypothetical as possible. Designers always design for the future. They do not fix a problem but they solve a problem. Fixing a problem is done with implementing knowledge and solving a problem is done with understanding the problem, the scenario, the entities involved, and then thinking beyond the possible to create a better version of an existing system. The job of the designer is to always come up with new ideas which are different from the existing ones. Now considering that if the designer has developed an idea, the next step is to present it. How is that accomplished? A lot of times designers use various techniques to present and test the idea. A few of the common methods are sketching, mind maps, flowcharts, user journey maps, quick paper prototyping, and many more. In these prototypes, an outsider will definitely understand your idea but cannot experience it. As always said one has to experience a certain thing to understand it better. Only a designer, who came up with an idea can experience the idea in his head better than anyone else. It is an important responsibility of the designer to make others experience his design, the way he does. In this case, the designer himself is the perfect person who can prototype the design in the best way possible.

This is followed by the question ‘Should a designer code?
Design and coding are very different in nature. The methods and the approach to look at a problem vary tremendously. Designers use their previous experience and intuitions to design a solution, while coders use their technical knowledge to analyze and develop the solution. Referring to the above scenario of Mr. X, if he could have done the coding himself then he would have been able to make the prototype exactly the way he imagined it in his head. Even though design and coding have different approaches, a designer can certainly learn to code. By doing so he not only increases the scope of his knowledge and possibilities but also understands the process of development of his idea. While designing a solution he is aware of how the solution will be taken forward. Many designers would say that coding is not their job and one cannot expect a designer to do both design and code. This is considerable, but if a designer knows and understands the basics of coding then he can make his own design prototypes the way he wants. This is not only useful for the company but also for the designer himself. He is able to participate in designing and the coding process which broadens his knowledge and scope. I personally think that even if the designer is not able to code very well he should at least know some basics of coding and the concepts behind it. This will definitely create a lot more opportunities for the designer.

My experience in the studio of advanced programming for prototyping:

The course of advanced programming for prototyping was an amazing learning experience, where I learned a lot more than I had expected. I would say the course was rigorous and hectic but certainly worth it. It started with learning P5js, a javascript library. When I started the course, I had never heard about p5js before and had no previous knowledge about JavaScript and not much knowledge about any other programming languages. It was a great start. I started from scratch, understanding the very basic commands and problems. Initially, as I started learning I found it difficult to understand the very simple steps in coding, I found the commands confusing and difficult to remember. But eventually, after practicing and implementing the commands to solve small problems, I was able to code for my prototype.
We had to build a design concept and then prototype a part of it later in P5js. I enjoyed the process we followed while building the concept. I did a lot of research in areas of ICT4D, e-governance, connected mobility, CHIP (Connected, heterogeneous, intelligent, and personalized) mobility architecture. I explored the areas which are upcoming and developing tremendously in recent years. Along with that, I learned the process of object-oriented programing and some basics of GitHub.

Why designers should learn object-oriented programing (OOP)?

Based on my understandings, object-oriented programming is a programming paradigm that is based on the concept of the elements or segments which are included in a design concept. These categories are called objects in the following paradigm. These objects are defined based on their data, functions, characteristics, and behavior. Traditionally OOP is used in solving a software problem but the concept and the principles can also be applied in design thinking and a design problem-solving process.

Following are the steps that can be used in order to solve a design problem.
Steps:

The steps mentioned above are my own understanding of how OOP can be applied while solving a design problem.

How concepts of object-oriented programing are useful for a designer?

In my opinion, even if your design is categorized as a simple design, it still has a lot of tiny elements connecting to each other, which forms the whole concept of design. The design can be simple but its corresponding elements are complex; which includes the users of the design, the space the design utilizes, the environment that it affects, and many other different elements. These elements of design form multiple objects in the design. This is where the term abstraction can be taken into consideration. Abstraction is the creation of objects in their simplest form. Each object is abstract and has an essential characteristic that distinguishes it from other things. In object-oriented programing, abstraction is used to manage complexity. The basic idea is to break up the larger complex system into smaller and simpler parts. It further helps in defining the boundary from other things. An individual can only understand the complexity of the concept once he goes deeper into the design. When you understand the concept of object-oriented paradigm you are able to distinguish between different elements which further helps in the separation of interface and implementation of the concept. Through the concept of abstraction and generalization I have learned how to distinguish different objects, understand their characteristics, essentially categorize them and then place them together or separate them accordingly. I think that understanding the concepts of object-oriented programing is only possible when you actually build a concept and then move towards the process of building the prototype with object-oriented programing.

I had this experience in our studio when we were making our journey map for our design concept. Initially, we aimed to make a blueprint of our concept but we ended up making a user journey map. I had our design concept clear in my mind but I found it difficult to express the concept in the form of a blueprint. In a system, there are a lot of elements that connect to each other, many systems that interconnect and overlap each other. There are multiple touchpoints and functions at various stages of the system. A blueprint is a map that represents the working of the system which connects the touchpoints in the system with the user actions and the front and the backend processes. When we started mapping the concept, there were a lot of elements that we were trying to connect. We did not identify each segment and the objects in the system and hence were not able to categorize them properly. In this way, our map turned out to be a simple user journey map and not a blueprint map.
I realized that if we had applied the concepts of OOP; generalization and abstraction of objects in our design thinking process and used them while mapping out the concept; we could have been to map the system in a better way.

How learning OOP and sequence diagrams are useful for a service system designer?

Being a service system designer, I often have to study complex systems, and usually, I get confused with the multiple elements functioning and connecting in a system. A sequence diagram shows the object interactions in time succession. Sequence diagrams are used to make class diagrams and identify attributes for each class.
This was the first time I learned how to make a sequence diagram. As I started making the sequence diagram, I came across the micro-interactions and the number of steps in the process. Along with that, it gave me an understanding of how data is transmitted between different classes of the system. After making the sequence diagrams, I not only had a better understanding of the interactions but also a clear idea about the different segments present in the system and overall how each element in the system functions in correlation with the other element. Hence I think that the sequence diagram can be a great design tool for service system designers. It can help the designer understand all the touchpoints in the system which can further help the designers to make interventions for each touchpoint. I think this is also useful for a UX designer as he gets a clear understanding of the user journey and user interactions with relation to the other elements in the system and can later be useful to analyze the user experience at each touchpoint present in the system.

Sequence diagram created in the studio by Apurva Ulabhaje & team

How designers should learn to program?

A designer is usually afraid of the technical aspects of programming and prefers not to go into it. This was my personal experience. Until last year I disliked programming and would run away if anyone asked me to learn to code. While doing my design projects and making prototypes, I felt the need to learn at least some basic programming, so that I can present my prototypes in a better way. As I started learning I found it difficult to cope with it, but as the time passed with practice and failing multiple times in my code, I gradually started developing an interest in programming and now I can certainly say that it was worth the energy and the time invested.

Designers with no prior knowledge about programming can start their journey in the following way:

Starting your Coding journey By Apurva Ulabhaje

Overall I learned a lot of new concepts and tools in this studio. I am looking forward to how I can implement my understanding and my learning in my future projects.

--

--

Apurva Ulabhaje
Design with code

UI & UX Service Designer | Inspired by nature to write & paint |