1 / 18

Making vTiger CRM Look and Feel Beautiful

Making vTiger CRM Look and Feel Beautiful

neevtech
Download Presentation

Making vTiger CRM Look and Feel Beautiful

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Making vTiger CRM Look and Feel Beautiful

  2. Why change vTiger? • Neev has always been a huge supporter of Open Source Software. In fact, many Neevites are active contributors. • We found that the UI/UX community is inactive when it comes to its participation in Open Source. • The result is that many popular applications today do not have a good User Interface (UI)/User Experience (UX). • So, the UX team at Neev has come up with a makeover for vTiger, one of the most popular CRM systems. • The following slides would cover some of our redesigns and the philosophy behind these changes.

  3. Navigation Tree • Nowadays, most of the laptops and LED screens available in the market are wide-screened. • vTigerhas 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 navigation bar. • So, 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. • We then made use of all that real estate on the sides by moving the navigation bar to the left so that the users are now able to see more content per screen.

  4. Navigation Tree Before and After

  5. Dashboard • vTiger’s dashboard does not serve the purpose of letting users see valuable information at a glance. • vTiger follows an out of date method of displaying charts where users have to either scroll up and down or click on the page to view the reports. • We fixed this by compressing the charts, making them look pretty and made all the charts visible on a single screen. • Now, be it sales figures or leads, this dashboard provides users everything at one go to enable better planning for activities. • Also, instead of having action items as text links, we added icons on the right to refresh a graph and edit it.

  6. Dashboard Before

  7. Dashboard After

  8. Calendar • In the calendar page, half the screen is consumed by the header, tabs and the navigation bars so that the user has to scroll down to see the calendar. • We compressed all this to the top so that the user can now focus on the main calendar. • Although the ‘+’ and ‘Add’ icons exist, vTiger does allow the user to click on them. Instead, we added a ‘Quick Create’ button with a drop-down to select the task type. • Instead of having only the ‘previous’ and ‘next’ options to navigate the months, we listed out all the months in the available space and added a navigate bar to switch among months. The user is now spared from repeated clicking. • Similarly, the year can be selected from a simple dropdown at any time irrespective of the view mode.

  9. Calendar Before

  10. Calendar After

  11. Trouble Ticket • In any ticket interface, with the volume of tickets being raised, the ability to filter through these tickets, sort and prioritise them is of utmost importance. • We decided to provide a nested filter within the column that will let the user filter and sort the tickets easily. • Also a status filter alone proves insufficient. So we added additional filters for Priority and Assignee. • Ticket titles are usually brief and generic which necessitates the reviewer to open each ticket to get an idea about it which is time consuming. We added a provision for a description of the ticket right below the title so that the user gets an idea or what the ticket is about at a glance.

  12. Trouble Ticket Before

  13. Trouble Ticket After

  14. Documents View • For the documents page, instead of the tabular format, we came up with a typical blog editor style which is easier to manage. • The ‘search’ feature occupied quarter of the screen. So, we compressed it and moved it to the top right corner along with other icons which can be accessed whenever required. • All the actionable elements are organized instead of being spread out across the page. • Instead of a word-based description of the document type, we added icons to display the document type. As a visual aid, this proves easier to identify the type of document.

  15. Documents View Before

  16. Documents View After

  17. The Final Word • When it comes to product development, although there is more emphasis on functionality and features, companies should also realize that UI and UX too play a crucial and critical role. • The addition of sophisticated technologies in the backend should lead to more productivity while using your product. • In case you are looking for help on Usability or User Interface of your project, feel free to Contact Us

  18. sales@neevtech.com Neev Information Technologies Pvt. Ltd. Sweden Singapore India - Bangalore India- Pune USA Neev AB, BirgerJarlsgatan 53, 6tr, 11145, Stockholm Phone: +46723250723 #13 L’Square, 3rd Floor PariharChowk, Aundh, Pune – 411007. Phone : +91-64103338 The Estate, # 121,6th Floor, Dickenson Road Bangalore-560042 Phone :+91 80 25594416 #08-03 SGX Centre 2, 4 Shenton Way, Singapore 068807 Phone: +65 6435 1961 1121 Boyce Rd Ste 1400,Pittsburgh PA 15241 Phone : +1 888-979-7860

More Related