Magesh Ravi

Magesh Ravi

Artist | Techie | Entrepreneur

A self-taught UI/UX designer, full-stack web developer and passionate business owner. Lives in Tamil Nadu, India.

Zyre Redesign

Customer Dashboard

Objective

Redesign the CRM tool to be faster, contextual and user-friendly.

Research & Analysis

Background info

UAccount is a fin-tech company based in Sheffield, United Kingdom. Zyre is the CRM tool developed in-house for use by various departments within the company.

Preparation

I spent a good few days playing around all the functionalities of the CRM tool trying to understand various aspects like,

  1. Different types of users (roles) using the CRM.
  2. Different views and workflows for each role.
  3. The critical workflow for each of the user roles.

As one of the in-house developers, it was easier for me to understand what was happening under the hood and how much of redesign will I be able to make without requiring back-end changes.

Target audience

Zyre was used daily by various departments like customer service, finance, compliance, financial-crime, tech support, etc. But it remained the most important for customer service and financial crime teams. These two teams contributed to approximately 80% of requests served by the CRM. Improving the system for these two teams meant improving the system by 80%.

Drawbacks with the exisiting design

The CRM tool felt very slow. Partly, this was due to the flaws in the UI design. The lack of information hierarchy was the most important cause.

Original UI

Above: The original design for customer profile page.

#1: Long scrolling pages

Scrolling through long pages slowed down the customer service team. Often looked up information like the customer's accounts, password resets, login activity etc. were located below the fold. Page scrolling had become an inherent step in looking up information.

#2: Deeply nested pages

The most important and often looked up data were nested two or three levels down from the customer detail page. Most customer service calls were related to accounts, cards and payments. Yet the typical page flow to see this information is as follows:

  • Customer profile > Accounts > Cards
  • Customer profile > Accounts > Payments

Design

Solution

So, here is the result.

Icons

I also designed a few icons to better highlight the various events in activity log.

login-successlogin-failedsec-qnsec-qncard-actcard-actcard-actcard-blockcard-unblockcard-damagedcard-lostsec-tokensec-tokenpasscode-successpasscode-failedpasscode-reset

Tools used

Figma

Time to completion

5 days

Reception

People in the customer services team loved it. The then team lead exclaimed with joy when she first saw the design. Later, she mentioned to the CEO that the redesign would "improve the team's productivity by 10x".


Feel free to like this project on Behance to show some appreciation.
To hire me for your next UI design project, say hello on Twitter or Telegram.