Project 2021
Display Field
Feature Summary
Zoho CRM software is a tool that acts as a single repository to bring your sales, marketing, customer support activities together, and streamlines your process, policy, and people in one platform. In an effort to push Zoho CRM in the right direction for its customer, we reimagined the display fields to match this new vision.
My Role
Responsible for redesign, discovery and ideation, interaction design, affinity Mapping, wireframes and prototype.
Tools
Figma, Principle, Protopie
Problem Statement
Meaningful engagement in display field settings was very low, users weren't doing much other than using the default settings. The current list doesn't give clarity of the data. How could we enhance this setting to make the list view more dynamic and more informative.
We wanted to understand why the engagement was so low in Display field settings. Through conversations, data, and research, it became clear that there were incorrect assumptions and misaligned expectations about user behaviour. There was not just one issue, but many for us how users interacted and perceived.
1.
User has no control
The user did not have the control and freedom to customise the display fields, so nearly 80% of the users end up using the default settings.
2.
No preview
Users wanted to see a preview when changes had been made to their display fields settings which will be reflected in the list view of the respective modules.
3.
Bad data representation
No proper visual representation of the data.
Customise according to your needs
Our vision for display fields included new features that would allow the user to add and customise the data that the user wants to see on the module list page. We placed the preview on the top of the page so any changes made will be seen here and the user can play around it.
New Preview
The older version of display fields had 4 fields which the user can customise with no visual queue of how the changes will look in the list page. But with this enhanced version gave users more control over their content and keep track of changes.
Solution
-
Preview of the card
-
Iconic representation
-
Reset your card to default
Image Representation
The older version of display fields had no control over what image the user wanted to be seen in their list view, which created more confusion over what the image represents whether it is the
the deal owner or contact or a lead.
Solution
-
List of options for image representation
-
More options to change its Alignment and Shape.
More Fields
With only 4 fields our older version did not
allow the user to use this feature to its fullest, with nearly 80% of the user using the default settings.
Solution
-
Users can have 7 fields.
-
Indication on how many fields can be added.
-
Fields are arranged according to their importance, such as heading, secondary and tertiary.
-
Rearrange fields according to the user's preference.
Icon representation
The older version of display fields had no visual queue on what data the user is viewing on the list page.
Solution
-
A toggle to switch on or off the icons.
List View
Our vision for display fields included new features that would allow the user to add and customise the data that the user want to see on the module list page. We placed the preview on the top of the page so any changes made will be seen here and the user can play around it.
Lite & Dark theme
With only 4 fields our older version did not
allow the user to use this feature to its fullest, with nearly 80% of the user using the default settings.
Wireframe
After getting an UI Requirement Document with a to-do list for designing the key screens identified in the task flow and user flow, I started sketching low-fidelity screens. I can capture my ideas by pen and paper quickly by sketching. It also enables me to examine my ideas before putting everything in the daunting process of digitizing.
Component Library
Walkthrough Video
A small walkthrough video that I made to introduce this feature to different teams in our organisation. This was the design at its earlier stage.
