UX / UI
STRATEGY
WEBSITE
CRM SaaS INTERFACE RE-DESIGN
CLIENT
CRMNEXT
OVERVIEW
CRM Next is a top global CRM solution platform, with the goal of bringing high-quality salesforce automation to major Indian banks. Since its inception, the platform has been highly adopted by customers but had low usability due to extensive features and workflows. We were entrusted to do a complete design overhaul of the platform UX/UI and also introduce innovative features. There were almost 30 major modules that were re-designed and tested regularly with customers through demos. We would be looking at the Analytics Explorer, Dashboard Studio, and Widget Studio module for this case study.
MY ROLE
Researched and designed old and new features for CRM portal
Developed and maintained a design language across their omnichannel webapp and ios app
Design for accessibility of senior/aged users
PROJECT DURATION
1 year
PROBLEM STATEMENT
Analytics is a major component of a CRM system. It helps with monitoring and operations metrics for individual CRM users and teams. The existing Analytics and Dashboard Builder was glitchy, not user-friendly, unattractive, and did not give freedom for data modeling for the users.
Discovery: Identifying stakeholders and best practices
After looking at our competition and thinking about how our business uses the platform, it was clear that we needed to tweak it to fit different roles and functions.
PRODUCT AND COMPETITIVE BENCHMARKING
Image L-R: Dashboard Designers for Sisense, MS Power BI, and Google Analytics
INSIGHTS
After competitive analysis, we concluded:
The Designer module needs to have drag and drop, responsive, and intuitive navigation
Simplify language using clear and concise labels and instructions, avoiding technical jargons
Design consistency with new components, allowing customization for user-preferences.
Role-based access and personalization for efficient workflows
USER TYPE FEATURES
Who are our users?
The requirement was presented for two types of users
-
Data Analyst: Users could access both Analytics and Dashboard Studio, and model data that reflects on dashboard.
-
Marketing Manager: Users who could access only Dashboard Studio to pick out charts and widgets for their marketing metrics
Studios
Analytics Studio
Users can import model datasets and create robust analytics for customer and business success.
Dashboard Studio
User can build customized dashboards through charts and widgets for showcasing relevant data points.
Defining
Proof-of-Concept: Only Analytics Studio
How does the Designer Module look for Analytics?
At first, we created a Dashboard Builder embedded in Analytics Studio.
User-flow in prototype format for Analytics Studio
What we learnt...
The idea was to have proof of concept of user flow and design module.
Other functionalities we proposed in the user flows were:
-
Giving Dashboard Categories for particular types of user needs.
-
Editing the dashboard details - Name, access, etc.
-
Adding Data Sources and Data sets to the dashboard
-
Inserting new charts and preset charts
-
Modeling chart data and extensive control over the appearance/style of the chart
-
All the basic design functions such as
-
adding text, image,
-
copy/paste,
-
align/arrange,
-
undo/redo
-
refresh/view/print
-
-
However, we could not distinguish users and separate analytics from the dashboard. We however did give access restrictions.
-
The data modeling was still relatively nascent and basic. It needed to be more powerful.
OUR APPROACH
NAVIGATION
Variable Features: Dashboard Designer only
How can we incorporate separation of features for users?
For an easy separation of Analyst and Marketing Manager users, we created a common application of Dashboard Designer that had analytics embedded for Analysts only. There were several iterations of user flows between the initial idea and Idea 2, including visual grids.
Image L-R: Analytics for Data Analyst: Chart style, Chart Data being extensive
Image L-R: Dashboard for Data Analyst: Chart Data Filtering , Saving multiple charts as widgets
Image: Dashboard Designer for Marketing Manager (No Analytics)
User Flows
Below are a prototypes of different user flows and details that were foundational.
Cons:
The control over data and customization of style was still basic for Analytics Designer.
The designer module was limiting in format for both analytics and dashboards.
Adding new functions was confusing to visualize
What we learned...
-
The Grid System was beneficial for selecting charts and snapping to the grid.
-
Toggling between the dashboard and the analytics of charts was easier.
-
The style and functions of data in Analytics were tight and moulded into the Dashboard designer's format.
-
Too many functions in the toolbox above.
-
Global filters were highly evolved and had excellent use cases. However, they were not needed for Analytics Designer.
-
The landing pages did not give an idea that the Data Analyst user could use Analytics Designer.
FUNCTIONALITY
Completely separate Dashboard and Analytics Designer
How can we create optimum functions for designers?
Learning from the earlier design, we realized that we needed to create two different mooules for the designers. This would ensure enough visual space for data modelling and stylization the designers in equal capacities.
Image L-R: Landing page for Analytics Studio, Analytics Designer with new features (calculate dimensions)
Image L-R: Landing page for Dashboard Studio, Dashboard designer having better information architecture
What we learned...
-
User access was easier with the separate studios.
-
Iteration resulted in better visual language for both the designers.
-
Toggling between the analytics of a chart and the dashboard it resided in was tough.
-
Information architecture resulted in cascading data with a purpose.
-
Could now create a base for modeling data at the level of competitors.
Nearing the finish line...
DATA CONTROL
Robust merging of datasets
How can we expand the data control by users?
We modified Analytics Designer to become a more robust and complex data modeling experience for data analysts. This included logging into external data sources, merging and filtering the raw data, and calculating new dimensions out of the datasets.
The data and charts were separate and analysts could make multiple charts out of the same datasets. This was now called Analytics Explorer.
Analytics Explorer
Video: Adding Data Sources to the Analytics Explorer
Video: Data Modelling with two datasets
Video: Using filters for dimensions and creating multiple charts
Dashboard Designer
We cleaned up the dashboard designer to have a similar format to Analytics Explorer. The functions remained the same but had better usability now.
Learnings and outcomes
Setting the Style, Language, and Interactions:
While our module was just one part of CRMNext's revamp, it played a pivotal role in establishing the design language for the entire product suite. It served as a prototype for consistency and coherence throughout the SaaS ecosystem.
Creating designer modules for SaaS products is a dynamic process requiring a fine balance between innovation and user-centered design. In this reflection, we explore our experience designing modules for CRMNext amid constant iteration, feedback loops, and changing business requirements.
The Iterative Nature of Design:
Our work was marked by continuous iteration, as each version of the module served as a step toward an improved user experience. This iterative approach allowed us to adapt to evolving user needs and preferences.
User-Centered Design:
Despite budget constraints preventing usability tests, CRMNext's regular client demos provided valuable user feedback. This commitment to gathering insights from real users ensured that our design decisions remained rooted in their needs.
Adapting to Business Requirements:
Business requirements continually evolved, demanding an agile design approach. Our work was never truly finished, as we adapted to shifting objectives and strategies.
Explore other projects
