A Guide to Human-Computer Interaction Design (IxD) with Johny Vino

WRITTEN WITH
Johny Vino

Award winning designer on Dribbble, UpLabs, Behance and more that is specilizing in interaction design and animation techniques. Worked for Healthtap, SYP partners, UXD Training, ZOHO, Tekion, and more.

Talking About
Interaction Design
POST DATE
November 12, 2017

"I would suggest not jumping into designing with view frames (rectangle - artboard) dimensions particularly being held to 1024*1024, 360*640. Come out of the square boxes; the world is so big; For example, You can make a table which is interactive, you can make a garden with a tree which interacts with you. So think of the daily environment we all live in and try to improve those things with interaction."

NExt Up

I

Interaction design (IxD) has become a brave new topic in today's design industry. Dribble has become full of intricately timed gif that include swiping, dragging, sliding and other snippets of gestures and movement clips. A master and journeyman for interaction design is Johny Vino, bringing the industry into a new height of UX design.

"For me it's all about how humans interact with these strange surfaces". Calculation and timing is important he says, "it's like a science; it includes a strange type of psychology".

While his impressive track record for being a top designer on the digital networks like Uplabs and Dribbble, Johny tells Digital Computer Arts that he's much more focused on his craft and teaching others. Working for Healthtap, SYP partners, UXD Training, ZOHO, and Tekion, Johny boasts a vast portfolio that showcases not only client side work but also collections of side projects that are mainly targeted at teaching others advanced examples of Interaction Design (IxD). "The focus for me, is creating animations that make technology more human like". Premium Interaction Design, a collection on Dribbble, includes over 100 examples of animations that do just that, and has been viewed almost a million times.

Login Animation from Premium Interaction Design Collection

As the industry evolves, this fourth dimension and added layer of concept becomes more defined; more sophisticated. Johny is certainly leading interaction design in a way that is vital for products to become more enjoyable to use. Living between Bangalore, India, and New York, Johny has a unique perspective of different cultures and this is evident in his work. As we talk more about his process in idealizing, planning, sketching, and animation techniques, he brings to light many constraints and problems that he has to worth through. "I have many interests such as architecture, design, culture, fashion, etc. and each field has its uniqueness. But no matter which kind of product we are making, that product has to solve a problem for the user to improve some aspect of the their life". Expanding on this, we start from his beginning, an interesting story that shows how intense focus and specialization can create a reputation that is known globally.

  

In our research, you mentioned you started at the age of twelve, with paper sketching. Amazing. Can you elaborate about this time?

Yes sure. During my childhood days, I was a kid that thought differently from the other children. I thought deeply and had many ideas. When I was growing up, people weren’t interested to hear my ideas, so I started sketching my design on paper that immensely help me to reach the level where I am now. I sketch at the beginning of every project.

 

You’re from India is that correct? And you studied at Alagappa Chettiar College of Engg &Tech, Karaikudi. Tell us a little bit about what you studied, what this college life was like, and what the program was like?

Yes, I am proud to be from India. I studied in Electronics engineering. I feel those are memorable days in my life because my college completely transformed my personality and made me the person I am today. Also, it helps to find my early interests and strengths. I had started my career as a magazine designer for my college. So I began combining my Engineering skills and Design skills. Thinking about the technical details is something I still do. For example, I design for the wearable space which relies heavily on data and not a lot of room for design or transitions. It needs minimal interaction. I have worked on a project called HealthONE, which helps users access their health record through sensors and provides them results, displayed in a straightforward, clean way, in their native language. I completed a lot of ethnography research during this project, to understand the people's empathy and to find the correct solution for the different types of user-types in different regions. Below is my home studio, its for both work and school.

Were you working or freelancing at this time?

I was living in New York during this time, doing my Masters in parallel with freelancing. It's a great challenge for me to manage my time, though I enjoyed applying the theories I learned from school, and use them in the concepts I was doing for client projects. I am learning a subject called, "Service design" which greatly helps me to identify all the touch point of the user to make the whole UX design cohesive. I am currently working for companies like Healthtap and SYP partners.

Then New York. First, why the move to US? Secondly, how is New York as a home?

As I mentioned in my previous answer, I wanted to extend myself as an interaction designer who can design for the whole world, not just for India. Also, I want to understand multicultural problems and work with multiple types of user-types. My studies have helped me open up my mind and make me think in a broad perspective to solve different types of user problems. I see differences between my home, and here, but at the same time both homes have been the same for me. It's nice, because if I want to go back, in today's worlds it easy to book a flight and go.

 

This is my favorite quote you spoke about, “I have diverse interests - architecture, design, culture, fashion, etc. and each field has its uniqueness. Nevertheless, all the above fields have a common characteristic – The Problem of the User.” Can you elaborate a little bit about what this means and why you’re so passionate about it?

Yes, I have seen the people all over the world following the same "conventional" method. For example, still now so many people are confused which side to open commercial doors, to push or to pull. A simple example of bad design. In each field, people are obsessed doing the same thing, being comfortable with conventional methods, so I decided to make some changes which enhance the people life. I like to think new.

My board at work

Backing up even further and touching on your upbringing, how did creativity enter your world? Was there a set of influences within your family, school; did you have mentors?

I would say my MUM is my support; she always supports me to decide to follow my heart. When I joined as a designer, all my friends got good salaries but I wanted to choose the design profession because I loved the field. My parents hold and mentored me, they showed me how to improve myself and move further to the top.

 

Let's talk about freelancing for a moment. Your portfolio boasts projects for UXD Training, ZOHO, and more. Can you speak a little bit about this time? How long have you been a freelancer and why the change in career? How long did you work full-time before this?

I worked for two years as a Fulltime employee. I also started doing my freelancing projects to improve myself in design. One thing that I did to gain attention is start making concepts for those companies (Airbnb, Google, others). It has been huge in getting views and more clients. I used Behance to get these projects (and other graphic designs) out into the community. My first project I did for $2.

Amazon Tracking Application Idea

What is your process like? How do you start a project?

  1. Think of the design problem I’m facing. I try to find the best solution using my experience as a designer but I also always ask my associates, who can see the problem through another lens.
  2. Sketch my initial take on the problem and tape my inspirations on the handy whiteboard.
  3. Take sticky notes and jot down what are the problems I’m discovering along the way, and how to solve them through interaction.
  4. Do an initial UI design in Sketch. I take the rough layout I have drawn on the whiteboard, and then I start polishing the UI digitally.
  5. Initiate the interaction design using Principle with all the groundwork done by now. As you can imagine, this is the part I enjoy the most!
  6. Export the.MOV file from Principle and then import the.MOV to Photoshop. I crop the length, and finally, I get to export my prototype in GIF format.
  7. The only thing left to do is to publish the final result on Dribble, Behance, Uplabs! I usually submit once a day, and it always brings me joy to get immediate feedback from fellow designers. It keeps me motivated to submit more of my work, and it helps me learn what gets traction and gets users excited.

Please see some examples of user boards and journeys that I map out before jumping into the computer. These are the most important part.

Do you have anyone else that is working with you, under you? Next to you?

Yes I have worked with my college Juniors, to guide them to get good jobs. I enjoy teaching others.

 

Talking a bit about the Google Analytics Project, I noticed what was unique about this project was that the animations were focused on illustrations, not necessarily screens or UX dashboards, things you usually focus on. Can you describe what this experience was like?

Thanks for asking that, it was a great challenge to make the perspective animation on principle, because you can't make perspective vies in the principle app. So I took that as a challenge to make the illustrations animated. It was an excellent welcome to enter that space. I feel that it was a breakthrough to my portfolio.

Google Illustration and Pay Concept

Besides Google, what has been your favorite project to date?

My favorite project is Music app because I did lot of groundwork and innovative idea:

Spiral Play
Music Play

If you were to change one thing about Freelance what would it be?

I want to change my communication medium, it is hard for me communicate with clients through Gmail.

 

Premium Interaction design (IxD). You have a collection of Shots on Dribbble and Behance that showcase beautiful case-studies and imagery of mobile and web interactions. Can you talk about this project? Why did you do it? What was involved (AE? Client work?)?

It was for teaching and showcasing my skills only and did not involve any clients. Also, a lot of clients asked for these examples, but I don't want to sell them, I wanted to license them in my name. Those are projects that helped me to enrich my talent to the next level. Now everyone calls me an interaction guy because of these. It’s a good kit for beginner to learn interaction design.

Do you have plans for extending this, making it a website or elaborating on the how-to’s portion?

Yea, I am planning to make a youtube channel.

 

Similarly, with 100 Best Mobile App Interactions. You can tell that many of these scenarios are honestly from a different era, they speak to a future that is bright and beautiful. Can you also talk about this project here?

I don't think there are words to define these interactions, you have to just go see them. I have tried all types of interactions and this best showcases a good range. Because, I have a broad range of research for many of the examples here, these interactions were filled with different directions. I never want to assume things all by myself, so I always go the extreme users-cases and physically ask them questions and give these prototypes to them to test it. This 100 different interaction scenarios include failures and successes, but I intend to make solutions continuously whether it is right or wrong because only after user-testing can you know it's working or not.

 

If you were to change one thing about Interaction Design, what would it be? What could today’s current applications (mobile and desktop) be better at?

I would suggest not jumping into designing with view frames (rectangle - artboard) dimensions particularly being held to 1024*1024, 360*640. Come out of the square boxes; the world is so big; For example, You can make a table which is interactive, you can make a garden with a tree which interacts with you. So think of the daily environment we all live in and try to improve those things with interaction.

Second question on this topic, what do you see the future like for Interaction Design, Mobile and desktop alike?

I see the future of interaction is like I said before, it is not in a small rectangle. It will be how humans interact with the environment. For example, imagine if you sit on a chair with a table in front of you and your able to see all of your pictures, something that AR might be moving into.

And of course, what is the future like for you? What projects are you excited for?

This is the fascinating question. In my future, I want to move into environment interaction design which combines the interaction of the environmental like sounds, air, music, heat, soil with robot technology which works seamlessly. This will bring the things we use in our environment easier to work with and something that can take us back to our roots like jungle age where people are healthy and happy. I want to make any user a superhuman with my technology which interacts with the environment.

 

Also, you have 1Cor 10:31 in your profiles, Can you talk to this?

Yea, and thanks for noticing. I am a firm believer of Lord Jesus Christ. I pray everyday morning and ask God to give me an idea to make today, he always helps me and holds me and give me an idea. Without Jesus, I can't be here, in each and everything I feel the God to decide my path. So it’s a bible verses: "So whether you eat or drink or whatever you do, do it all for the glory of God." I always have a jealousy for the people that work for Jesus; I wish to be like those people, because Jesus also wanted to make the human life better. And empathy is essential in design, that Christianity taught me this. If you are doing proper research after some time, you will emphatically match to the people's lives, this will make you the best designer.

About this Project: We are a small group of designers that thought maybe its a good idea to start documenting some of the decisions that we make and why we make them