Making vTiger CRM Look and Feel Beautiful We at Neev have always been a huge supporter of Open Source Software. Many of the Neevites actively contribute to. Like I mentioned my previous post about the lack of active participation of the UI and UX community in Open Source and how that has resulted in most of popular applications with a bad User Interface and a terrible User Experience. So after my discussion with the UX team, two of our budding members Paul and Karthik, tried to come up with a makeover for vTiger one of the most popular CRM systems out there. Below are some of our redesigns and the philosophy behind why we made these changes. Navigation Tree:
Neev Information Technologies Pvt. Ltd.
www.neevtech.com
sales@neevtech.com
Dashboard:
Neev Information Technologies Pvt. Ltd.
www.neevtech.com
sales@neevtech.com
1. A dashboard is meant for users to see valuable information at a glance. vTiger’s dashboard completely defeats this purpose. They follow a very primitive method of displaying charts where a user has to either scroll up and down or click on the page nation to see the reports.
2. The best fix is to utilize all the space we have. And we did just that. We compressed the charts, made them look pretty and organized it such that all the charts are visible on a single screen. Be it sales figures or leads, this dashboard now provides the user all he needs to know at one go to plan his activities.
3. Instead of having action items as text links, we added icons on the right to refresh a graph and edit it.
Neev Information Technologies Pvt. Ltd.
www.neevtech.com
sales@neevtech.com
Calendar:
Neev Information Technologies Pvt. Ltd.
www.neevtech.com
sales@neevtech.com
1. He Calendar is another page where lot of white space is wasted. The header, tabs and navigation bars use up half the screen, forcing the user to scroll down to even see the calendar. We compressed all that to the top allowing the user to focus on the main calendar.
2. Secondly having icons and disabling them is just bad UX. Display icons only when required. Why would we have and icon and not allow the user to click on it. Which is why we knocked out the unnecessary ‘+’ and ‘Add’ icons and added one ‘Quick Create’ with a dropdown to select the task type. As simple as that.
3. One of the major changes we made with the calendar was adding the navigation bar for displaying months. Instead of just having previous and next options to navigate, we found enough space to list out all the months. So a user is spared from the agony of 10 clicks to navigate from January to November. Similarly the year can be selected from a simple dropdown at any time irrespective of the view mode.
Neev Information Technologies Pvt. Ltd.
www.neevtech.com
sales@neevtech.com
Trouble Ticket:
Neev Information Technologies Pvt. Ltd.
www.neevtech.com
sales@neevtech.com
1. With any ticket interface, with the volume of tickets being raised, the ability to filter through these tickets, sort and prioritize them is of at most importance. We decided to provide nested filter within the column that will let the user filter and sort the tickets easily.
2. Also a Status filter alone is not enough. So we added additional filters for Priority and Assignee. Another important addition was a provision for description.
3. Ticket titles are usually brief and generic. The reviewer has to open each to ticket to get an idea of what it is and this moving back and forth can be quite cumbersome. It makes so much more sense to summarize the description right below the title so at a glance the user gets an idea or what the ticket is about.
Neev Information Technologies Pvt. Ltd.
www.neevtech.com
sales@neevtech.com
Documents View:
Neev Information Technologies Pvt. Ltd.
www.neevtech.com
sales@neevtech.com
1. For the Documents page instead of following the mundane tabular format, we decided to go a typical blog editor style. Pleasant on the eyes and easy to manage. The search that occupied quarter of the screen. So instead of keeping it open by default, it is now compressed and moved along with the other icons and can be accessed whenever required. So instead of being spread all over the page, all actionable elements are organized.
2. We also added icons to display document type. As a visual aid this is so much easier to identify the type than having to read out ‘Document type – Pdf file’.
When it comes to product development, the focus is usually around functionality and features. But what most companies don’t realize is that UI and UX play a critical role. Irrespective of all the sophisticated technology you may be having in the backend, if your users they are not able to be productive using your product, they will simply not use it.( Unless you are in the Enterprise Software Segment )
Making vTiger look good We, at Neev are actively promoting usability in Open Source Software. Taking this challenge up as an internal project, we decided to revamp vTiger, a popular CRM application. Receiving a lot of feedback and demand for the redesigned theme, we decided to put it up here. In case you are looking for help on Usability or User Interface for your project, feel free to Contact Us. Visit us at Neevtech.com to know more about our offerings.
Neev Information Technologies Pvt. Ltd.
www.neevtech.com
sales@neevtech.com