Please enter name
please enter valid email
please enter comment
Please enter correct code

Making vTiger CRM Look and Feel Beautiful

Contributed by Vinci Rufus on 1 Feb 2013

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:

  1. Now a days most of the laptops and LED screens available in the market are wide screen.
  2. vTiger has a top navigation bar under the logo, which means close to about 80 px of vertical space is taken up by the logo, search and nav bar. We compressed the logo and search into the top, which in turn freed up some very valuable space ( 50px to be precise) for the content area
  3. We then decided to make use of all that real estate on the sides by moving the nav bar to the left hand side,. The users are now able to see more content per screen.

 

Dashboard:

  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.

 

Calendar:

  1. The Calendar is another page where lot of white space is wasted. The header, tabs and nav 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 nav 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.

 

Trouble Ticket:


  1. With any ticket interface, with the volume of tickets being raised, the ability to filter through these tickets, sort and prioritise 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.

 

Documents View:

 

  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 oranganised.
  2. We also added icons to display document type. As a visual aid this is so much more 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 realise 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 :-) )

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.

vTiger theme and theme design PSDs now available. Click below to view a demo and purchase the theme .

Vtiger Theme

Take a look at the designs on Pinterest here.

Check out our LinkedIn showcase page 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.

Tags: , , , , , , , , , ,

Leave a Comment

Security Code: