Reduct.Video leverages video transcripts to enable easy searching, highlighting, and synthesis of recordings into shareable and compelling summaries.
Tagging transcripts in Reduct is an important but disorganized experienced for Reduct teams. To facilitate easier tag recollection and structured synthesis, I designed and implemented new tagging experiences centered around tag groups and descriptions.
Role: Lead designer, engineer on 5-person team of designers and engineers. Disciplines: Interaction Design, React.js. Timeline: June - Dec 2020
This case study is a copy. Its original form can be found here.
Teams using Reduct were abandoning our tagging features entirely.
Our tagging system had long been subject to complaints regarding its disorganization and inability to easily manage tags.
When Reduct teams became unsatisfied with in-product tagging, they either decided against tagging entirely or stored their tags in shared docs and spreadsheets.
Addressing this burden became a high priority for us, given that 65% of Reduct projects involve at least two collaborators.
Observing these teams motivated us to introduce tag groups and descriptions in Reduct.
Teams often needed to categorize and elaborate on their tags — why not include ways to make that happen in Reduct, so that they wouldn't need to do it elsewhere?
A new interface gives users space to edit these tag groups and descriptions across projects.
The tag manager displays groups and descriptions for each tag in a sortable, grouped table view. Tags are easily editable individually, and groups can also be edited in bulk to accommodate for changing high-level insights.
Viewing tags across all projects allows for more high-level synthesis, while filtering tags allows users to quickly find the tag they need and its associated highlights.
Inspired by the interactions in Airtable and Notion tables, the tag manager allows for easy keyboard and mouse navigation, as well as collapsible groups and draggable tags.
Redesigns to the transcript editor accommodate for the new organization tag groups and descriptions bring.
The new tag picker organizes tags by groups and allows searching for descriptions and groups with the colon prefix (":"). Additionally, a new collapsible codebook allows users to view and search through their grouped tags.
Validation and iteration for these features came from multiple rounds of user feedback, including from prototypes I directly coded in the product.
From our first interviews, we realized excitingly that adding tag groups and descriptions set a foundation for many other desired features down the line, such as auto-tagging, cross-project management, and permanent codebooks.
After determining what features were most critical, I rapidly built a beta tag manager, codebook, and new tag picker into the product using React and Material UI components.
Takeaways
Don't jump to polished visuals.
Limited resources and a plethora of different priorities at Reduct meant introducing features in scrappier, user-testable iterations.
Faithful implementation takes time.
Coding up my own designs was enriching, and knowing how much went into translating mockups made me gain an appreciation for design-engineer handoffs.
Do more testing in-product.
In retrospect, I would have made a stronger case for resolving design questions (such as the tag manager's layout) by deploying multiple prototypical solutions in the app.