Key Takeaways
In-depth Exploration and Implementation of AI Multi-functional Interfaces
Mastery of Design Details and Dynamic Workflows
Role & Timeline & Company
UI/UX Designer
2024
Side project
Background
During a team brainstorming session on how to design the results page for an AI feature displaying various types of information, we explored different layout and interaction possibilities.
Target Audience
The primary users of MB AI are predominantly Player users who listen to music frequently.
Concept 01
Vertical card layout
The first card displays the AI response, followed by AI-recommended music based on keywords, encouraging users to continue engaging with the platform.
Concept 02
Partially covered tab layout
Assuming that AI responses and music recommendations best meet user needs, these two types of information are given the most prominent display.
Concept 03
Horizontal card layout
Category tags are displayed at the top, allowing users to easily see the different types of information available for browsing.
Key Takeaways
In-depth Exploration and Implementation of AI Multi-functional Interfaces
Through this project, I deeply explored the presentation of AI multi-functional interfaces and attempted to implement an unfinished MB AI structure.
I learned how to gradually display complex tasks, incorporate citation references, and effectively utilize AI interaction patterns to enhance user experience.
Mastery of Design Details and Dynamic Workflows
I realized that design is not just about individual screen aesthetics, but also about considering dynamic transitions and component movements between screens to ensure a seamless user experience.
Additionally, I improved my skills in design naming conventions and managing frame structures in Figma, making the design process more organized and collaborative.