Blog_Banner_Asset
    Homebreadcumb forward arrow iconBlogbreadcumb forward arrow iconProduct Managementbreadcumb forward arrow iconHow Zivame’s UX Design Team Enabled Multiway Product Discovery

How Zivame’s UX Design Team Enabled Multiway Product Discovery

Last updated:
23rd Dec, 2016
Views
Read Time
16 Mins
share image icon
In this article
Chevron in toc
View All
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.

Ads of upGrad blog

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?

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

…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

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

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:

  1. Collection Name
  2. Description
  3. 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:

  1. Single Banner
  2. Carousel
  3. 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:

  1. What is this about?
  2. What can I do here?
  3. How to get started?
  4. 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:

  1. 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).
  2. 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
Ads of upGrad blog

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.

Profile

Udit Khandelwal

Blog Author
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.
Get Free Consultation

Select Coursecaret down icon
Selectcaret down icon
By clicking 'Submit' you Agree to  
UpGrad's Terms & Conditions

Our Popular Product Management Course

Frequently Asked Questions (FAQs)

1What is meant by multiway product discovery?

Product discovery refers to the way a customer, who has arrived at a customer touchpoint for the first time - learns, understands and retains information about the product that the firm offers, enough to ensure that they will then immediately remember the brand the next time they have a repeat requirement. It should be the aim of all product managers to ensure that this happens within the first 8 seconds of the customer’s experience at the firm’s various customer touchpoints. In case the firm offers more than one product, the goal is to make this happen for all of them. This is basically what multiway product discovery is about.

2Are there courses specific to product management for e-commerce firms?

No, there are no courses specific to product management for e-commerce. A few less scrupulous firms may claim so, but it would be wise to check their credentials before jumping in. Good programs for product management are not so specific, as it would be a disadvantage to the students. The aim of enabling one to become a good product manager is to ensure that they have the necessary skills and knowledge to do a good job independent of industry choice, which would in turn enable them to switch between industries at later stages of their careers.

3How do I become a product manager without an MBA?

To be a good product manager who can crack the toughest of interviews, the basic domain skills you need are a fair understanding of product technology, excellent knowledge of product design and designing customer journeys, and business management skills. Thus, it could be daunting for an individual who has sufficient technical skills and work experience, but no understanding of business management such as financial planning, budgeting, project management, marketing, strategy, and so on. The best way to develop these would indeed, involve pursuing an MBA. However, thanks to the demand of skilled product managers, one can also get into these roles by pursuing part time courses in product management.

Explore Free Courses

Suggested Blogs

Project Manager Salary in India in 2024 [For Freshers & Experienced]
903708
Wondering what is the range of Project Manager Salary in India? Every company wants to have a well-skilled project manager to handle and manage their
Read More

by Dilip Guru

24 Jan 2024

How Much CSPO Certification Cost in 2024? Is it Worth it?
2551
In this rapidly evolving landscape of project management, staying competitive and up-to-date with the latest methodologies is essential. This is where
Read More

by upGrad

25 Sep 2023

How Much PMP Certification Cost in 2024? Is it Worth it?
5159
The Project Management Professional (PMP) certification symbolises proficiency, expertise, and devotion in a growing professional landscape where proj
Read More

by upGrad

24 Sep 2023

Average Product Manager Salary in India in 2024 [For Freshers & Experienced]
41881
Wondering what is the range of Product Manager Salary in India? Are you a product manager? Or are you planning on transitioning to this role? Then th
Read More

by Jitesh Goel

19 Sep 2023

PMP Certification Eligibility Criteria & Requirements In 2024
1901
Adding an emblem of authenticity and credibility to your project management skills, a PMP certification is among the most prestigious certifications f
Read More

by Keerthi Shivakumar

18 Sep 2023

Top 30 PMP Example Questions & Answers for 2024
1342
The Project Management Institute awards the Project Management Professional (PMP) as the world’s most renowned project management qualification.
Read More

by Keerthi Shivakumar

18 Sep 2023

Why Should You Consider Product Management as a Career Option?
10200
Introduction We often come across the title Product Manager and wonder how this role differs from other PM roles. Product Management is a vital funct
Read More

by Jitesh Goel

12 Sep 2023

Product Manager Job Description
899248
The concept of modern Product Management first took shape at Procter & Gamble in 1931. The company wanted to become a brand-centric organisation,
Read More

by Sriram

28 Aug 2023

What is a Project in Project Management? Definition, Features, Types & Examples
Organisations initiate projects to fulfill strategic demands and attain adequate profit margins within a limited period. Each project is planned under
Read More

by upGrad

08 Jul 2023

Schedule 1:1 free counsellingTalk to Career Expert
icon
footer sticky close icon