Product Designer
Collaboration platform for web
Designed a commenting, review, and handover system for the web.
ROLE
Product Designer
COMPANY
Zoho
TIMELINE
2019 - Present
About
The collaboration tool allows users to quickly access and discuss designs, inspect and download marked assets - thus contributing to a central component of the product experience.
​
The comment, review, handoff, comparison, asset download and inspect design components were taken to web because, developers and stakeholders don't need discrete apps for each of these.
Research
For design problems to be efficiently solved, everyone in the team - from developers, product managers, marketers - should be on the same page. Product managers can help with defining the problem, and with insights that might help designers arrive at a solution. Marketers can perform usability tests. The possibilities are endless when everyone on the team participates in the design process.
​
But there’s something missing with the tools available today :
​
-
They are unable to bridge the communication gaps between all stakeholders at various stages.
-
Reviewers are unable to compare between versions.
-
Developers depend on designers for assets and their specs.
-
Marketers keep coming back for minor content edits.​
​
To tie these loose ends together we crafted a brand-new product that brings in the best of both worlds: cutting-edge design and seamless collaboration.
User Interview
I interviewed 10+ developers and marketers, and identified pain points, which could prove to be a major setbacks while collaborating and resolving queries with designers :
​​
-
Discussions involves sharing screens, screenshots and links.
-
Discussions aren't documented contextually.
-
Design specs and conversion metrics are inconsistent.
-
Design version history is not maintained.
-
Unable to request assets that were missed out.
Wireframe
The first design version for collaboration was discussed in 2019. This was more of a wireframe and was trying to get the best of all existing collaboration tools.
​
Initially, commenting was part of the mac app. Later, it was decided to have commenting only in the web.
2019
2019
Comments were added right on the canvas and users could select an object and comment on it directly.
​
To view comments, users had to click on an individual element where comments were available.
​
Initially, it was great having all the comments contextually on the canvas but there was no way to see all the comments in a linear fashion and over time it became very cumbersome.
Iterate
I conducted a user study by presenting the partially developed version to user groups and concluded that : ​
​
1. Feedback was getting lost, as it was difficult for users to click on a element to view comments everytime.
2. It became hard to navigate across multiple threads.
3. It was difficult following extensive discussions.
​
Hence, I decided to rework the existing design, to solve these issues.
2020
2020
This is the latest design, I've made commenting linear and clutter free.
​
The contextual comments in the right panel make it easy for users to navigate across elements in the canvas to view comments.
Deliver
We are already alpha testing with 20+ teams and constantly re-iterating based on their feedback and suggestions.
Listing Page
The listing page is segmented into three columns - Org / Teams, Projects, Pages.
2021
2021
Commenting
Users can comment, @mention, reply, react, mark elements in comment, and share threads as link.
Prototype
Users can preview prototypes as screens or in-device views while they navigate across pages.
Users can share their designs with teammates from their organisation. They can also embed published designs directly to any website.
Share to Org
2021
2021