Led product design by using UX tools to clarify goals and proactively communicated with stakeholders to drive the project forward.
Key result
DAU Increased by 57%
Established a Strong Foundation for Introducing AI Features in the App
Role & Timeline & Company
end-to-end UI/UX designer
2023 02-07, 2024 04-05
MixerBox
My main contribution
Clarified team and user needs as a UI/UX designer through user testing and quantitative data analysis to identify pain points.
Generated ideas using an AI-assisted level framework, successfully aligning stakeholders on a shared vision.
Created multiple prototypes for testing and iterated based on feedback.
Balanced the interests of users, engineering, product, and stakeholders to drive the project forward.
Challenge
Stakeholders→
Uncertainty in AI integration
Stakeholder interviews revealed that their confusion stemmed from wanting to integrate AI into the product without a clear strategy or direction.
Users →
Core functionality blocked
The core experience of using the search function to retrieve information was frequently disrupted by navigation problems, such as the inability to move forward or go back, leading to a disorganized information space and severely impacting the user experience.
Product →
Stagnant DAU
The app's daily active users had remained stagnant for over six months with no growth.
Strategy
1
Stabilize the core product experience.
Desk Research
Cognitive Walkthrough
Interviews
2
Identify
user pain points.
User Analysis
User Journey Map
3
Define AI’s value.
AI Framework
Explore AI’s role
4
Design &
User Testing
Usability test
Interaction Design
UI Design
Research
What we did:
Desk Research:
Inquired with Customer Support about the most frequent user complaints.
Cognitive Walkthrough:
Evaluated the product flow, particularly issues with the "inability to return or move forward" and the disorganized information space.
Interviews
User Profile:
Age: 40-50 years old (60%)
Key User Flow
Exploring the Information Browsing
User Pain Points
I used a user journey map to break down each step's pain points, then categorized them based on user emotional fluctuations.
Identified the most critical pain points where we could make the greatest impact.
Crucially:
Users exhibited clear negative emotions during the process, indicating a significant usability issue.
Opportunities 1
Viewing webpage content with AI assistance
Pain Point 1
Browsing disrupted by ads
Excessive advertising within the content disrupts the user's ability to focus and absorb information. Constant ad interruptions create a frustrating experience and hinder comprehension.
Opportunities 2
Search process improvement
Pain Point 2
Broken Search
The inability to re-initiate a search from within an information page due to a frozen search function leads to user abandonment. This critical flaw disrupts the user's flow and prevents further exploration.
Goal
Ideation
User Testing
Positive Results：B and C
High User Satisfaction
B and C received a satisfaction rating of 9 out of 10 in testing, with every user impressed.
Delightful Experience
Users experienced an "A-ha" moment with B, feeling pleasantly surprised.
Efficiency Boost
C allows users to see answers directly without clicking into the content page, making it highly efficient.
☹️
Negative Results：A
Lack of Personalization
A：without personalization, struggled to provide meaningful assistance.
Implement both B and C:
User feedback on B and C was highly positive. Based on technical feasibility, product goals, and time constraints.
Constraints:
Ads Cannot Be Removed
Final Design
1
Why use a half-window
Users can still see the original content at the bottom.
2
Why use a conversational format
Why use a conversational format:
If users want to delve deeper, they can directly interact with this window for queries, eliminating the need to open another search box.
After releasing the MVP, the next goal is to make AI responses clearer and more apparent.
Based on user feedback, I have optimized the process to ignore the AI block while loading. Additionally, users will now see the responses from the AFS below first, potentially ignoring this block.
1
A collapse button serves as a cost-reduction mechanism.
For the first three uses by the user, results will automatically display. On the fourth use, results will be collapsed by default, but users can manually expand them if needed.
2
The "More Summaries" button is placed at the highest visual level.
Encourage users to interact further with the MB AI bot to experience the "a-ha" moment, which could lead to app subscriptions.
3
Users can further inquire about related issues through interaction.
4
Add headings to create visual sections.
Make it easier for users to visually distinguish AI responses from regular search results at a glance.
(using tab pages as an example)
DAU Increased by
57%
Bringing Long-Term Value
Established a Strong Foundation for AI Integration
Focusing on AI Design Direction and Aligning Team Consensus
One-click Quick Summary
Enhance users' browsing efficiency and experience by seamlessly integrating AI tools as intelligent assistants.
Display a summary response of AI on the search result page.
Enhance users' browsing efficiency and experience by seamlessly integrating AI tools as intelligent assistants.
Optimized Search Flow
Refine the search experience to establish a strong foundation for user engagement and retention.
Business Need
AI Integration for Enhanced Competitiveness
Seamlessly integrate AI tools into the browser to enhance product competitiveness.
Team Goal
Foundation for Future AI Features
Established a solid foundation for incorporating AI features into the app, setting the stage for smoother and more efficient development in the future.
Unified Cross-Platform Processes
Standardize workflows across platforms to reduce inconsistencies and lower maintenance costs.
Decomposing Goals for Effective Collaboration
Actively employed UX design tools to break down ambiguous goals, foster proactive communication with stakeholders, and align both internal and external teams to successfully advance the project.
