.png)
May 2024 - August 2024
Product Design Intern
Increased viewing comment activity on Replay mobile web by 18%
100% of users tested stated that the new interface will improve their workflow
Content creators and reviewers typically exchange feedback on videos by commenting, annotating, and starting a live review on the video file. Because Replay is linked to Dropbox, users can easily import files from Dropbox to Replay to get started on the collaboration process.
I was given the ambiguous prompt of "improve Replay mobile web" which could involve anything from sharing to commenting to file features. Also, no one on my team really knew what Replay users did on mobile web. Up until that point, Replay was focusing on its desktop experience and there wasn't a lot of love given to its mobile web experience. Here's a snapshot of what Replay looked like before on its file collaboration page:
.png)
Based on user suggestions on the Replay forum, mobile users primarily wanted to view the comments and leave more precise feedback with time-stamped comments and annotations.
.png)
↓
Viewing comments is consistently the top action, even more frequently done than watching the video in default mode or leaving comments. However, the data still didn't show what order users were performing these in.
.png)
One user can switch personas depending on what feedback stage they're in. For instance, a file owner might start out as a Spectator by watching the entire video, viewing comments, and then addressing comments, but in feedback round 2, that same file owner might be a Viewer and only view comments on their phone.
.png)
Viewing comments is a critical and early component of the feedback process for both file owners and reviewers. Since viewing comments was very difficult and time-consuming on the old interface, users were frustrated by the time they continued their workflow. Users had to return to that frustrating experience each time they wanted to view comments, which is why some users explicitly stated "I only go on mobile web if I absolutely have to."
.png)
Since viewing comments was a major pain point for all users, I focused on examining how other video tools make it easier to view comments.
.png)
Frame.io web
🟢 Can expand comments section or video by dragging the bar
🟠 Bar isn't discoverable or intuitive
YouTube web
🟢 Can expand comments section to full screen view by swiping modal
🟢 Modal is an intuitive pattern
🟠 Covers the video
Wipster web
🟢 Can expand comments section to full screen view by swiping modal
🟢 Modal is an intuitive pattern
🟠 Covers the video
Examining 10+ apps in social media, streaming, video collaboration, and documentation helped me understand what existing mobile patterns look like for video-related commenting as well as commenting in general. For instance, comment markers were frequently used on video collaboration apps, whereas modals were frequently used in social media apps.
The first milestone was focused on increasing how many comments users can see by default, at a glance or by scrolling. The new design allows users to view 3 comments at once rather than less than 1 comment.
.png)
Old design
🟠 Can barely see 1 comment
.png)
Reduce padding and font size
🟡 Can see 2 comments at a glance
Reduce comment box padding
🟢 Can see 3 comments at a glance
Users may also want a way to see more than 3 comments at a glance — for instance, one user stated that they "liked full-screen comments." Competitors have already found ways to show more comments, but I wanted to explore beyond what they have done.
Interactions that automatically expand the comments section
When scrolling
🟢 Can see lots of comments
🟢 Complements existing workflow
🟠 Moving the video back to original state might be jarring
When pausing
🟢 Can see lots of comments
🟢 Complements existing workflow
🟠 Hard to see video when paused
🟠 Moving the video back to original state might be jarring
At end of the video
🟢 Can see lots of comments
🟢 Complements existing workflow
🟠 Hard to see video when paused
🟠 Moving the video back to original state might be jarring
Content design that informs the user to expand the comments section
Message
🟢 Message may improve blue bar's discoverability
🟠 Unclear when the message would disappear if user is consistently logged out on mobile web
Tooltip
🟢 Can help users understand blue bar's function
🟠 May be annoying if tooltip appears with "slips"
🟠 Tooltip can take up real estate
Visual affordances inform the user to expand the comments and/or the video
Blue bar
🟢 Blue draws attention to feature
🟢 Can see more comments/video
🟠 Dragging may not be intuitive or discoverable
Drag bar
🟢 More intuitive that it's draggable
🟢 Can see more comments/video
🟠 Looks like a desktop hover state
.png)
Modal
🟢 More intuitive that it's draggable
🟢 Common mobile pattern
Mobile users can only see unresolved comments on mobile web rather than being able to see unresolved, resolved, and pinned comments like they would be able to on desktop. Additionally, there aren't comment markers on mobile that allow users to see shot-based feedback easily.
Comment filters
🟢 Filter for unresolved, resolved, pinned, and all comments
🟢 Don't have to go on desktop to view all comment types
Comment markers
🟢 Can now jump to a comment from a comment marker
🟢 Easier to view comments without having to scroll
🟡 Tricky to make comment markers tappable without sacrificing too much screen real estate
📈 User retention increases because it is now easier to view and leave comments
📉 Workflow time decreases because viewing comments is now faster
👀 All users stated that they can view more comments on average by default
🥰 All users liked how the modal allows them to view more comments and/or video
View more comments at a glance. Plus, view more of the video whenever you need to
Swipe or drag the comments modal to flexibly adjust your view. Need to see the video in more detail? Expand the video. Need to get a full look at the comments? Expand the comments.
Filter for unresolved, resolved, and pinned comments
Access comments that are hidden by default. Quickly view resolved, pinned, and all comments right on your phone to see the comments history.
Jump to a comment from a comment marker, or do it the other way around
Easily identify shot-based feedback with visible video markers. Never have to scrub to the exact shot again.
Easily emoji react to a comment
+1 your project member's comment in two taps. Plus, you can now see the emoji button at all times.
Annotate to draw out what you mean
Make precise visual notes on a video so that everyone is on the same page. Type out a comment to make it even clearer.
📊 Data is critical for understanding user workflows and guiding prioritization
Starting out, no one really knew what users did on mobile web. The insights I got from clickstream data, user interviews, and user testing were invaluable and guided me toward the main problem that all users faced.
💭 Consider design solutions that don't require the user to do anything manual
Although none of the "non-manual" design solutions made the final cut, it was cool to explore automatic interactions that complemented existing workflows. "Don't make me think" guided my process for these interactions
🖥️ Develop a relationship with engineers early on to discuss technical feasibilities
Mobile web is a tricky territory to be in — different devices and operating systems have different functional capabilities, and not to mention the huge lack of screen real estate across all devices. Bringing my ideas to engineers early on helped me understand which ideas weren't worth the technical difficulty and which were the easy wins.
