video1.0<iframe src="https://www.loom.com/embed/0d757cefac30408dbefd5d246bbff077" frameborder="0" width="1866" height="1399" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>13991866Loomhttps://www.loom.com13991866https://cdn.loom.com/sessions/thumbnails/0d757cefac30408dbefd5d246bbff077-1721070197609.gif582.391Name: Arpit Agrawal Prototype 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 Join me as I walk you through my UX design project of redesigning the Google Chrome and incorporate with micro-interactions. Transcript Hello 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. micro interactions are the most common type of user interaction they basically inform users when an action is successfully completed or when an operation is unsuccessful when i think of it , It's somewhat like curb cut effect in accessibility feature so getting into the prototype here the user flow starts from an already opened google chrome tab the first redesign element which i added here is the most obvious, the address bar. added a quick change tab functionality- now you can directly jump to the adjacent next or previous tab just by a single tap. it makes it quick, easier and simple to change to the next tab also 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) Moving on to the tabs section which allows you to navigate to your desired pool of tabs Check out the smooth interaction I've added here to transition to the tabs screen Here 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. I'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) moving on, let's switch tabs (and don't forget to check out the transition, pretty smooth right!) Now let's head to the 3rd and second last design iteration, the more options menu. I've added a smooth interaction here as well here 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. also added a close button for more user accessibility Now as we move to our last iteration i.e the settings screen, check out this cool transition. So here, notice something different? Yeah, it's more clean, easily readable and approachable. I'll explain how firstly 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. second 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. A 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. and 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) It 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. and 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. there are many future iterations possible, which I discovered during this project. for 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) During 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. During 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. I'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.