AI Recording Pen: Dting AI

Project Role

UI&UX Designers: Lynn Lin, Xingxiu He

Technical Team Members: Qian Gong, Qijian Wan

Project Leader: Dennis Su, Gina Li

My Contributions:

• Participate in the overall user experience design of products and apps to ensure seamless integration of hardware interaction and software interface
• Completed the high-fidelity UI design for the voice recorder app and conducted multiple rounds of user testing and iteration
• Assist the development team in understanding the design logic

Functional Process Demonstration

Dting.AI is a voice recorder app that combines portable hardware with an intelligent voice recognition system. It aims to improve the efficiency of capturing, managing, and reviewing voice content. Through a simple and clear interface, the product helps users quickly complete a complete voice workflow, including recording, categorization, searching, and exporting.

Discover Problems From Target User

Employee A: “I have many meetings in a day, so I make a lot of recordings, which are very painful and time-consuming to listen back to.”

• Users have a large number of meeting recording archives, but because they cannot structure and organize the content, finding useful information is very inefficient

Employee B: “After recording, I can only share it with colleagues through other platforms in a disjointed manner. I often forget to share it after the meeting, which reduces efficiency.”

• In some team collaboration scenarios, the recording is made by one person, but everyone needs the recording

Employee C: “If I suddenly want to record something during a call, it is too troublesome and time-consuming to find and open the recording software.”

• Users hope to start recording in the quickest way and in the shortest time because of many temporary situations

Student A: “Not only does it take a long time to take notes after recording the class, but it also becomes very complicated to listen back to the recording or review the notes, which gives me a headache.”

• The notes users take by listening back are not intuitive and obvious enough

Corresponding Solutions

• Through the voice transcription and tagging functions, users can directly find the corresponding recording files and find the required paragraphs from the transcribed text, saving sorting time
• It supports the sharing and collaboration of recordings and transcriptions. In the team interface, multiple people can view files uploaded by the team and add tags or edit them
• The hardware is designed to be user-friendly, allowing users to start recording with a single button. Furthermore, the hardware and app are integrated to automatically transfer recording files, improving efficiency and convenience
• Supports multiple forms of AI transcription and export, including concise conclusions and mind maps, making the key points of the recording files more intuitive and easy to understand

Product Competitive Analysis

The reasons for Plaud and TicNote’s commercial success stem from market demand. With the surge in information in modern society, the demand for efficient information recording and management is growing, particularly in the business, education, and content creation sectors.

Technology: Plaud AI leverages advanced AI technology to improve transcription accuracy and intelligent features to meet the needs of more specialized and efficient users. TicNote, on the other hand, leverages cloud technology and voice recognition to enable users to more conveniently manage their personal information, simplifying the workflow and capturing the demand for convenience.
User Experience: Plaud AI focuses on the high-end market and professional needs, helping users save significant time and improve work efficiency. TicNote emphasizes simplicity and ease of use, making it ideal for daily record-keeping, catering to the needs of individuals and small teams.
Market Positioning: Both products have clearly defined their target user groups: Plaud AI is more suitable for businesses and professionals, while TicNote targets a broad consumer audience. This has enabled them to find a suitable niche within their respective market segments and gain user recognition.

Functional Organization Mind Map

Before starting the Dting AI project, I created a functionality mind map to clarify the overall framework of both the recorder and its companion app. This process helped me identify key touchpoints in the user journey, as a result, my later design iterations were more focused and user-centered, ensuring that the interface architecture and interaction flows stayed consistent with core user needs.

First Version Prototype

• Software and hardware coordination: You can start using the hardware device after connecting it in the app
• Personal recording workspace: Users can record and edit classified files
• Transcription functions: Recordings can be automatically converted into text through AI, and conclusions, outlines, and mind maps can be generated for users to freely export and share
• Duration system: The platform adopts the strategy of paying for transcription time and using the function

Optimizations Discovered

1. Combine the recording and import buttons into a pop-up, and position the Add Recording button at the bottom for a more appropriate placement
2. The unread message indicator is too obtrusive, it should be moved to the top right corner, where it should be placed alongside regular unread messages
3. Shrink the file category bar
4. Move the device list to the top left, so it expands when clicked, to avoid taking up too much space on the main page
5. The speed playback icon looks more like an adjustment than a clear one, and the pop-up box isn’t very prominent
6. Add a navigation bar and move the profile page into it. The profile page, currently accessed by clicking your profile picture in the top left corner, is too small, making its functionality limited
7. Users can restore deleted files from the Recycle Bin, but its placement at the top of the homepage pop-up window is too obtrusive
8. The profile page’s function access points are scattered across different locations, making them difficult to find
9. Add a team version to facilitate sharing and collaboration among multiple users
10. The time system has been changed to a points system for clearer and more convenient calculations

Second Version Prototype

By referring to the optimization points summarized through user testing and self-reflection, we made corresponding adjustments to the software based on the first version, and after careful consideration, changed the overall color to a bright color scheme to make the software and functions more clearly visible.

Final Version Prototype

The final prototype focused primarily on revising the visuals and overall flow to give the software a more professional look. The prototype showcased how users could interact with Dting AI, from connecting to a recorder and pairing via Bluetooth to managing recordings within the app. It emphasized minimalist design, efficient workflows, and AI-powered intelligent organization.

https://www.figma.com/design/PFFp6uYpj2RQ6CI9GlOEha/Dting-AI?node-id=0-1&t=nq956eKN9VLlDoW5-1

Turning Conversations into Clarity

We designed Dting AI not just as a note-taking tool, but also as an assistant that facilitates thinking and collaboration. By transforming conversations into intuitive and easy-to-understand knowledge, it enables users to easily and efficiently record and share their thoughts. This project demonstrates how design and technology can work together to simplify complex processes and open up new possibilities for professional efficiency. Dting AI embodies a workplace where information flows seamlessly, and of course, it can be applied to a wider range of audiences, enabling people to communicate clearly and smoothly.