Lalisa Tsai Portfolio Website
Serve Prepaid Card Credit Card App & Website

Insightly

 CRM App & Website

UX, UI · At Insightly

Director of UX at Insightly, a cloud-based customer relationship management system with over 1 million users in 200+ countries.
Working closely with the Vice President of Product Management and two Product Managers, I am responsible for designing ongoing feature updates. My focus is on our mobile apps on Android and iOS, while managing a Senior UX Designer responsible for web app stories. Much of the web app UX design is also done by the CEO.
A key challenge is improving the overall user experience of our complex existing apps while maintaining a constant delivery of new features in a fast-paced environment. In addition to working on specific stories, I continue to add UX/UI best practices and processes to our workflow, while educating and evangelizing for more user-centered design.

Case Study: Mobile Filters

Background

The Insightly website and mobile apps provide several list screens that allow users to browse through and navigate to their desired item. Common use cases for these is the filtering of displayed items based on certain criteria. Examples include to only show overdue tasks, only show open opportunities, or only show leads assigned to oneself. The goal of this project was to allow for quick yet extensive and flexible filtering.

Audit

A detailed audit of the existing functionality across both web and mobile showed that filtering was inconsistent within the web app as well as between web and mobile apps. Further, on mobile not all lists allowed for filtering.
As there was no opportunity at this point to adjust the web app filtering, it was decided to focus on building consistent filtering within the mobile app, accepting inconsistencies with the web app where required.

Filter audit
Internal audit

To understand potential filtering approaches, a multitude of mobile apps were reviewed, both in regards to the actual filter dialogs as well as how to access these.

Filter audit external
External audit

To collect all required filter options across entity types, they were captured in a spreadsheet and prioritized based on user feedback and usage scenarios.

Filter spreadsheet
Filter options

Explorations

A multitude of different approaches for the filter dialogs were explored. These included approaches discovered during the external audit, approaches based on currently implemented selection controls in the apps, as well as newly developed designs.
Key challenges included:

  • Provide access to a large amount of filtering options, while not overwhelming the user
  • Allow fast access to commonly used selections, while being flexible enough for other selections
  • Display a wide variety of selection fields, while staying visually consistent (E.g. simple on/off options, known short lists, unknown and potentially long lists, single selects, multiple selects, ...)
filter explorations
Filter explorations

Final design

The final chosen design is a combination of different approaches:

  • Expose key filters as buttons to allow for one-click selection
  • For key filters with an extensive list of options, expose key options directly. Make remaining secondary options available via additional dialogs
  • Use textual presentation for less common filters or filters without key options, improving visual hierarchy and differentiation from key filters
  • For filters with potentially long lists, provide dialogs with dynamic search capabilities
filter examples
Example filter dialogs
secondary filter dialogs
Secondary dialogs
filter before after
Before/after

User quote

"Insightly team - I'm DELIGHTED with the implementation of the filtering functionality! It's awesome and a complete game changer for me on the mobile app. Allows me to zoom quickly to what I need in the field. THANK YOU!!!!!!!"


Other Example Stories

Enhanced Calendar

Added ability to view combination of user's Insightly calendar, device calendar, and team member's calendars, while improving overall scanability.

whats new
Calendar before/after

Improved Login Flow

Redesigned login flow including better indication of available login types, better error handling, improved visuals, and additional intro screens to encourage signup.

Login flow
Login flow overview
Login before after
Login screen before/after
Login splash
New introduction screens

Added Global Search

Provided ability to search across Contacts, Organizations, Leads, Opportunities etc., including option to filter search results.

global search flow
Search flow overview
global search before after
Menu before/after
Login splash
Filtering global search results

New Feature Discovery

Designed "What's New" screens indicating added features for new app releases. Designed coach-marks indicating new features in-context.

whats new
"What's New"
coach marks
In-context coach marks