Revamping the Distributor experience @Pay1

Please Note : Due to confidentiality reasons, I cannot share the bulk of my work. Additionally, certain images/ deliverables have been obscured to preserve confidentiality. Thanks for your understanding!

Problem Background

Pay1 Distributor application is a specially designed application for any individual who is into distributorship business in India. It helps in managing day to day business with ease and by accessing features like invoice management, collecting payments, managing salesmen, maintaining credit and collection records etc.

But recently, Pay1 had received plenty of customer issues and had a growing demand from its customers for a mobile platform. The Distributor application, was launched ages ago, and had become an epitome of bad user experience, filled with jargons and usability issues, which resulted in distributors (users) not using the panel to its full potential.

Role & Responsibilites

UX Designer contributing to:
  • Researching the problem
  • Sitemapping
  • User Flows & Task Flows
  • High-Fidelity Designs
  • Prototypes
  • User Testing
  • Hand-off Flows

Timeline

12 Weeks (April 2022 - June 2022)

Team

  • 3 UX Designers
  • Product Team
  • Engineering Team

Outcome

Complete redesign of the old system into a new and responsive web application that streamlines various financial activities for the distributors including payments, wallet, verification/validation, insights, profile sections and more.

Approach

Understanding

People, Processes & Platform

Firstly, we had to understand how the old platform was limiting the distributors from completing their tasks efficiently.
Since at this time of the year, we had limited reach to the distributors, hence we had to rely on other means. Therefore, we reached out to various teams - marketing, product, customer support, engineering to get an overview of the problem.
Since the platform's sections were divided amongst different teams, it was difficult to communicate and discuss all the functionalities with a single team. Therefore, I created a detailed sitemap of the existing platform to flesh out all the details in one place. This helped in visualizing the plethora of links and sub-links in a visually cohesive format to help in recognizing the issues with the current information organizing.
Screenshot of Sitemap of existing platform

Optimizing

Removing Redundancy

After various discussions with different teams, and looking at web analytics of the usage of different features of the platform, a decision was made to simplify and remove:
  • Duplicate or redundant task flows & information
  • Unused features & sections
This strategic move aimed at streamlining the user experience and optimize platform performance. By eliminating unnecessary complexity, user engagement and satisfaction would increase. Moreover, the data-driven approach ensured that the focus was on resources that are most frequently used and valued in the platform. This simplification process was not just about removing elements but it was about refining the core functionality to better serve the users' needs as it would lead to faster load times, easier navigation, and an overall more intuitive interface.

Restructuring the Information Architecture

Optimized Sitemap, User Flows and Task Flows

After identifying the various unused features & sections and duplicate or redundant task flows and information, we proceeded to creating a new version of optimized sitemap and user flows for the new version of the product.

This comprehensive process was done in close collaboration with stakeholders including product managers and engineers to ensure we were making informed decisions about what to keep, modify, or remove. We carefully mapped out each existing feature and user journey, evaluating its importance and effectiveness in meeting both user needs and business objectives.
Screenshots of new version's Sitemap, User Flow & Task Flow

Designing

Responsive Design

With the new flows clearly laid out, we then proceeded to creating the new design for the platform. Since the platform was not responsive previously, we also had to strategize layouts and design to make the new version responsive.
Therefore, we took a mobile first approach, where we first designed for mobile viewports and gradually proceeded to designing for desktop views. This approach was also influenced by the growing customer need of a mobile platform.

The designs were then prototyped and were subjected to 2 rounds of guerilla usability testing where we tested it with few distributors (users) and some internal team members. This was done as distributors were hard to get a hold of at this time. Thereafter the feedback from the tests were incorporated into the design iterations.

Delivering

Developer Handoff Flows

Then we created detailed hand-off flows for the developers, where we fleshed out all the edge cases, and details in the new flow, so that different teams can see and assess the new design. This documentation process was crucial in ensuring a smooth transition from design to development, greatly reducing ambiguity about the designs for other departments and stakeholders. This process which was newly introduced in the company, reduced design-development revision time by 36+ hours, as the need for meetings with various departments about the interaction patterns, edge cases and other design rationale was greatly reduced.
Interested to know more about this project? Feel free to get in touch

View other projects