2017-12-08 (copy)

Vtiger beautified: a refreshed interface for a better user experience

Background:

Here at Vtiger, we frequently explore with one another how to build better products for our customers. Our discussions range from ideas about enhancing CRM functionality, to increasing system performance, to improving user experience. During one particular discussion in September, a few members of our engineering team met to discuss their concerns about UI inconsistencies. Missing whitespace, misaligned text and icons, the mix of text and icons in action bars, and many other design inconsistencies flustered them to the point of craving to improve Vtiger’s user interface.

Within a few weeks, this craving transformed into project Alpana (Alpana, one of the oldest Indian folk arts, refers to colorful motifs done with hands and paint) The Product management and user experience design teams were called in to collaborate. The objective of project Alpana was to build an intuitive UI that is elegant, optimized for readability, and doesn’t require Vtiger’s current users learn anything new.

The guiding principles for UI improvements were inspired by Steve Krug’s first law of usability: don’t make me think. In his book Don’t Make Me Think: A Common Sense Approach to Web Usability, Steve Krug notes that a web page should always be self explanatory. Keeping this in mind, our team set out on a mission to build an intuitive UI that our users could understand without having to think about what it is or how to use it.

The process:

Project Alpana was initiated 3 months ago. During this period that followed, the team analyzed every page in Vtiger CRM to examine UI inconsistencies in detail. The size of buttons, alignment of text, application of colors, and many more details were carefully scrutinized for consistency and readability. And after several brainstorming sessions and lengthy deliberations, guidelines governing the UI improvements were framed. Marco Suarez, from the design firm Invision, refers to these guidelines as “design systems”, in this wake-up call – Software design is in crisis. – he posted last week.

Our UXD team created 286 new icons and provided over 500 mock-ups to the engineering team for revamping of pages. Our engineering team implemented more than 100 UI enhancements. Every new implementation was thoroughly tested for bugs. A month ago, the new UI was released internally and everyone here now loves the new look.

What has changed:

  1. Icons: Now, when you log into Vtiger CRM, you will see trendy line icons replacing the old filled icons. Line icons are simple, exquisite, and easy to recognize. Since the line icons are light, they rarely make you take your eyes off the main body of the page.

  2. line-icons
  3. Menu: We are introducing a menu icon in place of text. And on hovering over the icon, you’ll now see all modules grouped logically and listed vertically. The vertical listing gets rid of the mix of horizontal and vertical scanning and improves reading experience.

  4. menu-alpana
  5. Display of list names: Vtiger CRM lets you filter CRM records and save those records as a list. A click on the desired list displays all the filtered records. Until yesterday, these list names were fixed to the screen, stealing the screen space of the actual CRM data that you want to see. Also, this space crunch compelled horizontal scrolling to view more record information. With the UI update, the list names appear on hover and disappear after selection. This way you will see more of the filtered data and scroll less often.

  6. list-view
  7. Pop-ups: We are introducing trendy modal pop-ups to enhance page design and improve overall usability. Throughout the entire CRM application, these new modal pop-ups consistently appear on the right side of the screen. The original page behind the pop-up is blurred to ensure that your total focus is on the pop-up content. When you have viewed the pop-up information, you can simply close the pop-up and get back to the original screen to continue working from where you left off.

  8. pop-ups
  9. Icon labels: In the record view, you can now see icon labels for all related tabs. The labels provide clarity and you don’t have to think before clicking.
  10. record-view

These are a few UI improvements that you will notice. There are many other subtle improvements that are not evident but will provide a better user experience. Want to learn more? Read our documentation. And please do drop in a comment to let us know how you feel about the UI improvements.

Leave a Reply

Be the First to Comment!

Notify of

wpDiscuz
sales_mistakes

Do these 3 things to scale your sales in 2018

Another year filled with opportunities is before us. And most of you are busy setting goals to grow sales this new year. Perhaps, you have ...
New_year_blog

3 new year resolutions to succeed professionally in 2018

When the new year is around the corner, many of us retrospect the passing year to learn from mistakes and set new goals to improve ...
credit note

Introducing Credit Notes in Vtiger CRM

Every once in a while, you will owe a customer a refund for something that you've already invoiced them for. Maybe on that invoice you ...
InsuranceCRM_FI

3 reasons why insurance agencies need CRM

To thrive in a competitive market and cater to better informed customers, today’s insurance agencies have to be more customer centric than ever before. To ...
manager's toolkit

3 CRM tools every sales manager needs for generating predictable growth

If you’re a sales manager, we understand that you have the toughest job in sales. You hold great responsibilities, work long hours, go on several ...
Sales automation

A comprehensive guide for automating sales related tasks in Vtiger CRM

When selling, have you ever: Spent your valuable time on entering contact and opportunity details into CRM? Wasted time calling unqualified leads because they appeared ...
Multiple_pipeline_VT

Configure multiple sales pipelines in Vtiger

A sales pipeline is the set of actions that a salesperson must take in order to turn a lead into a customer. For example, a ...
Approval process

Accelerate Quote approvals with Approval Processes in Vtiger

In everyday business, you deal with many business processes and documents that require approval from managers, executives, and other decision-makers. For instance, sales associates often ...
data security 2

Your privacy, and data, are safe with Vtiger CRM Open Source

Occasionally, from the actively privacy conscious (thank you for standing up for all of our privacy rights!), we get an email asking whether we can ...
Screenshot-at-ShreeKrupa-17-09-01-18-57-25

Replace these 3 commonly used apps with Vtiger to get more done efficiently

To run a business smoothly, you use a plethora of software, apps, and tools. Perhaps, you use an accounting software to manage to invoice customers, ...
loading