Collaborative Shopping

Company: Flipkart  •  Platform: iOS, Android  •  Year: 2015

cover.png
 

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

 
 
 

Objective
To create deeper engagement by bridging the gap between online and offline shopping.

Task 
Launching and evolving user-to-user communication through real time chat (1)
Launching user-to-seller chat with Flipkart's new design language (2)

Role
UX/UI Designer, Team Lead

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

Team
Akshay Rajwade & Harbani Malhotra (Product Management), Anubhuti Jain (Research), Varun Dhanda & Surabhi Wadhwa (Design)

 
 
 
 

My role explained

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

 
 

Understanding Online Shopping Behaviours

At the start of the project I 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 behaviours. Over the course of three months, we spoke to 103 Flipkart customers across 8 user study sessions. The research was carried out in three phases, each designed to inform the next.

  1. Validating the Problem
    The first couple of sessions were interview based with a focus on understanding our customers - their needs, motivations and frustrations. The main goal was to test our hypothesis and to investigate whether people actually need to collaborate while shopping. This helped us understand the challenges our users faced and the workarounds they employed while shopping online.
     
  2. Mapping the User Journey
    The next set of sessions focussed on defining task flows through offline A/B and multivariate testing. We used low fidelity wireframes to test feature level ideas such as combining 'Share' with 'Chat' vs. keeping them independent and entry point for chat and its positioning. This helped us translate our concept to features that addressed the customer behaviours we learnt about in phase one.
     
  3. 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'.
 
 
 
 
CS_TeamChat_Flow Doc-01.png

Task flows used for usability studies

 
 
 

Current 'jugaad'

Jugaad is a colloquial Hindi term for 'a makeshift solution' that signifies the use of creativity to solve a complex problem when there is nothing better available. Sharing products through shopping apps today is a broken experience. 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.

 
 
 
 
onlinevsoffline.png
 
 
 
 

The need to collaborate

We developed 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 like a camera or a laptop, from someone who understands the technical its aspects or is an expert in the field.
  • Gifting - User needs suggestions while exploring gifts for a common friend/family member.
  • Choosing between products - User can't decide between two or more Lifestyle products of the same category. 
  • Assurance - User needs feedback on high involvement/investment items, like a TV or a phone, from someone who is already using or has previously purchased that product.
 
 
 
wireframe.png

Initial user flow diagrams

 
 
 

Concept Development

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.

 
 
 
process.jpg

Discussion on FTUE (L) and verification flow (R)

 
 

I sketched out concepts and white-boarded flows 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 to scope out the functionality in more detail. 

 
 
 
workflow2.png
 

Setup and access flow based on whiteboard discussions (shown above)

 
 
 

Combining notifications with chats

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. 

 
 
 
 
 

Exploring the overall theme and brad

 
 
 

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 mocks to test whether a difference in alignment and/or colour plays a role in overall readability of the chats.

 
 
 
chatwindow.png
 
 

What we realised was that colour plays a bigger role in helping distinguish between sent and received chats. We also found that in the absence of colour and profile images, users were unable to identify their own chats (without reading the text) from the ones they had received in both left and left-right arrangements. We also learnt 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.

 
 
 
 

Introducing Ping

 
 
 
 

Finalising the Walkthrough copy

 
 

ASK YOUR FRIENDS

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

 

SHARE YOUR SCREEN

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

 

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.

 
 

Impact

Sep 2015 - Dec 2015

 
Metrica.png
 
 
 

Pivoting to user-to-seller communication

Flipkart launched Ping - a fun new way to shop with friends in August, 2015. Ping was essentially a chat feature that integrated social with shopping through user-to-user communication on the e-commerce app. 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.

 
 
usertoseller.png

Explorations for user to seller chat (Android) based on Flipkart's new design language.

 
 
 

What I learnt

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 considerible 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 time and energy on improving the core shopping experience.


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

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

  3. We tried to emphasise sharing on Ping by deemphasising 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.

  4. There were times when Ping felt like an app in itself when it should have been a 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.

  5. The Ping first time user experience was just plain cumbersome. By 2015, Flipkart had stopped accepting new social logins but linking your mobile number to your account was still optional. This led to more sign ups via email, leaving Flipkart without access to people's names, mobile numbers, profile pictures or social networks. However, in order for Ping to work we had to tap into existing social networks to populate the chat feature and increase user adoption. This required access to people's phonebooks and we ended up having to push everyone through a phone number verification process and subsequently ask for access to their phonebook. And if you managed to make it this far...we'd ask your for your name and to upload a picture. This was way too much work for a single feature!

  6. Our invite model sucked.
 
 
 
 

iOS9 inspired redesign

iOS 9 was realised 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 personalised 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
 
 
 
 
1new.png
 

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.

 
 
 
2.png
 

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!

 
 
 
3.png
 

MAKE 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 :)