This article is a brief takeaway from The Makers Summit 2021 by Inc42 Plus, India’s largest product conference. Watch all the sessions & learn from India’s top 1% product leaders at Makers Academy.
This article is a brief takeaway from The Makers Summit 2021 by Inc42 Plus, India’s largest product conference. Watch all the sessions & learn from India’s top 1% product leaders at Makers Academy.
The lifespan of a technology in use in the industry is outpacing the university curriculums faster than ever before. It’s not that universities are not cognizant of the problem, but there isn’t much that they can do about it. Curriculums take some time to get redesigned and by the time they are in, they already start to lose their edge. Therefore, universities mostly keep their curriculums limited to the basic fundamentals.
“Some expertise comes only from the industry when you work there,” says King Sidharth, who is in charge of Design, UX and Product at Headout. Speaking at The Makers Summit 2021, Sidharth touched upon the problems that designers face in real job environments, exposing the audience to 3 mission-critical aspects of product development and design i.e., how to measure design, how products are built and how the design systems need to be extensible.
Simulation Of Real Job Environment
Colour, typography, layouts, micro-interactions, shadows, animations and visual communication are things that are easy to teach at a design school, said Sidharth in a riveting session that saw one of the highest engagement levels from the audience. These topics have been heavily researched upon and there is a vast body of work which is already integrated in the curriculum. But problems faced in the industry by a designer are rather dynamic in nature. You can’t expect clarity at the very moment the project begins in real life. University curriculums are rather very structured. You do step 1, then step 2 and so on ,and there are gatekeepers at every step of the way and you can only move forward when you finish these steps in the order, added Sidharth.
It’s hard to emulate business scenarios in a design school setting because marketing, engineering, customer support, sales — all of them have stakes in the design process. Design has its implications from the moment the customer starts engaging with the product to the user acquisition by the business.
“Company is not an infinite resource. Wherever you are employed, they have limited time, limited money and limited engineers and therefore you have to prioritize and pick your battles, and again, which can’t be emulated at the college”, King Sidharth commented. Optimising between the business prospects and user experience, feedbacks, repercussions of decisions made by other teams is hard to emulate in the college environment.
He further stated that the specific problems that one would face in the work setting are hard to anticipate while learning in a design school. “Oh this is amazing looking and exciting and everything, but will this make a difference to the business? How do we know that the user actually cares about this, and is this even technically feasible? Will it scale? What if the design gets broken if someone did a quick fix or someone did an unintended change? How do we measure the impact? Do we need to put it through manual testing?, ” probed King Sidharth.
It’s really hard to understand what will work in design commercially but Sidharth helped the audience by breaking down the process of making feasible designs into three questions:
- How do you measure your design?
- How are the designs built by the engineering teams?
- How to scale your designs?
We dive deeper into these with easy to relate examples ahead.
Measuring Design
Designers understand research methods well but when it comes to data, most of them struggle to understand it, King Sidharth remarked. But what does data even look like for designers?
Let’s say we have a landing page which describes your offering and has a call to action to buy. It also has a fallback CTA button called ‘learn more’ because not all people will click the ‘buy now’ button at first. In order to analyse the efficacy of the design in this case, we use event based analytics. In this case, Page loading and button clicks would be the events, and button text, button color and device attributes like types of device, OS, browser, IP address, location etc are properties.
To help us capture these events and properties, professional software solutions like Mixpanel and Amplitude can be used who are also the sponsors of the makers summit 2021. These come with some default properties like the device attributes mentioned above, out of the box, and customizable properties that help in getting the user story right for individual cases.
Also, these tools also help us understand the series of steps that users take to reach the desired call to actions. And these individual events can also be marked with desired properties and analysed to see that at what stage users are dropping off. Sidharth introduced the idea of funnels. Funnels basically map the users at every step of the way until they take a desired action.
Then we can use this data to optimise our landing page. Different KPIs and optimisations for the same would also come in the picture here. For example, the drop off rate in the above example would tell us how many users who had been targeted through a marketing campaign have bought the product.
These metrics help us further probe whether design meets the deliverables and help us take decisions that can drive up the value delivery. It’s better that designers know how to understand and interpret analytics to discover problems and validate solutions. Because data is extremely valuable and is very telling about user behaviour. It helps us understand the relationship between different types of performance data and qualitative data to capture the full story of users.
Factoring In Engineering For Design
“So many designers will create amazing designs, only at the end engineers will reject it saying it is not feasible,” observed Sidharth. Therefore, it is extremely important to understand how products are built so that many of the feasibility issues are addressed at the early stages.
Giving the audience an overview of what front end and back end mean, Sidharth explained the need to understand different roles that stakeholders play while building the product.
To put it simply, the front end is the user-facing part of the app and users can interact with it. The backend (or “server-side”) is the portion of the website one can’t see. It’s responsible for storing and organising data, and ensuring everything on the client-side actually works. Backend takes care of the user authentication, payments and automates the business logic. Designer portfolio websites are largely built using front end technologies without having much to do with the backend.
Sidharth gave an example of the Twitter app to help the audience visualise these ideas better. Front end and back end, also synonymous with client side and server side continuously talk to each other using the internet. Understanding that the internet can be unreliable and that most parts of the emerging world doesn’t have access to the internet speeds we are used to, can help immensely while designing experiences for the user.
When the twitter app loads for the first time, one can see the skeleton state of the app. It reassures the user that the app is working. But in case the user is browsing the app for the second time, they will not see it as the browser or the device would have already cached the necessary files to load the app faster. Cache is a temporary local storage which is somewhat like stocking the necessary items from a local grocery store instead of directly taking it from a farmer. “It saves time in your cooking. CDN Servers do the exact same thing for you. While you would still need to cook, the time taken to get your ingredients would be minimised,” added Sidharth.
Meanwhile, the device would have requested your account details from the servers. This data would include people you follow, their tweets and the timeline that Twitter would show you. You wouldn’t have fleets appear upfront as the app prioritises a certain set of information through the APIs in order to render in time which is the responsibility of the front end so that you don’t get frustrated and quit the app.
Think of APIs like people who hold information that is necessary to get their job done. Some would give you the information pretty quickly and some would take their time. App can’t block its way through by waiting for the data to come and then render it on the screen. Therefore, all of this happens asynchronously. The parts of the app are rendered as the data comes. As designers therefore, it’s important to understand this bottleneck and factor in the function of time while designing,” added Sidharth.
The effects of slow loading pages is very well documented. Users are more likely to drop off a landing page if the page isn’t optimized for speed. Users can detect the delays to the order of 1/10th of the second as per the NN Group which cites the basic rules of human perception of time. So the effects of a slow loading pages are quite instant. Incremental improvements in speed do pay off.
The best way to go about understanding these ideas could be to use your superpowers as designers like empathy. You could deploy a mental model of having front end and back end being people and talking to each other to get the job done.
Scalable Design Systems
“You need to understand how engineering works to come to systems eventually,” explained Sidharth. According to him some of the design feasibility issues could be addressed by hacks, but it makes it more likely that these design fixes will fizzle out over time. This is why Sidharth puts the spotlight on the design system.
“User interface looks easy because it’s not. Designers spend countless hours figuring out the user interface. So that it looks easy to you with all the complexities hidden”, said Sidharth while introducing the audience to the importance of design systems and how even senior designers fail to understand that their systems are heading towards failure.
He gave the example of Instagram stories to understand the design systems better. Usually one would say that stories at the top are just a series of circles without realising how those circles which are also infinitely scrollable depict different user actions and system choices.
“It is easy to make circles and make them equidistant. Designing keeping the states in mind makes the system extensible,” he added while recounting how he and his team at Headout have been thinking about the ideas of states and variations for the UI components even before Figma introduced a feature recently to manage and create them.
Now there are various choices you can make about the stories as a user. You can create a new one, watch other people’s stories or hop onto instagram live. There is also certain UI logic that has been taken care of for you. Like the stories that you watched could be rewatched until they are available at the end of the top scroll. There could be multiple lives going on, that also need to be represented.
Choices made by the user in these cases are the states of the element like seen and unseen states of the stories, and choices enforced by the system are variations like whether someone is live, whether you have watched your own story or not.
There are also aspects of motion design incorporated into the stories, when you tap on any of the stories you haven’t watched yet, there are red dots which take a round around the circle while loading the stories. These interactions are so seamless that we hardly even notice them.
Instagram also has its design philosophy and style guides. User interface logic is also part of the design system itself. For example, whenever the user is typing in an input field, the input needs to be validated for some cases. A constant stream of error messages as the user is typing is too annoying. In this case, the engineering team needs to be onboard with the flow of interaction logic so that they get the user experience right. Apart from this, localisation of the content for a new demographic of the users also needs to be factored in the design system. Factoring in all the ideas mentioned above makes a design system truly scalable.
Whether it is asking questions from the data that unlocks the insights that take the product to the next level, or speaking in engineers’ language to optimise designs for performance and then making the product truly scalable, these skills are definitely a must have in a designer’s toolkit to take their careers to the new heights.
