


Collab Sauce
A Google Chrome extension that streamlines communication in design teams.
Client: Collab Sauce
Project: Chrome extension
Role: UX Researcher, UX/UI Designer
Tools: Figma, Miro, Maze
Time: 2 weeks (January 2021)
Collab Sauce is a web tool created by designers for designers! It allows designers and developers to collect, organize, and act on website feedback. It promotes collaboration between teams to streamline feedback and ship products faster.
The Chrome extension will allow Collab Sauce users to make edits directly onto a web page. These changes will automatically generate a ticket that goes to Collab Sauce’s project management dashboard where developers and PMs can easily track changes and workflow.
The scope for this project was to determine and design Chrome extension features included in the free plan.
The challenge was to create a free Chrome extension that is valuable enough to be used by anyone from UX design students to design directors. When discussing this project with the Collab Sauce founders, we wanted to focus on a clear distinction between free users and premium (paying) users.
Goals:
I conducted market research, interviews, and surveys to get a holistic view on Chrome extension use, freemium conversions, and Collab Sauce’s unique value.
In doing market research and a competitive analysis, I found our closest competitor offers a 14 day free trial. Collab Sauce could appear to users who want longer access, even if it means limited features. Also, only one competitor is integrated with a project management system, but doesn’t include CSS. Generating CSS in the premium plan could make our service more valuable. Lastly, integrating with a Kanban-style project management system is key to structure and organize design edit tickets.
I surveyed 33 participants including UX designers, design students, front end developers, UX researchers, and PMs. I found:
Users will pay for premium plans if the features are worth it to them.
Users are used to getting alerts when they are nearing the limit of free features. Phrase those alerts as opportunities, not restrictions.
Users determined a product’s value by how often they use it and if it makes their lives easier.
50% of participants use Chrome extensions “all the time.”
Users want convenience and for products to anticipate their needs. I added an “accessibility check” feature to the extension that would scan the site to ensure it meets accessibility standards.
Through this research, I realized the different audiences that would use the free and premium plans…
The collaboration aspect of Collab Sauce is what makes it unique! I wanted to keep that as a core value even in the free plan.
Can access screen annotation, commenting, screenshots/recordings, and accessibility review.
Targeted for freelancers, UX auditors, and design students.
I proposed we market the premium plan as a tool for PMs to streamline communication, assign tickets, and stay on top of projects/teams.
Can access screen annotation, commenting, screenshots/recordings, editing UI elements, CSS output, and accessibility review.
Targeted for UX designers, PMs, and front end developers all working at the same organization.
After research, I created high-fidelity wireframes for usability testing. A challenge that emerged quickly was the limited space for content. I wanted to keep the extension small and unobtrusive to the main web page being edited. This constraint helped me prioritize features and design a very intentional, straightforward interface.
Through moderated testing via Zoom and unmoderated testing via Maze, 35 participants helped validate my Chrome extension.
Using participant feedback, I created an Affinity Map to outline the extension’s strengths and opportunities for improvement.
People supported/validated the extension’s purpose, saying it was something they would definitely use in real life.
The feedback to improve were minor UI fixes, including increasing the contrast of the settings icon and making the “Create Task” button green in the active state.
100% direct completion rate among participants!
Participants understood that the Accessibility Check feature was integrated with another tool (Siteimprove) and didn’t have an issue with that. In fact, it actually increased credibility with Collab Sauce because they felt confident the accessibility check would be thorough.
93% of participants used Chrome as their browser. 1 participant used Safari and was still able to locate and open the extension in the usability test.
Participants rated the helpfulness of the dark mode appearance at 3.8/5.
Extensions are small. They’re meant to complement a user’s task and therefore there wasn’t much space to design in. It was difficult at times to prioritize what information to include. It was an eye-opening challenge that resulted in my design of a very intentional, straightforward interface.
100% direct success in usability testing was huge! I was proud that navigation within the extension was so straightforward, even with challenging testers with so many different tasks.
I was lucky to work closely with the Collab Sauce founders and be part of the discussion of what the Chrome extension will look like moving forward. From here, we plan to design premium features and onboarding to round out the experience for all tiered users.
Once we have the extension up and running, visit Collab Sauce on the Google Chrome extension store to try it out for yourself!