How Zivame’s UX Design Team Enabled Multiway Product Discovery (Part 1/5)

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 *
On Demand
Recommendations
Hand-holding
Notifications
Content Hooks
Intrusive & Desperate
* 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.

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.

Homepage Entry Cards and Hero Carousel
Homepage Hero – Mobile

When we were conceptualising 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

…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

 

Visit 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.

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 hit 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%.

(Also Read: How Product Managers Visualize Data)

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


I hope you found this article informative and insightful. In the next 4 articles to come, I’d be covering more levers that we used for product discovery viz. on demand, recommendations, hand-holding, notifications, content hooks and, intrusive & desperate. Subscribe to keep reading!

The following two tabs change content below.
Udit Khandelwal
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.