2023.06 — 2023.12
Meeting Ink APP
Let AI help you effortlessly create meeting records and summaries.
Goal
We want to help users automatically make the notes and transcripts by AI when they finish the meeting. Automatically generate meeting minutes and key summaries, and conveniently distribute AI-generated summaries through email and communication tools: The AI-recorded content will be automatically sent to you or your team, allowing easy editing, forwarding, or archiving of the records.
Product background
In today's fast-paced business environment, effectively documenting and sharing meeting content has become increasingly crucial. However, manual note-taking during meetings is time-consuming, labor-intensive, and prone to missing important details.
Role
Product Designer
Deliverables
User Flow
Wireframe
Design System
UI Design
Design Tool
Figma
Cooperate with
1 PM
1 Android & iOS Engineer
Problem
- Sometimes during meetings, users accidentally zone out, fearing that they might have missed some important points. They end up asking their colleagues around to piece together the missing parts from memory...
- Users need to meticulously compile meeting notes in the required format(Date, Participants, Contents...).
- Users send files to the colleagues who attended the meeting via email or messages.
- Even if the meeting is recorded, going through a 1hr+ long video and adjusting the playback speed or fast-forwarding is still time-consuming.
Solution
Automatically generate meeting minutes and summaries
Instantly transcribing the conversation in meetings, transforming speech, discussion highlights, and decision records into text-based meeting minutes without the need for manual intervention.
Key Summary Generation: The software can identify key information and primary content in meetings, automatically generating concise meeting summaries to help users quickly grasp the core content of the meeting.
The voice recording interface
V1.
V2.
The voice recording interface in version 1 will be simple for engineers to implement but resembles a button. In contrast, the waveform graphic in version 2 offers more visual feedback, appealing to users who prefer a detailed depiction of the audio recording process.
Typically, the recording button is red, as this color is highly visible and universally associated with recording due to its connotations of urgency and alertness. Therefore, the recording button should be red.
To accommodate multiple languages, the button should be positioned vertically and it will make users to press the button.
Thus, version 2 is a better option.
Loading design
After discussing with the engineers, he explained that some files are large and require more time to process. Considering edge cases, it might take a few minutes, which could lead some users to think the system is malfunctioning. Therefore, we inform users that we will send a push notification once the processing is complete.
Additionally, display a toast notification to remind users not to close the app, as this could prevent the file from being saved.
Facilitate users in filling out the meeting information
To enhance user experience and streamline the process, we'll implement a tagging system. Users can create and assign tags to participants or groups. When scheduling a meeting, users can easily invite participants by selecting either their pre-created tags or individual names. This feature will save time and reduce errors by allowing users to quickly add multiple participants who share a common tag, rather than manually selecting each name.
Tag UI Design
Differentiate between tags and buttons while ensuring visual cohesion.
Additionally, considering the various states of the button, which are white and light gray, using gray as the background color for tags is not an option.
After experimenting with different versions, I decided to use opacity settings for the tag design (V3).
For the convenience of users in selecting participant lists, a frequently used list is created, linked with participants' emails, facilitating the later transmission of meeting records to participants.
Users can also add participants to the meeting using previously created tags or names.
Allow users to easily categorize groups by implementing a tagging system similar to Gmail's. Users can create custom tags and assign colors to these tags, making it visually intuitive to identify and organize groups. The color of each tag will be displayed alongside the group, helping users quickly recognize and sort their groups based on their chosen color-coded categories.
Share and send meeting records/files
Users can share the meeting AI summaries and transcripts with the relevant individuals via email.
The product will be marketed globally, and meetings may involve people from different countries, the option to choose the verbatim transcript language is available.
Understand the content quickly by viewing the words
Considering the user scenario, the meeting might be lengthy, so to help users comprehend the meeting quickly, they can view the text.
Moreover, users can swiftly grasp the content through the text, and when they click on a sentence, the slider button will move to the corresponding position.
Design System
This app uses the Design system of Noise Eraser including button, input, navigation bar, and checkbox.
Takeaway
1. Finding similar product references to draw inspiration from their designs, analogous process setups, and usage logic is crucial to keep the user learning curve low.
2. To make users focus on the primary actions avoid placing distracting information within the UI interface.
3. Before commencing production, the boss often wishes to see results quickly. However, creating a User Experience (UX) requires resources and time. It is crucial to explain the importance of this undertaking and inform relevant stakeholders about the amount of time and resources other companies invest to achieve similar results. If it's not possible to allocate the necessary resources and time, expectations may need to be adjusted.
Related Digital Products
Nosie Eraser APP & Website
＃AI Denoise ＃Cross-platform design ＃Web ＃APP ＃Ｂ2C ＃Ｂt2B ＃User Research #Design System ＃UI Design ＃UX Design
