Product Design at IMG

Intricacies of design, collaborative working and much more

Darshan Kumawat
IMG IIT Roorkee
9 min readDec 26, 2018

--

The case of the frustrating door handle.

Should I push or pull the handle?

Ever been in a situation, wherein you can’t decide whether to push or pull the door or run against a glass door?

These embarrassing and sometimes painful (A study has been done on walking through glass door injuries) experiences are called bad designs. A good design saves users from these situations. Here, the push side of the door can have a flat handle which cannot be held to pull or no handle. On the other hand, the pull side can contain a slender handle.
Thus, we made a small design change to solve this simple problem.

About

When I say design, the first thing that might come to your mind is simply, something that is pleasant to look at, right?
But that is just the tip of an iceberg that you came across, it is far more than what it is visible. Design deals with your behavior and psychology. In other words, It’s not just your eyes but your brains too that interact with an app, or software or a door.

Design was never about the final product it is a whole imprecise and iterative process of problem-solving, visualizing and providing a rational solution balancing out both the user needs and business constraints. Moreover, it is about understanding people’s need and crafting purposeful solutions to cater to those needs.

Design is everywhere from tiny pins to the handles, to buildings and architecture. It has various disciples from Product( concerned primarily with the relationship between products, systems and those who use them), Interaction(creating engaging interfaces with well thought out behaviors), Interior, fashion to designing automobiles, video games and software interfaces.

To simply talk about a few, a fashion designer is one who brings in all the popular, stylish fashion trends into the market. They research the current fashion trends, sketch out and create things around it. An industrial designer works to improve the design, function, and engineering of the common mass-produced items, an interior designer’s job is to enhance the interior and make it safe, functional and beautiful.

Now let’s come to the field most explored here at IMG i.e. Product Design, which is about identifying the market opportunities and devising solutions to the most basic problems. Product Designers work for the users’ satisfaction and help the company grow by providing their customers their best service. They put themselves into their customers’ shoes, understand their present need, build products, websites, brands, experiences around it and then finally test them for the best possible solutions.

Creative Product Design Process

Be it a new product development or redesigning an existing solution, a systematic design process is always followed. It helps to convert an idea into reality, helping and guiding the team to form a better product. The Design Process varies from project to project and designer to designer. Every Designer has his own way to describe the process but the fundamentals never change. Let us go through the four major steps followed during any design process

1. Defining the problem

The journey of a product begins by defining the problem and its vision. In order to find the right solution, it is imperative to identify the right problem. A right problem statement provides a clear vision for the product and the insights on the entire user lifecycle. Thus, it is very important for all the team members to have a clear understanding of the problem they are going to solve helping them stay focused on their final goal and move forward in the right direction. To define a problem the team must figure out answers to the following questions:

  1. Who are our end users?
  2. What problem are we going to solve?
  3. How do we intend to solve?
  4. What are we going to achieve through this?

2. User Research and Analysis

Good user research is key to designing a great user experience.

The foundation for a design process is formed when we empathize with our actual users and try to understand their behavior, needs, motivations and how they go about performing the tasks which they intend to. Therefore, having a good quantitative and qualitative research data helps to validate decisions at all the stages of design. Where qualitative data helps to understand the user behavior, motivations, and opinions, quantitative data helps to quantify the variables and get a generalized opinion of a number of respondents.
Researchers use many techniques like user interviews, online surveys, market analysis to gather all these data.

Once the research is completed, insights are made out of it. Based on the data collected an empathy map is laid down and the personas are build to understand the target audiences’ goals, motivations, and pain points.

Personas are the fictional reference characters made on the basis of data collected from user research. (Picture Credits to Jdwuhao)

3. Ideation

This is the phase where the team members brainstorm and discuss all the possible solutions to the target problem. Each and every idea that the team comes up — flawed or correct, is noted down. These are again discussed in detail on each and every minute detail, use cases to finally narrow down to only a few important ones. Sometimes rough diagrams and sketches are used to communicate the whole idea to the team.

Based on these ideas user journeys, flow maps and information architecture are made so as to plan the structure and organize things into subgroups.

4. Developing the interface

Based on the information architecture and the user flows a rough pen-paper sketch is made to simply get an idea of the information flow and placement of the elements. Which is then further refined into a high- fidelity wireframe.

Iterations are made to the wireframe itself based on the feedback collected from testing and now it’s time to add all the visual elements like typography, colors and finally turn all these grayscale frames into pixel perfect, colorful static mockups. All these mockups are further used to make an interactive prototype which is then tested upon some of our sample users and product stakeholders to report any discrepancy.

Here’s the design ready for developers to take it ahead!

Building up of final mockups in Figma

Thus we defined the problem, empathized with our users, brainstormed ideas and finally built a fully functional and aesthetically beautiful product that solves the problem.
Now to understand this design process better let us quickly walk-through the development process of one of our channeli application that is ‘Slambook’.

So this brilliant idea bubbled up in one of our regular design meetups. An idea to create a platform wherein a junior can share all his glorious memories with a passing out senior or vice-versa. We went through a lot of discussions and brainstorming sessions, to give this vague idea a better picture and eventually set a solid vision for the whole design team to work on.

Defined the Problem: Design a web application wherein juniors can share photographs, scribble words or can answer to some of the preset questions to their seniors, making this experience somewhere similar to that of filling a ‘slambook’.
Research: By now we all had a clear understanding of our goals and the strategies to follow ahead, we moved on to the research part.
We had conversations with some of our users and noted down their opinions and further expectations with this app. We also went through some of the current popular applications which work on a similar concept to understand their flow, functionalities, and the existing features that worked well with them.
Now that we’ve collected all the data, we started making insights out of it. So while going through the interviews we discovered a lot of new things like

1. Most of our users do not open the app section of channeli (Platform where all these applications are deployed)very frequently.
2. The fact that they welcomed the idea of making this experience similar to that of Slambook made us confirm our assumption.
3. Most of them have been using social media for a very long time so they are aware of all the basic and high functionalities of such applications.

Ideation: Next, we all sat down to brainstorm ideas based on all the research data collected above. We made a list of primary and secondary features which were finally narrowed down to few important ones for our MVP(A minimum viable product (MVP) is a product with only a few initial features). Keeping in mind both our users need and some underlying constraints we decided on not to make this application too complex for our first launch, so we further discarded some of the features like setting up a leaderboard( which had categories like ‘the most caring or loving senior’, Ghissu, Machau etc etc :P), setting privacy to a users’ profile, making a photograph/slam public etc. But at the same time, we wanted an engaging experience for our users so we introduced an important feature named ‘invite’ where a user can search and send an invitation for others to fill his slam or send photographs and to our surprise, this feature worked really well!

Next, we set the architecture and made user flows which helped us in visualizing our users’ journey while completing a particular task.

A userflow made using Flowmap

Hi-Fidelity Wireframes

Further, we made few pen-paper sketches and turned them into hi-fidelity wireframes.

Final high-fidelity wireframes ready to be turned into mockups

Hi-Fidelity Mockups

Now here comes the final look of our product with all the visual elements added to it. To make it easy for developers to understand we made a clickable and interactive prototype which was the final deliverable from the design team.
Check the prototype here.

Final mockups with all the visual elements

The Developing team worked hand in hand and while we were into the design process they were mostly done with their part. So with no further delay, the product was launched in the lab itself for testing. Within a few days, all the bugs were reported and resolved both from the design and dev side. Finally, after going through a rigorous testing phase the product was ready to be launched.

Conclusion

Starting right from observing the real-world needs to developing a fully functional and aesthetically beautiful experience that cater to those needs is what we call as DESIGN.

--

--

Darshan Kumawat
IMG IIT Roorkee

Product Design Intern at Flipkart | Undergraduate IIT Roorkee