The Problem
The application supports jobs, estimates, and managing payments. The application allows for user comments at multiple levels of a job but lacks a comprehensive view of the full conversation related to the entire job. This hinders the user’s ability to fully interact and understand the scope of a job.
Goals for Success
Design a solution that allows the user to interact at every level of the job while maintaining focus and clarity.
Design Process
Research
I began with an audit of the current application and tracing the user flow. The current flow provides a comment section at the bottom of each page that relates to that specific part of the job (Job itself, estimates, payments, etc.). The user navigates to a specific page to view, create, or interact with comments at that level.
This audit highlighted some potential concerns:
- It is unclear at what point you will see what comments. Sometimes you see comments from other parts of the job, other times you do not.
- There is no disclosure that comments exist at other levels.
- It is impossible to see the entire conversation.
- Users must navigate to a specific page to interact with comments.
- Some comments are made at the object level, others are made at a value level (cells within a worksheet) that require context to understand and interact with.
- Users are not able to reply to a comment, making conversations appear fractured.
- Value-level comments are indicated with a small icon changed to yellow and are easy to miss. Viewing the comment requires clicking a button and opening a pop-up.
- It is not possible to view all value-level comments for a particular worksheet.
Ideate
I began by researching use cases and considering how the user is using the existing system.
- Users scan to see who made a comment
- Users need to personalize the order of comments
- Users want to exert less effort to surface relevant comments
The solution needs to facilitate a more comprehensive conversation throughout the entire lifecycle of the job and surface relevant information with minimal user effort.
The ideal solution is a conversation drawer that provides a complete conversation for all related parts of the job. This drawer may be collapsed if the user is focused on work within the page and expanded when they want to interact with the conversation. Within this drawer will be an accordion that clarifies each object and the hierarchy of the entire job while surfacing relevant comments.
Prototype & Testing
Through UI research, I outlined some best practices to be implemented in this project:
- Replies need a strong visual connection to the parent comment
- Action links (reply, edit, delete) need a strong connection to the comment itself.
- Each state should use clear language to indicate the action being taken (add, reply, edit)
I began to prototype and explored several presentations of comments. I began with a minimal design that placed the user’s controls for editing/deleting a comment they created next to their information and the reply button below the comment. This design worked well with short comments, but at a maximum length of 3,000 characters, there was a large disconnect between reading through the comment and taking action.
Next, I explored a design that placed all of the action-related items below the comment and a header bar to help separate each comment. This improved the usability of the actions with long comments, but with short threaded comments the header bars proved distracting and the hierarchy of information focused too heavily on the poster’s name.
The next iteration retained the placement of the action bar but simplified the header. It improved the visual hierarchy but still held elements that weren’t necessary and felt both dated and clunky.
Generate Solutions
Adding New Comments
The form to add a new comment appears at the top of each accordion section and is fixed to that location, not scrolling with the comments. This makes it easy for the user to add a comment at any time and creates a consistent experience. The UI component appears by default with a condensed text area. Once the user clicks in the text area to add a comment, the UI expands with a larger area to compose and disclosed the button to add the comment.
Replying to Comments
Below each comment is a button to reply along with other actions to edit and delete (where permissions apply to the user that created the comment). Clicking the reply button replaces the action bar with a form where the user may add a reply.
Once the user replies, their comment appears within the box of the original comment with a color background. This visual presentation contains the full conversation of the original comment within the box while also highlighting which is the reply.
Editing Comments
Users may edit their own comments only. The edit link is hidden for comments that do not belong to the current user. When they click to edit the comment and action bar is replaced with a text area that contains their comment. They may edit as needed and save the changes.
After editing the date/time stamp updates to indicate when the comment was edited while retaining the original date of the comment. User is assumed based on permissions (a user may only edit their own comments).
Deleting Comments
Users may only delete their own comments. The delete link is hidden for comments that do not belong to the current user. They will receive a confirmation that the comment has been deleted.
Conversation Drawer
The conversation drawer will appear on the right-hand side of the page when expanded. Each object has its own accordion area (Job, Estimate, Payment, etc.) with a badge to indicate the number of comments for each object. Object-level accordion sections are ordered based on hierarchy. Only one object may be opened at a time to focus the discussion.
Accordion should take up all available vertical space so that the first object is always placed at the top of the window, the last object, when collapsed, is always placed at the bottom of the window, and the expanded window fills all remaining space with scrollbars when needed.
By default, it will expand the object-level comments for the current page. A notation that this is the current page maintains positional awareness.
Comments will be ordered throughout the entire drawer with the newest comments appearing first. The user may change this ordering for the entire drawer using the controls in the upper-right hand corner of the drawer to sort oldest first:
Value-Level Comments
When visiting a page that has value-level comments within cells of the worksheet, there will be an accordion area for the current page’s values placed directly below the object-level comment area. Users may not add new value-level comments from the conversation drawer, however, once added, they may be replied to/edited/deleted within either popover or conversation drawer.
Value-level comments are added by toggling either the full or simplified comment button placed within the page where comments are allowed. The button may display an icon + text label or icon only. Clicking the comments button produces a pop-over where the user may interact with existing comments and add new comments for that specific worksheet value.
The conversation drawer allows an overview look at comments used throughout the page.
This solution provides the context necessary to make and interpret comments within a worksheet as well as the full context of the conversation that may apply to the page. Value-level comments are not visible when the user is on a different page because the lack of context makes it challenging to understand the conversation.
Conclusions
Creating a drawer consistently across each page related to the job addresses several concerns:
- It is unclear at what point you will see what comments. Sometimes you see comments from other parts of the job, other times you do not.
- It is impossible to see the entire conversation.
- Users must navigate to a specific page to interact with comments.
This solution ensures that comments persist at every level. In other words, this is the full conversation on each page related to this job. Users can expect to find the entire conversation any time they access the conversation drawer.
Allowing for threaded comments ensures that a conversation flows more naturally, and users may reply to specific notes. This addresses the concern that conversations appeared fractured.
Badges indicate the number of comments available for each level, even when that level is collapsed, and comments are hidden. This makes it easy to see at-a-glance where comments exist and address the concern that there was no disclosure that comments existed at other levels.
Including value-level comments as a pop-over triggered by small buttons or cells within a worksheet provides proper context without sacrificing visual space within the pages and addresses these concerns:
- Some comments are made at the object level, others are made at a value level (cells within a worksheet) that require context to understand and interact with.
- Value-level comments are indicated with a small icon changed to yellow and are easy to miss. Viewing the comment requires clicking a button and opening a pop-up.
- It is not possible to view all value-level comments for a particular worksheet.
This dual solution of creating/accessing comments direction within a worksheet and compiling existing comments within the drawer ensures that all comments on the worksheet are visible while working on that page while also connecting comments to the specific context within which they are helpful.