Planera
Comments 2.0 - Reimagining Commenting
Summary
TEAM
4 Product Designers 1 Product Manager 5 Engineers
TIMELINE
Aug 2023 - present
ABOUT THE COMPANY
Planera is a digital whiteboard to help users build, analyze and optimize construction schedules to increase profitability. It was founded two years ago by a group of seasoned construction professionals who recognized the inefficiencies of the prevailing tools in the industry. Currently adopted by over 50 construction companies, Planera has proven to significantly enhance their work processes.
MY ROLE
Junior Product Designer. Responsible for research, conceptualization, design, user testing and delivery of key feature areas.
RESULTS
Shipped two features into development, that are now live.
TOOLS
Figma Trello Slack
Problem Statement
One of Planera’s strongest features is the ability for multiple users to collaborate simultaneously on a project. While commenting serves as a fundamental avenue for collaboration, some users have expressed concerns about the intuitiveness of Planera's commenting feature.
Currently, the user has to right click on each element in order to leave a comment.
How might we make commenting more intuitive in order to to ensure a seamless and effortless experience for users?
Solution
After weeks of research and brainstorming, this is the final solution my team and I decided on. The following screens show the user flow of an individual commenting in Planera. For a more in-depth discussion of my creative process, scroll down to the next section!
User clicks on the “Comment” button in the top navigation bar.
When the user hovers over an element, a blue outline will appear, indicating the selected element. If the user desires to comment on that particular element, they can click on it.
Once the user finished typing their comment, a small comment icon will appear next to element, indicating that someone has left a comment. The comment will also show up in the comments panel on the right side of the screen.
The user is now in “Comment Mode”. The cursor switches to the comment icon. Commenting is now the only action the user can do until they exit out of comment mode.
The user can now type out their comment and even tag fellow collaborators.
Understanding the Problem
Commenting Method is Unintuitive
In order to comment, the user must right click on each element. For new users, this is not easy to find. Further, many of the target users are older, hence not very technaologically savvy.
Constraints and Limitations
Working Within a Design System
Competitor Analysis
Key Takeaways
User does not Receive Clear Guidance
There is a “comment” button in the navigation bar which opens up a panel of all of the comments. In the empty state, the user does not receive clear direction as to how to make their first comment.
This project being my first time working within a design system, I not only acquired the skills to navigate and utilize it effectively but also gained insights into how it considerably streamlines the design process. Nevertheless, my creative scope was restricted, as I couldn't craft a feature from the ground up; instead, it had to align seamlessly with the established system the team had meticulously developed over the preceding two years.
The following images are certain elements from the design system that I utilized in my design.
Time
As an early stage startup, there isn’t much time to conduct thorough user interviews and spend weeks or months coming up with a design solution. I learned to work in a fast paced enviroment using the resources at hand.
Budget
Limited funds often lead to a narrower scope, shorter sprint durations, and resource constraints, affecting the depth of research and user testing. Balancing financial constraints with the essential elements of the design process is crucial to ensure a streamlined and effective product design sprint.
I did a deep dive into other popular collaborative tools and analyzed the similarities and differences in how each of them designed their commenting method. From this, I took away some key things that I wanted to implement in Planera.
The competitive analysis of these platforms highlighted potential elements I could implement in the redesign:
Allow commenting to be element specific so it is clear what the user is referring to
Make it an easy learning curve for new users who may not be technologically savvy
Allow for a way to notify team members when a new comment is written
Research
User Feedback
“I can’t seem to figure out how to leave a comment. I’m clicking on the comment button up top but that doesn’t allow me to comment”
User Pain Points:
The process of leaving comments and notes, which is crucial for collaboration, lacks intuitiveness, leading to frustration
Difficulty in tracking various comments, making it challenging to identify when new comments are added to the discussion
The UXR team frequently engages with customers to gather valuable feedback on the product. During these interactions, they inquire about users' preferences, dislikes, and seek insights on potential enhancements to elevate the product. Below are excerpts from conversations during which the team gathered opinions specifically related to the comment feature
“I love how this tool makes collaborating so much easier. I just wish it was easier to leave comments”
“I find it hard to keep track of all the comments my team members leave. It would be nice if there was a way to keep track of who says what.”
User Goals:
Go in and out of commenting easily
Know when a new comment is added on the shared file as well as who left it and when.
leave element specific comments, not just general ones.
Ideation
After comprehending the user goals, needs, and gathering insights from competitor analysis, I formulated two iterations of the comment feature. I then presented these ideas to the team, aiming to receive feedback and refine the design further.
Option 1: Floating Comment Icon
Whenever a user hovers over an element, a discreet "add comment" icon appears. The concept is designed to enhance the user experience, making it more intuitive to leave a comment on a specific element by simply navigating to it and utilizing the visible icon, as opposed to relying on the traditional method of right-clicking on the element.
Option 2: Comment Mode
Upon clicking the comment button in the navigation bar, the user enters a dedicated "comment state," restricting actions solely to commenting. In this state, when the user hovers over and clicks on an element, an add comment bar seamlessly appears, streamlining the process of providing feedback or insights on that specific element.
Iteration 1
The lead designer on the project recommended moving forward with option 2, theorizing that having an icon appear each time the user navigates to an element might prove distracting and potentially bothersome. This consideration is particularly relevant for users who may not wish to engage in commenting activities.
Proceeding with Option 2 - Comment Mode
I began working on the hi-fi design and ideated multiple hover states for the elements when the user is in comment mode. This would indicate to the user that they can click on the element and comment on it.
Feedback from the team
These hover states cover important information that the user may want to comment on and will create potential frustration is they can’t see it while commenting .
We need to make sure the user is aware that in comment mode, they will not be able to perform other actions. Right now, that isn’t very clear and may cause confusion when they try to do other tasks but cannot.
Iteration 2
Going Back to the Drawing Board
Given the feedback above, I decided to scrap the idea of a incorporating comment icon on each element.
Instead, once the user clicks on comment mode,
The cursor will change to a comment icon
The comment thread will pop up
This will indicate to the user that they are in comment mode, where commenting is the only action enabled. This way, all information will be visible on each element as well.
In comment mode, the cursor changes to the comment icon and the comment thread appears.
The user hovers over and clicks on an element to comment on it. The user cannot do any task other than commenting in this mode.
The user can mention other collaborators, who will then be notified.
From Design to Dev
As I transferred the final screens from the WIP (work in progress) figma file to the Dev (development) one, I realized my work wasn’t quite finished.
The developers had several questions, a few of them being:
What happens if the element the user want to comment on is close to the edge of the canvas. Should the “Add Comment” bar be placed in a different location?
What instances allow the user to exist “Comment Mode”?
I learned that part of being a designer is learning to think like a programmer and write thorough dev notes about potential questions they may have. I went back to my notes and specified under what conditions the “Add Comment” bar would be placed in a different location, ad well as detailed the instances in which the user will and will not exit comment mode.
It’s live in the Product! 🎉
Here’s a screen-recording of me using Comment Mode live in the product for the first time!!
Project Takeaways
This was my first time shipping a feature from design to development. Here is what I learned:
In an early stage start-up, there often isn’t time for extensive user research. You have to work under the constraints presented to you and come up with the quickest, cheapest, and most efficient design solution.
Learn to think like a programmer in order to be a great designer.
Designers rarely work on projects from start to finish. You’ll most likely be iterating on a previous design.