Chat | Design Portfolio

Flipkart Ping — a collaborative shopping tool which facilitates user-to-user communication

Objective

How might we bridge the gap between offline and online shopping?

Company

Flipkart (2015)

Role

Team Lead, UX/UI Designer

Skills

User Research, Usability Testing, Concept Development, Task Analysis, User Flow, UX Writing, Interaction Design, Visual Design

Team

Anubhuti Jain (Research), Varun Dhanda & Surabhi Wadhwa (Design)

Flipkart is India's leading e-commerce marketplace with products across 80+ categories and over 100 million registered users. In 2018, Flipkart was acquired by Walmart at a valuation of $22 billion.

My Role

As team lead, I managed and led the design for the collaborative shopping experience across the iOS, Android & Windows platforms from January 2015 till its launch in August end.

Research + Strategy
I partnered with one product manager and one researcher to gain customer insights that would help define the product.

Ideation + Concept Development
I collaborated with another designer to define user flows and product features that were later adapted for specific platforms. I developed and shared the design language, visual elements and content strategy with other designers to ensure parity across all three mobile platforms.

Scope Planning
I prioritized features while working backwards from launch in order to effectively balance business goals with customer needs given the aggressive timelines and engineering constraints.

Design Execution + Delivery
I executed the interface design for iOS. I created final mockups and design specs to hand over to the development team and coordinated with them to ensure functional correctness of the deliverables.

Leadership
I drove white-boarding sessions with my product manager partners and presented work to top management through various stages of the product cycle to ensure that all stakeholders were on the same page. I oversaw the translation of the design and product features across all platforms.

Quickly pull up recently browsed or previously saved products through in chat sharing options. Share with your friends for real time advice.

Share a browse page without losing your applied filters or share your order confirmation page to brag about your new purchase!

Share your screen

Drag. Drop. Shop.

Drag and drop any product you see on the app directly into your most recent chats. Just tap and hold to activate.

Ask your friends

Introduction

Key Features

Flipkart launched Ping—a fun new way to shop with friends in August, 2015. Ping is a chat feature that integrates your social network with online shopping via user-to-user communication.

Problem Setting

Offline vs. Online Shopping

Shopping is fundamentally a social experience. We shop with our friends and family. We bargain, we haggle, try on different outfits, laugh about our purchase, we pay the money. Online shopping (fig.1) however, is an isolating experience. It leaves several core, user-stated and latent needs unmet. There is a need for real-time feedback and a network of known people who can be accessed for on-premises collaboration.

Figure 1: Online shopping (L) is isolating whereas offline shopping (R) is a social experience

UX Research

Understanding Online Shopping Behaviors

At the start of the project we didn't have a clear idea of what collaborative shopping would look like online or how we were going to solve for it. Without any pre-existing insights, I partnered with our researcher Anubhuti to gain a better understanding of online shopping behaviors. The research was carried out in three phases, each designed to inform the next.

3 months

100+ customers

8 sessions

Validating the Problem

The first two sessions were interview based with a focus on understanding our customers —their needs, motivations and frustrations. The goal was to test our hypothesis and to investigate whether people actually need to collaborate while shopping. This helped us understand the current challenges our users faced and the workarounds they employed.

Four sessions focussed on defining task flows through offline A/B and multivariate testing. We used low fidelity wireframes (fig.2) to test feature level ideas such as combining 'Share' with 'Chat' vs. keeping them separate or the entry point for chat and its positioning. This helped us translate our concept to features that addressed the customer behaviors we learnt about in phase one.

Mapping the User Journey

Formative Usability Studies

The last two sessions were task based. We presented users with click through prototypes and gave them different scenarios. Users were asked to think out loud while we gave them tasks like 'buy a surprise gift for a friend's birthday' or 'shopping for a road trip'. This helped us uncover problems in our existing flow and refine the user experience.

Figure 2: Task flows used for usability studies

Findings

Current Flow

Online shoppers share screenshots or product URLs on third party messaging apps to involve their friends or family in their purchase decisions. Millennials prefer sharing product screenshots on WhatsApp or Facebook groups followed by a phone call to elicit an immediate response from their friends. Non-millennials are more opinionated and less likely to involve others in their online purchase decisions. Most rely on product reviews, online research and an exchange of emails, while some use Pinterest and public wishlists to share products with family members.

User Scenarios

The Need to Collaborate

We developed five key user scenarios based on information gathered from the user interviews.

Occasion
User needs help in putting together outfits for a particular event such as a wedding, or a beach holiday.

Low familiarity
User needs recommendations for electronic products, such as cameras or laptops, from someone who understands the technical aspects or is an expert in the field.

Gifting
User needs suggestions while exploring gifts for a common friend/family member.

Decision-making
User can't decide between two or more Lifestyle products of the same category.

Assurance
User needs feedback on long-term / high investment items, such as TVs or refrigerators, from someone who is already using or has previously purchased that product.

Figure 3: Initial user flow diagrams

Ideation

Aligning Stakeholders

I think the biggest challenge I faced while working on this project was getting the design and the product teams on the same page. At some point during the research phase, user-to-user chat became a business mandate. As a champion of user goals it was difficult to compromise on the experience and work backwards from a fixed launch date. Between the aggressive timelines and engineering estimates there was no scope for design to evolve and so we spent a ridiculous amount of time debating every design decision.

I sketched out concepts and white-boarded flows (fig.4) with my product management partners to ensure that both teams were aligned and involved in making product-design decisions. Concepts agreed upon were then translated to design. I started by creating workflow diagrams (fig.5) to scope out the functionality in more detail.

Figure 4: Whiteboard discussion on FTUE: first time user experience (L) and verification flow (R)

Concept Development

Understanding Context

Flipkart had been sending its customers marketing (price drop alerts etc.) and real-time order related notifications. Both push and in-app notifications lived in the notifications drawer inside the app. With chat coming in, I was becoming increasingly uncomfortable with the idea of customers having to check notifications on two separate locations in the app, especially considering that Flipkart was primarily an e-commerce product and not a social network. I decided to take a step back and relook at our notifications model.

We had already planned for user to seller and user to Flipkart (customer service) communication in phase two of collaborative shopping. I realised that the current 'Notifications' model was nothing but a one-way communication channel between Flipkart and its customers. With this in mind I decided to create a combined message centre for both notifications and chats where eventually all three channels of communication, namely user to user, user to seller, and user to Flipkart (CS), would take place.

Figure 5: Setup and access flow based on whiteboard discussions (fig.4)

Prototyping

Challenging Convention

The initial designs we had explored for the chat window had both the sender and receiver chats aligned to the left, unlike a traditional chat where your own responses are always aligned to the right. We felt that by adding profile images next to the chats we had eliminated the need to create a distinction through alignment. We were also going with the assumption that having both chats left aligned would further enhance readability considering that most languages are read from left to right and that is how our eyes are trained to move. But before challenging conventional UI pattens I wanted to validate our hypothesis through offline multivariate testing.

I used static mockups (fig.6) to test whether a difference in alignment and/or color plays a role in overall readability of the chats.

Figure 6: Left aligned vs. alternate chat bubbles with and without color demarkation

I found that color plays a bigger role in helping distinguish between sent and received chats. In the absence of color and profile images, users were unable to identify the messages they had sent from the ones they had received in both the left aligned and left-right alternating chat bubble arrangements. I learned that by keeping received chats stacked on the left and sent chats on the right, users were able to focus better on the chats they had received and were able to read through them much faster.

Figure 7: Finalizing Walkthrough screens and UX copy

Metrics

Impact

Sept 2015 - Dec 2015

Pivot

Seller Chat

Ping ran a good run for a period of 11 months, after which we decided to pivot from user-to-user to user-to-seller communication and focus on rebuilding our core shopping experience. I will get into the reasons as to 'why' a little later.

Figure 8: Seller chat screens with suggestive text

Reflection

What I Learned

Sometimes it's better to kill a feature for the betterment of the overall product. Flipkart is primarily a shopping app but this past year it was starting to lose focus and Amazon gained a considerable amount of its market share. Even though Ping had a lot of potential, we had to take a step back and make the hard call of discontinuing user-to-user chat and refocus all our resources on improving the core shopping experience.

Ping was trying to compete with other social networks but our value proposition was weak. The first version of chat was just not meaty or unique enough for users to break their existing habit of relying on other social apps.
For real-time communication, people are more likely to engage in conversations on platforms where they already have friends who are active. People are also less likely to check a shopping app multiple times a day.
We tried to emphasize sharing on Ping by deemphasizing sharing on other apps. Some stakeholders felt that restricting third-party sharing would increase user adoption of Ping, and at one point, we stopped allowing users to share outside the Flipkart app completely. Unfortunately, by doing so, all we managed to do was piss people off. Ping was designed to making sharing easy for our users and we failed to put their needs first.
There were times when Ping felt like an app in itself when it should have been an add-on feature. With four onboarding screens and separate brand name, Ping never really felt like a part of Flipkart it and failed to provide a cohesive shopping experience.

Revisit

Redesign Concept

iOS 9 was realized in September 2015 and two of the biggest design changes included the introduction of a new typeface, San Francisco, and a pressure sensitive screen technology known as 3D Touch. I took this as an opportunity to revamp the visual language for Ping and make the overall experience lighter and more intuitive. The other cool thing I wanted to do was leverage the 3D Touch technology to simplify product sharing and make it accessible across the shopping experience. I also made other functional improvements such as:

Showing online status for contacts – Engagement

Enabling support text labels on actionable icons for new users – Usability

A personalized first time landing screen instead of a generic empty state – User adoption

Chat windows with pre-exposed list of media that can be shared – Value proposition

Allowing participants to 'like' a product shared in a (group) chat - User experience

Start a conversation

See all your friends who are already on the app. Say hi to start a conversation or create a new group.

See who's online

Access all your conversations in one place. See who is online and get real-time shopping advice.

Ask your friends

Can't decide what to buy? Ask your friends without having to leave the app. No more copy pasting links or taking screenshots.

Share with ease

Share recently viewed or saved products directly from your chat window or use '3D Touch' anywhere on the app!

Making decisions together

View products recommended by friends. Collaborate on gift ideas for family or help your best friend plan outfits for her wedding.

Shop together

The '3D Touch' menu allows you to buy shared products without having to leave your chat.

This iOS 9 inspired redesign was a self initiated project and never saw the light of day. I enjoyed working on it nonetheless :)