Udit Khandelwal
2+ of articles published
Critical Analyst / Storytelling Expert / Narrative Designer
Domain:
upGrad
Current role in the industry:
Director, UX Design at athenahealth
Educational Qualification:
Director, UX Design (Apr 2021 - Present): Leading the UX design for cloud-based services and mobile tools within the athenahealth Platform.Bachelor of Engineering (BE) in Computer Science from Thapar Institute of Engineering & Technology
Expertise:
Interaction Design
User Experience
User Experience Design
Usability
User Interface
Information Architecture
Certifications:
Certificate in Performance Leadership - eCornell from Cornell University
Executive Certificate in Management and Leadership from MIT Sloan School of Management
Certified User Experience Analyst (CXA)™ from Human Factors International
Adobe Certified Expert - Illustrator from Adobe
Certified Usability Analyst (CUA)™ from Human Factors International
Adobe Certified Expert - Flash Professional from Adobe
About
Udit is UX Director at Zivame. He has had extensive experience within the UX space while at Kaseya and Cisco, as well. Like any true expert, Udit writes about his learnings and ideas at notuser.com. Udit is based in Bangalore.
Published
Most Popular
6749
How Zivame’s UX Design Team Enabled Multiway Product Discovery
This is the first in a five-part Guest Blog series by Udit Khandelwal, UX Director at Zivame. If the users can’t find it, the feature does not exist! – Human Factors International (HFI) I first heard this quote in a training session at HFI back in 2012, and you will always find it resonating with my way of approaching UX. Product discovery is one of the most important aspects of any retail business, and if users can’t find the products you offer, they don’t exist. To enable seamless product exploration at Zivame, we developed a multi-way discovery strategy across our platforms. In this series of 5 articles, I will be covering levers used for featuring collections, product discovery and, offer communication at Zivame. This is the first article in this series, and here I will be mainly covering items under Ice Breakers from the list of levers given below: In This Series: Ice Breakers * Homepage Landing Cards Homepage Hero Carousel Featured Collections Category Masthead App Onboarding FitCode™ On Demand Heterogeneous Shop-Nav Shop-Nav Featured Image Offer Banner Explore Sticky Buttons in Shop-Nav Shop By Experience Recommendations Contextual More Like This Our Bestsellers You Might Also Like Perfect Fit Recommendation LookBook Hand-holding Landing Page Offer T&C Rule Based Offers on: Category Page Product Page Cart Checkout Notifications Mobile App Push Web Push Universal Notifications Marketing Email Transaction Emails Footer Marketing SMS Content Hooks Content Infusion Cards for Landing Pages Content Pages and Collections On Blog Product Infusion on Content Pages Intrusive & Desperate Conditional Pop-ups In-App Messaging * Covered in this article Each one of these serve a very specific purpose in the user journey and are used accordingly. Let’s take a look at them, one by one – while talking about the challenges in each case, and what we did to overcome the same. I will also talk about business metrics, wherever applicable. Check out our management programs to upskill yourself. Homepage Landing Cards Challenge 45% of the web traffic on Zivame comprises of first time users 40% of direct and organic traffic lands on Zivame’s homepage Most of the above users have very little clue about the breadth of the products we offer Solution Not having an open horizontal menu and going with a mobile-first hamburger navigation was a very well thought-through and user-tested approach we started following with our new stack. It came at a cost of not being upfront about our offerings. Hence, it became critical for us to communicate the same, right in the first fold. The cards shown below serve exactly this purpose. What’s interesting is that this approach was first conceptualised for the desktop, and later adapted for mobile, as shown below. In the desktop version, cards occupy the top real estate on the first fold, whereas in mobile, they are right below the hero banner due to vertical space constraint. upGrad’s Exclusive Product Management Webinar for you – How to craft GTM Strategy for a Product? document.createElement('video'); https://cdn.upgrad.com/blog/panel-discussion-on-crafting-gtm-strategy-for-a-product.mp4 Homepage Entry Cards and Hero Carousel Homepage Hero – Mobile When we were conceptualizing this, our executives envisioned it as follows: Nobody who spends 8 seconds on my homepage should go away without knowing that Zivame sells lingerie, apparel and activewear. – Shaleen, COO Zivame Explore our Popular Management Programs Leadership and Management in New-Age Business Post Graduate Certificate in Product Management Executive Post-Graduate Programme in Human Resource Management Professional Certificate Programme in HR Management and Analytics Executive Post-Graduate Programme in Healthcare Management Executive Management Programme in Strategic Innovation Digital Marketing and Business Analytics Certificate Programme in Finance for Non Finance Executives Certificate Programme in Operations Management and Analytics Global Master Certificate in Integrated Supply Chain Management upGrad's Job Linked Advanced General Management Program from IMT Ghaziabad Global Professional Certificate in Effective Leadership & Management Advanced General Management Program Strategic Human Resources Leadership Cornell Certificate Program Digital Transformation Cornell Certificate Program Executive Leadership Cornell Certificate Program Management Essentials Management Programs …and I think we’ve done a good job at achieving the same via design. The positioning of the cards make them unmissable and the titles along with links set clear expectations about the individual categories i.e., Lingerie, Activewear and Apparel. Moreover, the fourth card allows for enough flexibility to put meta items which deserve a seat on the first fold. P.S. This component is under development as I am writing this post, and will be released soon! (Also Read: Shaping User Experience at Zivame: A Product Management Case Study) Endeavour It is difficult to figure which 4 things will go in each card, because every stakeholder in the company is looking for prime real estate for his/her property! While data seems to be an easy escape route, where you could simply keep the most in-demand stuff on top, the business might have a conflicting direction. For example, Apparel itself contributes to merely 8% of Zivame’s revenue as of today, yet it occupies 25% of the top real estate. A cross-functional collaboration with a fair amount of moderation from the executives of the company should give you the right answer. As my product manager puts it: You have to be disproportionately kind to certain entities in order to ensure their disproportionate growth. – Vishrut Shukla, Sr. PM – Zivame Homepage Hero Carousel Challenge This is the next prime real estate and the property is visual. It needs to represent the brand and a strict visual design language needs to be followed. Top Management Skills to Learn SL. No Top Management Skills to Learn 1 Consumer Behaviour Online Programs Financial Analysis Programs FinTech Programs Online 2 HR Analytics Programs Online Communication Programs Online Effective Communication Programs 3 Research Methodology Programs Mastering Sales Programs Business Communication Programs 4 Fundamentals of Journalism Programs Economics Masterclass Online Programs Solution Frankly, this was an easy one to design, but a tough one to execute. We knew we were following big-bold-beautiful design language, and hence it was an easy decision that the banner must occupy 100% of the screen width and 100% of the remaining screen height. But that left us with 2 problems to be solved: On certain screen sizes, the banner would get cropped as we were going to use ‘cover’ algorithm. When the banner stretches all the way to the bottom edge of the screen, users might get an illusion that the page ends there and there is nothing beyond that. In order to solve the cropping issue, we defined the safe areas and tested it across multiple resolutions. After a few hits and trials, we were able to nail it. We placed a chevron at the bottom of the banner to give a visual cue to the users that there is more beyond the banner. To keep it clean we decided to make the navigation arrow unidirectional, but also gave slideshow cues by putting dot-based navigation. A heavy amount of cross functional collaboration went into getting up the right banner, with the right message up and stitch it together with the category page banners, keeping the user journey in mind. The above section displays an example screenshot, and below is how we defined safe area: Safe Area for Homepage Hero Banner Featured Collections Challenge Banners are good for grabbing attention, but in order to generate user interest and make users click with the right expectation, we need to tell them a bit more about the collection. However, real estate is limited and there is a lot of competition among different collections. The earlier design of Zivame’s Homepage for Mobile used to sport an accordion of collections where each collection had an array of 10 products followed by a “See More” button after scrolling all the way to the last thumbnail. Data analysis revealed that more than 40% users who interacted with the accordion clicked on see more. This reinforces the point mentioned above. However, we didn’t want to use accordion because it was non-visual and text heavy. Old Homepage – Mobile Loading too many product images upfront negatively impacts the page performance. For every extra second of page load time, conversion goes down by a whopping 7%. Our Top Management Articles Top 7 Career Options in Management To Choose [For Freshers & Experienced] Online Product Management Courses to Kickstart your Career Top 10 Career Options in Business Management in India 8 Crucial Business Management Skills Every Manager Should Have Future Scope of Management: Scope, Salary, Career Opportunities Career Options After MBA – Highest Paying Management Jobs 5 Key Skills Required for Successful Management Career & How To Achieve Those Skills? What is The Nature and Scope of Management? Importance of Management in Every Organisation – [A Complete Guide] Solution At the cost of an extra click, show the USPs as well as sneak peek of every collection. Apart from a product collage, we simply surfaced 3 critical pieces of information: Collection Name Description Signature Attributes This not only invoked interest in the collection, but also guides the user into a journey of product discovery with a set expectation. The product collage can be technically optimised to be returned as a single collage image rather than multiple product images. Again, this version has been partially deployed on the current site, and the remaining is being implemented as I am writing this article. Homepage Collection Banners (*in-progress) Visit Zivame Category Masthead Challenge Category pages are primary landing pages for paid traffic. Also, anyone who clicks on any of the collections/offer banners within the site, lands on a category page. Hence, it becomes crucial to stitch the user journey here and maintain the context. Broader the category, more difficult it is for the users to make a choice. Hence, for certain cases, we might want to narrow down the user journey to a more specific subcategory and subsequently to specific products. Certain categories are very special or new and the users need to be made aware of the USPs at the very moment that they land on the page. Solution The masthead consists of 4 main components. We came up with an approach where configurable components would take care of the use cases mentioned above: simply putting a banner in the masthead and relying upon the creative banners, shop by, filter/sort toolbar and offer communication to do the rest. I’ll talk about banners here, and will be covering ‘shop by’ and offers later. We designed 3 variations or templates for the category banners: Single Banner Carousel Split Banners Single banners work perfectly for narrow categories and talking about their USPs. Carousels and Split banners, on the other hand, are a great way to provide multiple banners within a limited real estate and are used to lead to subcategories. When promoting any of these pages, digital marketing & creative teams make sure that the marketing creatives speak the same language and use similar images to stitch the user journey together. Category Banner – Single Category Banner – Split Category Banner – Carousel Now just like the homepage hero banner, these banners occupy 100% of the width available, however, height is constant. Hence, in some cases (or resolutions) we end up cropping the banner from the right. So just like the homepage, we defined safe areas and the creative team was asked to follow the same while designing these banners. Below is an example of how we defined the same for a split banner: Safe Area Definition for Category Split Banner Caveat This is not a mobile-first design and, following graceful degradation, on mobiles we fall back to a simple banner, or a swipe-enabled carousel. There is no split banner for mobiles. App Onboarding Challenge You want to tell the users so much, but going beyond 4 cards during onboarding is an overkill. The space is limited, features are enormous, users don’t have time to read and despite all this, you need to make the app stick. You don’t know who is browsing: a novice or an expert, an explorer or a navigator; and you have to design a fit-for-all onboarding experience Solution Rather than thinking about what we want to tell the user, we started to think the other way around → What would users want to learn? With a quick dipstick research, we were able to figure users were mainly looking for answers to the following questions: What is this about? What can I do here? How to get started? What’s in it for me? How does it help me? So the problem was simply reduced to 4 screens that could answer these questions. Hence we zeroed down on the following 4 screens: What is it about? How does it help me? What can I do here? How to get started? The last screen is cleverly designed to promote the FitCode™ but the users are free to skip it and continue to shop. Caveats There are a couple of glitches, which we’re now correcting and I’d like to warn you about: The notification permission pop-up shows right on the onboarding screen. This is very irritating for the user and we are likely to get a minimal conversion here. What should be done instead – the notification permission should be sought after the occurrence of a certain event (say login, or order success, or accessing content etc). Web-engage messages (marketing popups) sometimes show during onboarding. Again, it’s a very bad experience and users are most likely to be non-receptive to any marketing messages during onboarding. We must take care that no pop-ups are shown on onboarding screens. FitCode™ Challenge Many women prefer buying from a physical store to buying online. One of the most common reasons for this is that they are not sure whether a particular product will fit them. They can’t try it online. Different women have different body forms and there is no one-product-fits-all when it comes to lingerie. Hence presenting them with the product that suits their body form and preferences is crucial. If you give them a form to fill their measurement and preferences, the drop-offs are high. Hence, whatever solution we come up with, needs to be effective. Solution Zivame’s Fashion Design team, along with the Product Managers, conducted extensive research, and deduced that women’s body types can be accurately described by bucketing them into 11 kinds of profiles. Club these profiles, together with the measurements and preferences, and you should be able to provide the right product recommendations to the users. We call this FitCode™, which is derived by asking the users a set of questions (FitCode™ Quiz). A version of this was designed, user tested, implemented and released on apps. While the users were getting the concept and responding to the quiz, there were 2 glaring issues: High number of drop-offs Some people thought the images that we had used to represent the profiles were creepy. We figured that the quiz was designed in a way where we were asking users the difficult questions first, and this approach needed to change. We needed to get the users invested by asking them the easier questions first, and then the tougher ones. We also got our creatives changed and made them more abstract. They weren’t creepy anymore. Take a look at the screens below: FitCode™ Quick Start FitCode™ Step 3 – Measure Yourself FitCode™ Step 4 – Describe Specifics FitCode™ Results and Recommendations Find Your Perfect Fit I hope you found this article informative and insightful. Study Product Management Courses online from the World’s top Universities. Earn Masters, Executive PGP, or Advanced Certificate Programs to fast-track your career. If you are highly intrigued by what you read, you can enroll in the Post Graduate Certificate in Product Management offered by upGrad. The certification program delivered by experts will help you kickstart your career to be a successful product manager.
23 Dec 2016
6850
Shaping User Experience at Zivame: A Product Management Case Study
This is a Guest Blog by Udit Khandelwal. “The website is amazing and the session was awesome! I would love to come back for another round!” – Deepika called out while leaving for home after going through a usability testing session at Zivame. From that moment, Zivame was always going be the first choice for Deepika – a proud homemaker and entrepreneur. What did we do to invoke such surreal emotions in people who shop with us? Explore our Popular Business Management Courses Leadership and Management in New-Age Business Post Graduate Certificate in Product Management Executive Post-Graduate Programme in Human Resource Management Professional Certificate Programme in HR Management and Analytics Executive Post-Graduate Programme in Healthcare Management Executive Management Programme in Strategic Innovation Digital Marketing and Business Analytics Certificate Programme in Finance for Non Finance Executives Certificate Programme in Operations Management and Analytics Global Master Certificate in Integrated Supply Chain Management upGrad's Job Linked Advanced General Management Program from IMT Ghaziabad Global Professional Certificate in Effective Leadership & Management Advanced General Management Program Strategic Human Resources Leadership Cornell Certificate Program Digital Transformation Cornell Certificate Program Executive Leadership Cornell Certificate Program Management Essentials Business Management Courses Well, we involved users at each and every step of product design. In my article How I Changed The Way Women Buy Bras Online I covered how we leveraged user research to discover a new way of shopping for bras. Here, I am going http://notuser.com/how-i-changed-the-way-women-buy-bras-onlineto walk you through the journey wherein we managed to test the design with real users, obtained real insights and implemented course correction. Read: Scope for Product management career and jobs Top Essential Management Skills to Learn SL. No Top Management Skills to Learn 1 Consumer Behaviour Online Certification Financial Analysis Certification FinTech Certification Online 2 HR Analytics Certification Online Communication Courses Online Effective Communication Certification 3 Research Methodology Certification Mastering Sales Certification Business Communication Certification 4 Fundamentals of Journalism Certification Economics Masterclass Online Certification The Game Plan Challenge The resources were limited, the scope was huge and we had to keep churning incrementally enhanced designs. Endeavour The entire website was supposed to be designed and developed from scratch within 5 months. The last month was already reserved for all the testing, deployment and stability-related activities. So we had no more than 120 days to design and develop the new Zivame experience. I had heard this saying somewhere: No shortcuts today; I’m in a hurry – Swiss saying … and I thought, it was just the right time to follow it. We needed a game plan that involved no shortcuts because we couldn’t afford to go down the wrong lane. Hence, we decided to do the following after our early research was over: Lo-Fi Prototypes: Refine the sketches until we were done discovering the loopholes and until we had fixed all the broken flows. Our Top Management Articles Top 7 Career Options in Management To Choose [For Freshers & Experienced] Online Product Management Courses to Kickstart your Career Top 10 Career Options in Business Management in India 8 Crucial Business Management Skills Every Manager Should Have Future Scope of Management: Scope, Salary, Career Opportunities Career Options After MBA – Highest Paying Management Jobs 5 Key Skills Required for Successful Management Career & How To Achieve Those Skills? What is The Nature and Scope of Management? Importance of Management in Every Organisation – [A Complete Guide] Formative Tests: Use paper prototypes to test with whoever you could,whenever you could, even if it was on the lunch table. Hi-Fi Prototypes: Develop a high fidelity interactive prototype, as close to the final product as possible. Summative Tests: Test it with real users and obtain real insights. Beta Tests: One final round of testing, on the actual product, before we handed it over to the world. Iterations: Every test delivered some good news and some bad news (which was good news). We had to prioritize fixing bugs and making enhancements for every iteration. Lesson Usability testing is an ongoing activity that needs proper planning, time and resources. Formative Tests Challenge The initial design was completely untested and development teams were waiting on us. We had to give them something solid, real quick. Endeavor Low fidelity prototypes work beautifully when you want to fail faster. They help you discover flaws in design at an early stage and designers themselves are very open to making changes in the raw design. We did the same at Zivame. Once we were done with white-boarding, we quickly moved on to our tools to create different screens on the computer and took prints to create screen flows. upGrad’s Exclusive Product Management Webinar for you – How to craft GTM Strategy for a Product? document.createElement('video'); https://cdn.upgrad.com/blog/panel-discussion-on-crafting-gtm-strategy-for-a-product.mp4 And then, we simply asked some folks from within the office (who closely matched our target persona Mahi Agarwal) to perform certain scenarios. Whenever they were stuck even for a bit, we knew there was a problem. More than often, they would even give us suggestions, which we took note of. We would then come back and discuss why the users were suggesting what they were, go to the root cause of the problem, and figure our own solution. Sometimes tests not only tell you what’s wrong with design, but they also reveal new opportunities. For example, it was during the formative tests we discovered that users were able to comprehend and interact with notifications. We took that as a green signal and design for a stronger, deeper integration of notifications. Lesson For testing, don’t wait for the final product; go ahead with whatever prototype you can afford and test with whoever you can find. Fail faster. High Fidelity Prototypes Challenge The website had more than 300 unique screens and screen-states. Putting together a click-through was a mammoth task. Endeavor We first set our goals and non-goals before building the prototype. This helped us reduce the scope of prototyping. eg. We wanted to test the new shop-by-experience feature, but were pretty sure we had followed best practices for the checkout, so we decided not to focus on that flow. Next, we evaluated 3 options for building the prototype: Flash – my personal favorite, I know I sound old-school! Marvel App – because everyone is going this way. Invision App – Marvel’s competitor. Now Flash was quickly ruled out because of the overheads involved. Marvel kind of worked, but had limited support for overlays, and my entire design was based on surfaces and overlays. Invision offered me better flexibility, so I went ahead with Invision. Lesson Scoping is critical; even for a prototype. Summative Tests Challenge The test had to be optimized to FAIL the design. Endeavour We decided to write down the script that we were going to use during the usability testing sessions. The critical piece here was to figure out exactly what to test and how. So I listed down my goals and non-goals, based on which I broadly figured out what was I going to test. Initial Mental Model – Expectancy Test Actual Usage – Free Exploration Test Navigation – Performance Test Affordance – Visual Affordance Test Task Flow – Performance Test Sentiment – Semantic Differential Process Once that was done, I quickly mapped a technique against each line item and then moved on to the modules that I wanted to focus on. After this I moved on to defining the task flow of individual scenarios. I didn’t write down the language of the scenarios as I didn’t want to sound stiff. I have shared the script below on Slideshare. View this on SlideShare Lesson Use a hammer for the nails, but a screw-driver for the screws. Recruitment Challenge Finding women (in India) who’d agree to participate in the testing of a Lingerie website. Endeavour We wanted women who closely resembled Zivame’s target persona Mahi Agarwal. We took to social media and made an announcement. We asked women to help Zivame in building a great shopping experience for women! A lot of women came forward and we received a good number of responses. Not only this, they also invited their friends to participate. And kudos to forward-thinking women like Deepika, Subha and Aastha, who went a step further and agreed to put a face to our participants. Deepika, Entrepreneur & Homemaker Subha, Blogger at dolphindives.in Aastha Chaudhary, Homemaker We were in a good position to screen and recruit our participants. Women who expressed interest, had to fill the participant recruitment form. After a quick screening, we shortlisted the participants and gave them a call to schedule the session with them. Lesson Finding real users isn’t that difficult. You just have to do it the right way! Suggested Reading Dragonfly Effect, Jennifer Aaker & Andy Smith Usability Test Sessions Challenge Talking to women about a website that sells bras. Endeavour On the D-day, we were well prepared with systems set up, printed copies of the script, the team was ready to perform their roles and the participants were to be greeted warmly. We started the sessions by making the participants feel comfortable. We began with some chit-chat and brief introductions. We emphasized how important their contribution was and asked them to not worry about hurting our feelings and give honest feedback. In order to avoid them sharing their bra size details with us, we made sure we told them to assume their size was 34C. I think they liked the idea. We made sure they believed: You are not being tested, we are! Invariably, every user would smile at this moment, and we knew, we had managed to make them comfortable. Throughout the session, we made sure, the focus was on the tasks (and hence on design) and not on the products. That’s when we would begin the flow (as mentioned in the PPT). We discovered some pretty interesting things during these tests. To our surprise, none of the users had trouble figuring the ‘shop’ menu, which was a big change from our previous design. However, users were confused when they reached the sub-menu and we knew it needed to be simplified (which we did later). We also discovered a basic issue with title bars of our surfaces. Users were facing difficulty going back and closing the surfaces. Again, we resolved this issue in our next iteration. One of the key findings was about the sticky buttons at the bottom of the surfaces. We realized that sometimes the button used to break the user flow as users were clicking on it without reading the labels or they were misinterpreting the labels. We found alternates to such situations. All in all, the users proved to be very helpful! Lesson Users are humans, if you treat them well, they will be very helpful. The Bug Bash Challenge We needed to make sure if the final product was behaving as designed and intended, and we were running out of time! Endeavour There is always a fair degree of difference between the actual product and the implementation. When the Zivame beta product website was ready, we wanted to make sure that the product was behaving as expected. We wanted to see if users were comfortable interacting with the UI controls we had implemented and wanted to see it working in the real world. So, we opened it up for all the Zivame employees, and conducted a 3 hour bug-logging Marathon, which we called Bug Bash. We issued a coupon that would work only on the beta website for 3 hours and asked all the employees to make use of the coupon and log whatever bug that they faced in the Bug Bash Form. We divided them into different teams and announced prizes for the top 3 teams. The plan worked and we received 223 responses from different teams. It took us 2 days to go through the entire list and figure which ones were genuine. Most of the bugs filed were duplicate or known issues, but we discovered 12 new bugs (of which 3 were related to UI). This gave us a high degree of confidence to release the beta externally! Zivame Bug Bash Responses Lesson Testing never hurts and it can be done at any stage. Kudos to the women, who helped us all along the way in building such a fantastic shopping experience at Zivame! Study Product Management Courses online from the World’s top Universities. Earn Masters, Executive PGP, or Advanced Certificate Programs to fast-track your career. Featured Program for you: Design Thinking Certification Program from Duke CE
12 Dec 2016