Project 2021
Tags
Feature Summary
This feature pertains to Tags, making it essential for all scenarios in which tags have a significant effect on this application. Tags are labels that let you categorize records in a module based on certain characteristics. For example, if you want to categorize contacts based on their relationship with your business, you can use tags like 'customers', 'prospects', 'vendors', etc. The option to add tags is available in Contacts, Companies, Products, Deals and Activities modules. Zoho Projects, our cloud-based project management software, lets you plan, track, and collaborate with your team, wherever they are.
My Role
Responsible for redesign, discovery and ideation, interaction design, affinity Mapping, wireframes and prototype.
Tools
Figma, Principle, Protopie
Problem Statement
Creating new tags with colour options and how it impacts the detail page, feed status, filters, forum and Global search and how to manage them.
1st Flow
Tags in Form Page
1. Form page includes Tag field.
2. Multi-Select tag support.
3. Sort the list in alphabet Order.
Search and Associate Tags
1. Search the tag.
2. Select the tag.
3. Typed Key not found - will suggest adding text to tag in a single click
4. Matching key result will be display
Search and Associate tags / Select Colour.
1. Typed Key not found - will suggest adding text to tag in a single click
2. Will display no data message.
3. Pick a color for the tag we create in single click
Add Task Page
1. Display Selected tag list with the close icon
2. If the user needs more tags click the arrow.
All Tags
1. All Tags are included below the Timesheet section.
2. All Tags list
Tag related records
1. Matching results
2. We can see all module’s results here
3. Tags - Edit, Delete
Tags on Task Details Page
1. View existing tags or add new ones from task details page.
2. Select from the list of existing tags or create new ones from the tags page.
2nd Flow
Tags in Contacts Details Page
1. Add news tags button to create tags.
2. Maximum of 5 tags is applicable per record.
Tags Page
1. The first screen shows if there are no tags available.
2. The second screen shows if there are tags available.
Add New Tags
1. Type a word and add new tag by hitting add button.
2. Has an indication for a maximum limit of 5 tags that can be added per record.
Search Tags with key words
1. Search the tag from other tags.
2. Results will be highlighted
3. Add, Edit or Deleted from Manage tags settings.
Added Tags
1. Added tags will be displayed below the
contact details
2. Tags - Add, Edit, Delete.
3rd Flow
Tags in Contacts Details Page
1. Add news tags button to create tags.
2. Maximum of 5 tags is applicable per record.
Add tags from a smaller view
1. Minimum view of tags with horizontal scroll.
2. Maximum view of tags on clicking down arrow.
3. Has an indication for a maximum limit of 5 tags that can be added per record.
4. Add, Edit or Deleted from Manage tags settings.
Add New Tags
1. Type a word and add new tag by hitting create button.
2. Add colour to the tag by tapping on it.
Search Tags with key words
1. Search the tag from existing tags.
2. Results will be highlighted.
Added Tags
1. Added tags will be displayed below the contact details.
2. Tags - Add, Edit, Delete.
Final Verdict
V1
V1
V1
V3
V2
Which version did our user find it easier?
v1 is was easier to understand, had a better understanding of how to add new tags, selected tags and unselected were properly segregated.
In v2 both add and search tags is done from the same search field, which the users found confusing initially, both selected and other tags were not segregated properly.
v3 flow cannot be implemented in iPad and the view area of tags was a lot lesser in this flow.