Tagging transcripts in Reduct is an important but disorganized experienced for Reduct users, especially ones in teams. To facilitate easier tag recollection and structured synthesis, I designed and implemented a set of new tagging experiences which primarily revolved around the addition of tag groups and descriptions.
Role
Lead designer, engineer on 5-person team of designers and engineers.
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.
Editing descriptions using keyboard navigation.
Editing the same description using your mouse.
Collapsing groups simplifies the process of regrouping tags via dragging from group to group.
A redesigned tag picker organizes tags by groups and allows searching for descriptions and groups.
The tag picker also sorts tags alphabetically and allows for search within groups with the colon prefix (":").
A new collapsible codebook allows users to view and search through their grouped tags.
Clicking a tag copies the tag name to the keyboard — or directly adds it onto the selected highlight.
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.
First round of exploratory mockups. (Click to enlarge)
Screenshot from first round of user testing.
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.
Current version of tag picker and codebook in product — read more in our official tag management guide.
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.