neev-making vtiger crm look and feel beautiful
DESCRIPTION
ÂTRANSCRIPT
Neev Information Technologies Pvt. Ltd. www.neevtech.com [email protected]
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:
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.
Neev Information Technologies Pvt. Ltd. www.neevtech.com [email protected]
Neev Information Technologies Pvt. Ltd. www.neevtech.com [email protected]
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:
Neev Information Technologies Pvt. Ltd. www.neevtech.com [email protected]
Neev Information Technologies Pvt. Ltd. www.neevtech.com [email protected]
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.
Neev Information Technologies Pvt. Ltd. www.neevtech.com [email protected]
Neev Information Technologies Pvt. Ltd. www.neevtech.com [email protected]
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 [email protected]
Neev Information Technologies Pvt. Ltd. www.neevtech.com [email protected]
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 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 )
(This blog was authored by Mr. Vinci Rufus, VP and head of eCommerce at Neev Technologies)
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.