2023.06 — 2024.03
Meeting Ink APP
Meeting Ink is an AI-powered app that transcribes meetings and generates concise summaries for easy sharing.
Goal
Design a seamless and efficient digital meeting assistant that enhances the note-taking experience by integrating AI-powered transcription, organization, and collaboration features. The goal is to streamline meeting documentation, improve accessibility, and boost productivity for professionals by providing an intuitive, user-friendly interface with intelligent automation.
Product background
In today’s fast-paced work environment, effective meeting documentation is essential for productivity, yet traditional note-taking methods can be inefficient and fragmented. Meeting Ink was designed to address this challenge by offering an AI-powered meeting assistant that simplifies the process of capturing, organizing, and reviewing meeting notes.
With features like automatic transcription, smart summaries, and seamless collaboration, Meeting Ink helps professionals stay focused during meetings while ensuring that important discussions and action items are well-documented. The app is tailored for teams and individuals who need a reliable, intuitive solution to streamline their workflow and enhance post-meeting efficiency.
Role
Product Designer
Deliverables
User Flow
Wireframe
Design System
UI Design
Design Tool
Figma
Cooperate with
1 PM
1 Android & iOS Engineer
Problems
1. Inefficient Note-Taking Process
- Manual note-taking during meetings is time-consuming and often distracts participants from active engagement.
- Important details can be missed, leading to incomplete or inaccurate documentation.
2. Fragmented Meeting Records
- Notes, audio recordings, and action items are often scattered across different tools (e.g., emails, chat apps, cloud storage), making it hard to track and retrieve information.
- Lack of a centralized platform results in inefficiencies and communication gaps.
3. Difficulty in Reviewing & Organizing Notes
- Reviewing lengthy meeting notes is tedious, and extracting key insights requires additional effort.
- Handwritten or unstructured digital notes make it difficult to find critical action points later.
4. Lack of Collaboration & Accessibility
- Sharing meeting notes with teammates can be cumbersome, especially when using different formats or platforms.
- Team members who miss a meeting may struggle to catch up efficiently.
Solutions
1. AI-Powered Automated Transcription
Meeting Ink captures and transcribes conversations in real-time, ensuring that no key details are lost.
Users can focus on discussions without worrying about taking notes manually.
1.1. Intuitive Live Recording Interface
- The live recording screen prioritizes clarity and control. Key actions—start, pause, stop, and resume—are prominently displayed, using familiar visual metaphors (e.g., play and stop icons) to reduce cognitive load.
- A countdown timer displays the remaining time clearly, helping users manage limited recording durations efficiently.
- Users receive visual feedback when the recording is "Processing," ensuring transparency and reducing uncertainty.
1.2. Smart Summarization and AI Features
- The design integrates AI-generated meeting summaries, keyword extraction, and verbatim transcripts in an accessible format.
- Users can easily search, tag, and customize their meeting content—supporting productivity and knowledge management.
- Emphasis is placed on privacy and control, with clear indicators when files are uploading or being processed.
1.3. Consistent Visual Language
- The visual style uses monochrome icons, clean typography, and ample white space to guide attention and avoid distractions.
- System messages like “處理中，請勿關閉APP” are designed in high-contrast areas to alert users without disrupting the flow.
2. Smart Notes with Clear Structure and Scroll-Synced Navigation
2.1. Optimized Meeting Interface for Enhanced Usability
- Clear and Concise Information Architecture
Content is organized using titles, subtitles, and bullet points, allowing users to quickly scan and understand the information.
Meeting names, attendees, dates, summary, and detailed information are clearly separated with a well-defined hierarchy.
- Mobile-Friendly Design
The UI layout adopts a single-column format, making it suitable for small-screen devices.
Proper line spacing and font sizes enhance readability.
Accordion components are used to manage lengthy content, reducing visual clutter.
- Emphasis on Actionability
Meeting name and attendee fields are editable (with input fields and a plus button).
Modules like summary, details, and outcomes are clearly segmented and may allow users to quickly expand or collapse sections.
- Emphasis on Visualization and Marking
The "✅" symbol is used to mark completed or important items, helping users quickly locate key content.
The bullet-pointed structure is ideal for recording meeting decisions and action items.
2.2. Using anchor-linked tabs that auto-sync with scrolling :
- Improved User Experience
Reduces the need for manual tab switching: Users don’t need to manually tap on tabs—simply scrolling through the content automatically syncs with the correct category.
Lower interaction cost: Especially on mobile devices, tapping tabs may feel less intuitive than scrolling. Auto-syncing makes navigation smoother. - Enhanced Content Navigation
Real-time feedback on the current section:
As users scroll, the active tab updates in real-time, helping them understand which category they’re reading and preventing disorientation.
Clear information structure: Users can better understand how the content is categorized, improving overall readability.
- Stronger Sense of Control
Avoids disruptive jumps: Manual tab switching can cause sudden page jumps that break the reading flow. Auto-syncing keeps the experience natural and seamless.
Consistent experience: As users scroll, tab updates help them stay aligned with the content’s structure, reducing confusion. - Ideal for Long Meeting Notes
Quickly grasp the outline: While scrolling, users can easily identify the section they’re in via the tab, speeding up information absorption. - Improves readability: Without this mechanism, users might need to frequently tap tabs to check the content category. Auto-syncing reduces that need.
- Optimized for Mobile Usage
Better suited for small screens: On smartphones, scrolling through long content is more convenient than tapping. This design better matches mobile usage behavior. - Minimizes mis-taps: Small screens often lead to accidental tab taps. The auto-sync mechanism helps reduce the chances of user errors.
2.3. Intuitive and Flexible Playback Controls
- Fix it to the bottom, but integrate it into the playback control area.
When users are listening to a recording, they may need to constantly monitor the playback progress and remaining time. In this case, the "total duration" should be fixed at the bottom together with the playback controls (play, pause, progress bar), making it more intuitive.
- Provide a collapsible playback control
Allow users to expand or collapse the playback control area. When not needed, it can be minimized to avoid interfering with reading.
2.4. Provide Real-Time Feedback
- Users can quickly adjust the speed using a slider.
- Limit the Speed Adjustment Range
Use a discrete slider with fixed steps, such as: 0.5x → 0.75x → 1x → 1.25x → 1.5x → 1.75x → 2x
This allows users to adjust within a reasonable range without overly fine-tuned control that could impact the user experience.
- Avoid UI Clutter
Avoid crowding the main interface with too many buttons—only display the control when needed.
Users can simply click once on "1x" to open the control. Adjustments take effect immediately, making it smoother than using a dropdown menu.
3. Centralized Meeting Documentation
All meeting notes, transcripts, and action items are stored in a single, organized platform.Users can search and filter past meetings to quickly find relevant information.
- User-Centered Design:
The layout is designed to prioritize the user's need for quick access to information. The search and filter functions help users find meeting details rapidly, reducing frustration and boosting productivity. - Streamlined Workflow:
By centralizing meeting documentation, users no longer have to navigate multiple platforms or tools to find information. This creates a seamless experience, encouraging the user to rely on the platform for all meeting-related data. - Consistency:
Keeping all meeting notes in one place ensures a consistent structure. This helps users easily understand where to find information and contributes to better usability.
- Searchability & Filtering:
Given the large volume of meeting notes, a robust search and filtering system makes it efficient to find specific notes or action items. This improves user efficiency and minimizes the time spent sifting through irrelevant content. - Actionability:
Including features for quickly identifying action items helps ensure that the platform isn’t just a repository of information. It enables users to stay organized and take immediate action on key decisions or tasks from meetings. - Scalability:
As the product grows, the design accommodates increasing amounts of documentation and users without losing functionality. Scalability is ensured by using a clean, navigable design that doesn't overwhelm the user with excessive data.
4. Seamless Sharing
Teams can easily share notes .Integration with popular work tools (e.g., Slack, Notion, Google Drive) ensures smooth workflows.
.gif)
Smart Notifications for Summary & Follow-Up
Creating an AI summary takes time, so we designed a push notification system to alert users once the summary is ready. This notification also serves as a reminder to send out meeting minutes. Users who are busy can choose to send the content later—simply by clicking the document on the home page.
Reducing Anxiety in Sharing
To reduce anxiety around syncing notes, a pre-submission confirmation step is included. This allows users to quickly review the content and destinations before sending, giving them a sense of control and reducing the risk of accidental sharing. The design accommodates different user mindsets: those who want to send quickly can rely on the summary; those who want to double-check can easily preview the full note; and those who worry about mistakes gain confidence from the confirmation flow.
Flexible Multi-Destination Sync
Since meeting notes are often stored in multiple folders or platforms, we support multi-destination syncing to reduce repetitive copy-paste actions and improve efficiency. To streamline the process, a search function helps users find folders quickly, while checkboxes offer an intuitive and scalable way to select destinations. Recognizing that not all users require advanced sharing settings, we made this step optional by providing a link in the "Share Settings" area, allowing users who want more control to access it as needed.
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
Recruitment APP
#B2B #APP #iOS #Android #UI #UX #Design System #Recruitment
.gif)
.png)
.gif)
