ByteDance
Optimizing AI prompt guidance for an AI-native research tool
Lead UX designer
6 weeks - shipped
1 product manager
1 UX designer (me)
2 software engineers
Figma, ProtoPie
Interaction design
Visual design
Design systems
Rapid prototyping
Usability testing
Eng handoff
MagicSurvey is ByteDance’s internal conversational AI product for the UXR team, with 30K+ MAU. However, due to the complexity of its homepage and poor visual design, more than 50% of the users drop off after and at the prompt input step.
As the sole UX designer, I proposed the redesign solution to the product leaders and worked closely with front-end and ML engineers.
Drove the entire research process by conducting semi-structured interviews, surveys, and competitive analysis; all in conversation with XFN.
Shipped the end-to-end redesign of the AI prompt-input guidance, improving its overall usability for 40K+ users.
Revamped product design system's color, icon, and 15+ components to be used across 3+ AI-assisted product lines.
growth in the monthly retention rate
increase in task success rate
improvement of the monthly churn rate
Most AI users struggle to write an effective prompt in natural languages.
MagicSurvey's H1 2023 data shows that more than 50% of the users dropped off after or during the prompt input step, with low task completion rate.
Generated content isn't accurate enough due to poor input guidance.
Users are not satisfied with the generated content, with more than 63% of it not exported, leading to a low task success rate.
Give users a more intuitive AI prompt input experience with optional template, structured inline guidance and option for prompt re-edit.
Through a complete revamp of the homepage, I redesigned the AI prompt user flow and visual system with a focus on clear, simple, and intuitive flow.
Before
After
Provide users with options to use template AI prompt cards with more contextual information.
Collaborating with ML engineers, I designed template cards by tuning 3 AI agents based on different use cases, providing the back-end pipeline with more contextual information that leads to a more accurate result.
Consolidate an extensive AI prompt input library, showing examples based on user's preferred use case.
Users want to see examples for better prompt input, but also wants options to re-edit and adjust based on their own needs.
Use visual and color guidance to differentiate multiple AI agent modes, while keeping high-level consistency across the product brand.
Creating a consistent visual identity and interaction modes for the product's Design System, identify new color systems and introducing new icons.
The current homepage's over-complicated multi-step AI guidance creates more friction than assistance.
Complicated task completion process with low discoverability for the more useful buttons.
Inconsistent of prompt input format and information architecture lead to user confusion.
Users struggle to write accurate AI prompt due to the complexity of their task, lack of structured guidance, and examples.
How might we create an intuitive and delightful AI prompt experience that lets users choose their level of guidance based on their specific use case?
Optimize user flow, allowing users to clearly navigate core functions, understand and choose templates.
Create an AI prompt input library, providing users with prompt examples for each template type.
Creating consistent visual identity and interaction modes for the product's Design System.
Optimize user flow, allowing users to clearly navigate core functions, easily understand and choose templates based on different use case.
Restructure the information architecture to highlight the discoverability of template cards, allowing users to quickly discover and choose.
Old information architecture
New information architecture
Reduce usability friction by simplifying task completion process from 5 steps to 3 steps.
Visualizing new information architecture and user flow through design iteration.
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Create an AI prompt input library, providing users with prompt examples for each template type, vadliate design through testing.
Tailoring the AI prompt input library component to our researchers' need, validating design through testing.
default
activate prompt library
Through usability testing with 9 users, I evaluated the pros and cons of each option, fine tuning the interactions based on our users' feedback.
Creating consistent visual identity and interaction behaviors for the product's design system, to be used across 3+ product lines.
Establish visual hierarchy based on functions and different usage sceneriors.
Default state
With AI prompt library
Creating brand new color system and defining different usage sceneriors.
Establishing reusable components for the product design system, including template card, prompt input bar and 10+ new UI icons.
Proactiveness lead to opportunities.
This project did not start with a Product Requirement Document (PRD), instead it was initiated by me after researching the product's H1 2024 report and user feedback pool. I approached the insight and the solution of a homepage redesign to the product team, therefore, the initial phase of this project was largely driven by my proactiveness: pitching to the product manager, learning more about the machine learning engineers, consulting other ux designers, looking across the competitive landscape etc.
Approach design with a system mindset.
Designing with a system mindset is crucial for the product growth. By defining a consistent product design system with components and patterns not only provide a user-centered approach, but also saves time in the long-term product growth. It lets me focus on solving new challenges instead of reinventing the wheel, helping me iterate faster and deliver a smoother user experience
Critical feedback is a gift.
I’ve found that critical feedback is one of the most valuable tools for improvement. It helps me uncover blind spots, challenge assumptions, and see things from perspectives I might have missed. Instead of taking it personally, I try to view feedback as a chance to refine my work and create a better experience for users. Every suggestion, even the tough ones, gives me an opportunity to iterate, grow, and ultimately design something more impactful.
