Asynchronous meetings powered by Claap help you reduce the number of meetings needed to share updates, get feedback and make decisions.
The objective of this case is to design the lateral bar where coworkers are debating about the video.
Even if we already have a high level idea of what we want to build, there are a lot of micro-interactions at stake in the comment bar and in relation with the other zones of the screen (video & video player). This means a lot of interactions which can quickly add noise and frictions in the product. Claap is a collaboration product, we then need to be 100% smooth for a UX perspective, there is no room for poor patterns in our mission.
When using collaboration products, people pay a lot of attention to the look & feel. Few frictions and they stop using the product. Product must be perfect, with an engaging interface to foster empathy. Beyond the UX, our second big challenge here at Claap is then UI: we want to build a Minimum Lovable Product and not only an MVP.
As said in the brief, there are a lot of micro interactions that can be happening while a user is using the product. There can be a lot of people inside a feature team making a lot of noise commenting on the video, making it quite easy to be lost in this ocean of feedbacks. Good news, Claap already has a strong vision of what they want to do with the comments section of the product, such as the following features:
In-context feedback implies several secondary features:
On top of the in-context feedback, users recording a video will want to present their video with a quick description, giving the context of the asynchronous meeting.
Then, according to users verbatims, user experience might be much smoother if the comments could be quickly linked to their context.
So here's a few ideas we can then iterate on some design proposals:
→ Several sorting choices & several levels of them.
Ex : Level 1 = Active vs ResolvedLevel 2 = Sections of the videos (such as "Homepage", named by recorder)Level 3 = Most recent (appear at the beginning) vs the oldest (appear at the end)
→ Additionnal filters could also be a thing to make the view even smoother.
Ex : Search bar, tags (that can be created/removed by recorder), custom filters (checkboxes)...
→ Using visible shortcuts or CTAs (in addition of answer/resolve/etc. features) to access most important/recent comments
Ex : sticky date CTA, sticky "go up/down" or "see first/see last" CTA...
Here's a few inspirations of what similar product are doing:
→ Google Chat : "aller au dernier commentaire"
→ WhatsApp : "CTA arrow 'go down' "
→ It might be a real plus to inform users that new feedbacks are available, and quickly differentiate them from the rest.
Ex: by using notifications (such as hips), color code, snackbar, bold text styles, highlights... lot of possibilities!
→ Avoid too long scroll: only show the last 3 comments/threads on a section might ease the scroll in the lateral bar. We could use a "see all" CTA to open a new layer with all the comments about a particular section. It's only an hypothesis, because users might accept to scroll a lot to see everything in one place ; but it also could be really helpful to ease the navigation and gain better focus on what matters.
→ Possibility to hide/show sections they're not interested to?
Here's a few inspirations of what similar product are doing:
→ Google Chat, Slack, Messenger etc.: notification sur le titre du thread
→ Google Chat, Slack, Messenger etc.: Titre du thread/section en gras
While opening several sections, and inside of them several threads, and also being able to add a new comments, this might be a huge pain point for the user who can easily be lost and annoyed by having to scroll up and down before succeeding to understand where he is/was.
→ being able to expand the lateral bar using horizontal drag interaction, so the user can chose to see more of the video or of the comments.
→ being able to open a thread in an additional layer. Because as said before, having too many "expanded" threads on the same space can quickly be disturbing and painful. Having a layered navigation, if correctly realized, could be a real plus to light the screen and manage comments. Obviously, there would be some elements to empowers a smooth navigation (close, back, overlays...), and the section of the video on the left would still be visible to keep an eye on the context. In this navigation, the user is obviously able to reply to the thread.
We can inspire from Google products.
Claap is for now a desktop-first product. It gives a lot of possibilities of interactions between the several parts of the product. These interactions could be used to help the user to focus on what really matters to him. A few examples of what could be investigated:
→ Each section (title) could be introduced by a few words of the recorder, in order to avoid useless comments and make the team focused on what can and can not be interesting to comment.
Ex :
Level 1 = Section title: Homepage
Level 2 = Intro : "Don't focus on the header RN (has to be updated in a second time), but feel free to discuss about the articles feed"
Level 3 = Threads & comments
→ Hover can then surely be an important behavior in the product experience.
Here's a scenario that could be happening:
When I see new threads/comments I have to check, I'd like to make sure of what it is about, without looking in the video by myself (meaning taking the risk to miss the point), it would be a huge time gain!
Ex:
→ Idea 1 = hovering a thread/comment could make the video progression temporarily go on the video section attached. Not only as a small tooltip preview, but on the whole video screen too. To click on the thread/comment takes the video progress to the exact moment which the comment is about (not as a hover state this time, but as a fixed state.) (NB : Instead of hovering all the comment space, we could use a localisation icon instead.)
→ Idea 2 = more than offering a small tooltip preview of the section (already developed), hovering a section in the video progress bar could highlight the linked comments on the sidebar (quite the same of Idea 1, but in the other way this time.) Clicking on it could automatically filter the comments on the right to only show comments about this section.
Here's a few inspirations of what similar product are doing:
→ Google doc, Notion
For this special case, we have to design the UI of the lateral bar, according to what we said above. We obviously won't have time to do everything we listed (and some of them surely must be discussed before starting iterations), so here's a couple of actions that should be realized by the user:
→ reply to a comment
→ resolve a comment / thread
→ read a thread
→ hover a comment
→ click on localization in comment
→ add a reaction on a comment
→ see all comments of a chosen section
NB: These following ones might have video progress as a starting point and so won't be showed in the following designs:
→ post a new comment
→ hover a video section
→ additional user researches (more discussion with Claap! team, interviews, persona making...)
→ more UI explorations (light theme, other color combinations...)
→ better looking prototypes (and fixed these damn bugs 😩)
→ user tests to generate feedbacks (at least with low fidelity prototypes like InVision)
→ new iterations according to users feedbacks
________________
Si les problématiques de ce cas d'étude sont similaires à celle de votre produit vous pouvez me contacter à cette adresse : laurianeordon@gmail.com
Je tâcherai de vous répondre dans les meilleurs délais !
