The Problem / Objective:
Zoho CRM’s initial UI was designed in 2006, during which the focus was on building up features and functionalities to match the competition. The User Interface was basic with less focus on visual appeal and Interaction. So I was assigned the task to improve the User Experience with the following goals :
- Make Zoho CRM to look modern and visually appealing to all.
- Break down all complex CRM processes into easier processes / configurations.
- Make it an engaging CRM product with better user experience which can make the users happy. Happy users = More revenue.
- Make Zoho CRM as an easy-to-manage CRM for a CRM Administrator.
- Zoho CRM should make the potential CRM evaluators into Customers. IOW, the product should sell by itself.
ITERATION 1 of 3:
The Solution:
The first iteration (Codename : Juggernaut) focused on making a visual design change to the current user interface. Additionally some experiments were conducted to see the feasibility of various ideas. Our customer study and interaction with potential evaluators revealed a lot of ideas to work upon.
Some of the customer feedback on existing UI were :
- “Too cluttered on a small screen laptop. Sales men on the move find it difficult to navigate.”
- “More than 14 modules, but only 9 are shown in the tabs. Difficult to access the hidden modules”
- “Give me a search that functions like Google Search. Your current search options are clumsy”
And some of the solutions considered for first iteration are:
- A visual make-over. Something fresh and easy to look at.
- More white-space to improve readability and reduce clutterness.
- Google like search box.
- Grouping relevant CRM modules (For ex. SALES -> Leads, Potentials, Accounts, Companies, Email)
- CRM Admin friendly tools / links on top (Configurable through SETTINGS)
- Removing the left-column tools altogether and make more real-estate for small screen laptops.
Below is the sample screenshot of Version 1 showing the LEAD module’s details page.
Some observations from User-Evaluations:
- Users were happy about the new visual appeal.
- CRM Admins loved the new customization options.
- The new User Interface successfully removed the “Cluttered Look” feedback.
- Overall positive feedback was much higher than expected.
- Users preferred the Recently accessed list to be available readily in a better way.
A few of the Experiments:
ITERATION 2 of 3:
The second iteration focused on improvising Iteration 1’s user interface with additional enhancements like on-spot editing, dynamic tabs etc, and aligning the visual design with ZOHO’s design theme.
And some of the ideas considered for second iteration are:
- A blue-gray color theme.
- Adaptive User Interface that adjusts according to the screen resolution / media.
- Readability enhancements in DETAIL view.
- Social media integration with LinkedIn, Twitter, Facebook support.
- Recently accessed list to be shown in a better / prominent way.
Changes implemented
The color theme was changed as shown in the image, and the top header was enhanced with Auto-Adjusting, Auto-Populating tabs which will dynamically appear depending upon the real-estate.
Some observations from User-Evaluations:
- Showing / Hiding sections in detailed view was received very well. Over half of the evaluators found it handy.
- Auto-adjusting tabs solved the tab visibility to some extent, but did not help in low-resolutions.
- Our new study revealed that people liked less contrast, context highlighted sections of the user interface.
- User engagement was found to be unsatisfactory. Prime reason being – many clicks, and page loads.
ITERATION – 3 of 3
The final iteration focused all our efforts to take bold design decisions, break some rules and follow new rules. This proved to be a major positive hit and the GEMSTONE iteration is rolled out to select Enterprise edition audience. Efforts are being made to improvise the whole user experience to the new level.
Some rules, ideas picked up / dropped are :
- Go for fixed-width layout (1280×720). 67% of our users used less than 1280×720 resolution to access Zoho CRM. Fluidic layout increased mouse-movement rate in large / wide screen displays.
- Less is more. Show only what is needed. Hide or remove things that are non-contextual or rarely used.
- Contextual highlighting, reducing colors.
- Less page loading, use pop-up dialog style UI patterns.
- Complex configurations? Design the UI such that it hand-holds and guides the user along the flow.
- Re-writing the back-end to accommodate a lot of design changes on the front-end.
Some observations from User-Evaluations:
- More than 90% of the people did not notice any interaction problem with fixed-width layout. Users with wide-screen display appreciated the new approach.
- Switching to “Less is More” was favored by users who were earlier hard-critics of the existing User Interface.
- Readability has taken a negative hit, which is being fixed.
- People liked the micro-pop-up user-interfaces. The “performance is slow”, comment was not received as many operations were carried out using AJAX without page re-load. The new framework handled all such works flawlessly.
A few of the Experiments:
