{"type":"video","version":"1.0","html":"","height":1399,"width":1866,"provider_name":"Loom","provider_url":"https://www.loom.com","thumbnail_height":1399,"thumbnail_width":1866,"thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/0d757cefac30408dbefd5d246bbff077-1721070197609.gif","duration":582.391,"title":"Redesigning Google Chrome App with Micro-Interactions part 1","description":"Name: Arpit Agrawal\nPrototype Link: https://www.figma.com/proto/yK6iGH59DMqCxXj7qRH2ID/Chrome-Redesigning?page-id=4014%3A1582&node-id=4129-2330&viewport=522%2C352%2C0.18&t=ifTAAjIaDanCXGcm-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=4129%3A2330\n\nJoin me as I walk you through my UX design project of redesigning the Google Chrome and incorporate with micro-interactions. \n\nTranscript\nHello everyone, I'm Arpit Agrawal and today I'm here to take you guys through my UI/UX design project which is - redesigning google chrome app and incorporating micro-interactions.\n\nmicro interactions are the most common type of user interaction\nthey basically inform users when an action is successfully completed or when an operation is unsuccessful\n\nwhen i think of it , It's somewhat like curb cut effect in accessibility feature\n\nso getting into the prototype\n\nhere the user flow starts from an already opened google chrome tab\n\nthe first redesign element which i added here is the most obvious, the address bar.\n\nadded a quick change tab functionality- now you can directly jump to the adjacent next or previous tab just by a single tap. \n\nit makes it quick, easier and simple to change to the next tab\n\nalso shifted the share button inside the address bar, which is where it makes the most sense (because now it is obvious that we are sharing this web address/webpage)\n\nMoving on to the tabs section which allows you to navigate to your desired pool of tabs\n\nCheck out the smooth interaction I've added here to transition to the tabs screen\n\nHere I've added a search button, now but before starting to redesign this, in my research phase, i found this that in the IOS app there's a search feature on the tabs screen which makes sense as many a time a user like me has a lot of tabs open and it's easier to navigate through a search function rather than scrolling way down.\n\nI've added a big add new tab button which is of the same size as of the other tabs, and it makes it obvious that will allow you to add a new tab (Gestalt's principle of similarity)\n\nmoving on, let's switch tabs (and don't forget to check out the transition, pretty smooth right!)\n\nNow let's head to the 3rd and second last design iteration, the more options menu. I've added a smooth interaction here as well\n\nhere I've shifted the upper buttons (like forward, bookmarks, downloads & reload) to the section where address bar is originally present, because if you check out the current status, these controls are a part of the drop down menu but are still overlapping the address bar, which makes the address bar unusable and making this change here just makes the whole interface more clean and not overlapping.\nalso added a close button for more user accessibility\n\nNow as we move to our last iteration i.e the settings screen, check out this cool transition.\nSo here, notice something different?\nYeah, it's more clean, easily readable and approachable.\nI'll explain how\n\nfirstly i've divided these sections into a cards format, which makes the the interface more easily scannable. It also makes it easy to jump to the section you require to go through.\n\nsecond I've added icons to the options, On the surface, icons might seem like playful creations, but it makes it easier for the users to understand the option without even reading the text (and humans are visual creatures) again it makes the page easily scannable and the user can jump to his required setting options easily.\n\nA small redesign of the sync setting, here i've added a quick toggle to directly switch on/off the sync, but to manage every option you can still click on it and tweak it according to the need.\n\nand the last iteration here is the search bar, like seriously it would be so easy to filter through all this heirarchy of options if you can just type the required option (which might take you a couple of clicks & a cognitive load of remembering every option inside every group)\nIt would take me a lot of time to check each and every option to get to my desired location, specially if I'm new to the app.\n\n\nand with that we have come to an end. throughout the design process one of my goals was to make the user experience more rich, smooth & obstacle free. These are some of the iterations which i believe would not only make the user interface more fun but it will make the product more accessible and usable.\n\nthere are many future iterations possible, which I discovered during this project.\n\nfor instance, one is adding a drag gesture on the address bar above to change tabs, we can use small dots (like the ones in instagram's carousel posts, to depict that there are more tabs you can scroll to)\n\nDuring my research i went through numerous web browser designs across both platforms (ios/anroid). which helped me in my ideation process to make this app more fluent and easy to use. \n\n\n\nDuring the course of this project I got to learn about micro-interactions in UI and it led me to a deeper dive into understanding micro-interactions, it's importance & how to create & use them to make a memorable UX.\n\n\nI'd like to thank arakoo.ai for this opportunity and it was a great learning curve for me in my journey to be a UX designer."}