Fireflies AI
UX Case Study
Context
The Fireflies Story
During their days at MIT and UPenn, Fireflies founders Sam Udotong and Krish Ramineni were passionate about tapping into frontier tech, and worked together on several projects involving machine learning and deep learning challenges.
What they soon realised was that there was an even more critical data source that was being completely overlooked.
With rapid advancements in automatic speech recognition (ASR) and decreasing costs of GPUS, the timing was right for Fireflies. Accessibility is a core part of Fireflies, and today it integrates with every major web-conferencing platform, such as Google Meet, Zoom, and GoToMeeting. Unlocking voice conversations starts with going to the source of that data and it all started as a voice AI product in 2016
About the project
By capturing conversations, transcribing meetings, and making them easily searchable, Fireflies creating an automated knowledge base for organization. This past year, Fireflies has been in meetings, taking notes for over 2 million people across 200,000 orgs. That is equivalent to several centuries of meetings compressed in a short period of time. Whether it’s key feedback from customer calls, important intel during hiring interviews, or decisions made during all-hands meetings, Fireflies helps your team document and collaborate around the voice of your customers, candidates, and employees.
Fun fact🤘
During my exploration, we needed a mascot to represent the Fireflies's assistant bot ( Read Fred).
As an illustrator, I used my skills to create one that has since become trendy, and that little guy is still in use by the company.
My role
As a Lead product designer who’s thrilled with the rise of AI driven experience design, I couldn’t help myself or stop my impulse to design something which has no reference, means it will be one of a kind platform with a large spectrum of scopes for exploration ensuring easy of uses for the users
My contribution to the project was helping the design team with user research, persona, and roadmap discussions, feature scope and planning, conversation mapping and leading the outline of the AI product for the first time. The project started out targeting small business entities who relays on sales calls mostly.
After a couple of months of testing and tech revamp we built around the true commercial aspect of it.
One of the keys to the success of this project was that we collaborated directly and kept the conversation at a high and strategic level at all times.
Setting the Initial Goals
All of the world’s most valuable information is communicated verbally every day in meetings, phone calls, classes, and interviews. Until now, it’s been difficult to capture, review, and share these important moments accurately, all in one place.
so we didn’t want the experience to feel like more of work.
After a meeting, the most important step is record, sharing the notes and next steps. With a lean UX research phase, we found conversation members felt more at ease with recordings if they knew everyone present could access the finished transcription.
Our mission is to help Marketing, Sales, Support and Recruiting people to be productive
wherever they are located. Help reduce their mundane and repetitive task and give them breather
Knowing our customers
The idea is to use Fireflies as a hook to leverage the vast information lost during a business conversastion to help the user be productive and leverage their time to high value leads without spending time on searching the information lost on calls! It sounds strange coming from a product company when user engagement is measured by how much time he/she spends on a product.
Insights from customer research
➊ The engagement period is longer
➋ Phone calls are still the most used
➌ Time and Data lost during meetings
What did we want to focus on?
Recording
Instantly record meetings across any web-conferencing platform. It's easy to invite Fireflies to your meetings to record and share conversations.
Transcribe
Transcription of live meetings or audio files that user upload. Skim the transcripts while listening to the audio afterwards.
Collaboration
Adding comments or mark specific parts of calls to quickly collaborate with teammates on important moments from your conversations.
Search
Review an hour long call in less than 5 minutes. Search across action items and other important highlights.
What we have followed
Process
These remote workshops all included a goal-setting session to ensure we were all on the same page in terms of high-level direction.
The prototype was then tested and iterated on a weekly basis for the remainder of the project version's duration. The initial usability tests, as is always the case, revealed multiple problems from the originals that hadn't been solved, as well as new ones that arose from the new design, and paved the way for weekly conversations.
Design Cycle
Version 1
2018 - 2019
Version 2
2019 - Jan 2020
Version 3
2020
Tools
Adobe CC
Figma
Smartlook
Test Protocol
Persona
Feedback
Heatmap
Design QA
Design philosophy
Based on our research, people capture the important points of a meeting in very different ways. We knew the ability to edit and highlight important notes was essential. Using in-line editing and one-tap saving, the interface seamlessly allows users to make up for any of Fireflies’s misinterpretations.
Using a clean interface with interjections of friendly colors and typography, our designs aim to delight new users. The challenge lies on making complex mechanism with easy of usability and trimming the confusion down as much as possible
Designing Experience
Challenge
The main challenge with fireflies was to allow users to share a transcript or a portion of a transcript with their peers. This was critically important in order to give users more control over collaboration and ownership.
Solution
Our primary goal was to encourage Fireflies users to invite their peers to collaborate on their conversation notes, making sharing simple, intuitive, and enjoyable. Leaving a pin, thumbs up, or thumbs down at various points throughout the call so that teammates can return to that point and listen to what was said.
Challenge
Because users are working with large amounts of conversation data, it was critical for them to search for import sections and locate any critical subjects they needed to address.
Solution
Making it simple to search, not just for keywords, but also for topics such as action items, dates, times, metrics, questions, sentiment, and more.
With the click of a button, you can create your own custom topic trackers to automate finding discussions about objections, pricing, competitors, and so on.
Playful Interaction
Product gallery
Dashboard UI
Mobile UI
Transcribe UI
Chrome Extension
Extension UI
Takeways
As the weeks passed, these issues were addressed one by one until, in the final weeks, test participants were able to fully comprehend the value of the product and use it without any instructions. Finally, we iterated on the design's look and feel with Krish, the CEO of Fireflies, and after a few rounds of feedback, applied the final decision to the interface, which is a standard practise in the Fireflies design mechanism.
We exported the final designs to XD's developer preview, a handoff tool that simplifies collaboration with developers by providing all the specs and ready-to-implement CSS, at the end of the project.
These designs included all of the screens for the features we were working on, as well as various states and edge cases, in addition to guidelines for the mobile version.
We also created a user interface kit with clear guidelines and rules to assist Fireflies in maintaining design consistency when developing new features in the future.