Ian Crasta
Sr. UX Design Consultant
Made with

B2B E-commerce Sales Executive Application

Metro Cash and Carry, India

Introduction

Metro India approached us to aide them with the digital transformation of their wholesale B2B business, solving major pain points of their users and subsequently increasing their market share. The project was carried out in 2 phases:

- First, launch of the Customer Consultant tablet application as a beta test for the functioning of the platform.

- Second, launch of the Customer application and website to the public with all of the core features.

Project Background

Metro Group headquartered in Germany, currently operates in 750 hypermarkets across 29 countries. In India, Metro currently operates 24 wholesale distribution centres.

In India, its core customers include small retailers and kirana stores, hotels, restaurants and caterers (HoReCa), corporates, SMEs, all types of offices, companies and institutions and self employed professionals. It is built on a B2B business model which implies that only business customers can purchase at METRO.

Metro sells a variety of products ranging from FMCG and fresh produce, to clothing and appliances.

In order to have a further reach and ease the task of making purchases, the company decided to establish its digital store.  As a first step, Metro’s sales team would be using the newly developed application for their Permanent Journey Plans and Client Servicing processes.


Project Brief

To design a tablet application that aides Metro’s customer consultants with their day to day duties.

Target Audience

Metro's customer consultants that are part Metro's sales team.

Project Plan

B2B E-commerce Sales Executive Application

Design Team

  • 1 Lead UX Designer (Myself)

  • 1 Junior UX/UI Designer

  • 1 Creative Director

My Key Responsibilities

  • Organizing and conducting stakeholder discussions
  • Conducting primary research through user interviews
  • Research analysis
  • Architecture, user flows and wireframes
  • Usability testing
  • Project coordination between the Metro team, developers and designers
  • Design handoff and UI QA testing
  • Pitch design prior to onboarding the project

Design Tools

  • Sketch
  • Invision


Product Discovery

Stakeholder Meetings

The stakeholder meetings started with an outline of the platform followed by in-depth discussions of each module, feature and relevant process of the existing business over the span of 9 days. We also discussed the additions that they required as part of the newly designed system.

B2B E-commerce Sales Executive Application

Understanding the System

Through the stakeholders discussions, we were able to get an in-depth understanding of the key players in the system, how each of the target market segments were different, a broad understanding of Metro's sales strategies and the new business needs with respect to the project. 

Understanding Metro's target sales segments

Understanding Metro's target sales segments

B2B E-commerce Sales Executive Application

Secondary Research

We were familiar with regular B2C online stores such as Amazon, Flipkart, eBay and AliExpress, however it was important to understand what was unique to the B2B sales model and Food focused sales. We looked at platforms such as Amazon Business, Udaan, Alibaba, BigBasket, and Flipkart Supermart to understand the space better.

A persona derived through the user research

A persona derived through the user research

User Research

Goals of the User Research

  • Understand the existing routines and typical activities of Customer Consultants to increase our empathy for them
  • Identify their pain points to build empathy
  • Understand the 'selling' process that they undergo with their customers

Process

Prior to starting the interviews, we created an outline of questions and pointers (based on the goals) that would serve as a guide during the interviews.

We then interviewed 12 CC's and Team Leads over the span of 3 days, recorded these sessions and later documented the findings.

The User Journey Map below illustrates most of our findings and the pain points gathered. Post our brainstorming sessions, we added ideas to the UJM.

Larger preview here: https://www.plectica.com/maps/9I3OAN30H

Larger preview here: https://www.plectica.com/maps/9I3OAN30H

Design

Information Architecture

After analysing the information we gathered, we created the IA of the application ensuring that simplicity and quick navigation.

B2B E-commerce Sales Executive Application
Customer Landing Screen

Customer Landing Screen

Wireframes

Combining insights from our research (elaborated in the UI section) and the IA, we designed medium fidelity wireframes for each task. We created multiple iterations of key elements such as the article cards, category navigation, etc. and weighed the pro's and cons of each approach before narrowing down to a select few. Simplicity and quick navigation was a key factor in finalizing an approach.

We decided to use wireframe prototypes for our first test.

Customer Landing Screen

Customer Landing Screen

Visual Design

During this phase, I worked closely with the Jr. UX/UI designer ensuring that the UX thought process and interaction concepts were carried forward.

We worked extensively on the visual design creating a visual language that integrated well with Metro's branding while ensuring intuitiveness and legibility.

How we addressed pain points and business needs through our design

How we addressed pain points and business needs through our design

B2B E-commerce Sales Executive Application

Usability Testing

We carried out 2 usability tests with 5 users each, many of whom were part of the initial interviews.

For the first test, we created a clickable wireframe prototype. The goal was to test the first few interactions on the app, from login to viewing a customer and navigating to another customer.

For the second test, we created a clickable UI mockup prototype. The goal was to test the if the CC's were able to easily identify variants, packs of variants, slab prices and their interactions with the Add quantity functionality

Findings

  • Difficulty in back navigation from 2 levels within a customer to the customer listing screen when a second order needs to be placed.

Learnings from this Project

  • Converting an existing complex running system was one of the most challenging and interesting aspects of this project.
  • Planning and successfully executing the user research and usability testing phases of the project.
  • Understanding the constraints of Hybris by SAP