MagicSurvey

Optimizing prompt input and design system for an AI user research tool

Optimizing prompt input and design system for an AI user research tool

My Role

Lead UX designer

Timeline & Status

6 weeks
Shipped in Q3 2024.

Team

1 product manager
1 designer (me)
2 software engineers

Tools

Figma, ProtoPie

Skills

Interaction design
Visual design
Design systems
Rapid prototyping
Usability testing

Handoff

THE OPPORTUNITY

THE OPPORTUNITY

THE OPPORTUNITY

THE OPPORTUNITY

THE OPPORTUNITY

As ByteDance’s internal AI-Native Product for the company's user research team, MagicSurvey was newly launched in Q1 2023 and have being used by 40K+ users company wide. However, due to the complexity of its homepage and poor visual design, the product suffered from low retention rate and low task success rate.

As ByteDance’s internal AI-Native Product for the company's user research team, MagicSurvey is a new product used by 40K+ users company wide. However, due to the complexity of its homepage and poor visual design, the product suffered from low retention rate and low task success rate.

As ByteDance’s internal AI-Native Product for the company's user research team, MagicSurvey was newly launched in Q1 2023 and have being used by 40K+ users company wide. However, due to the complexity of its homepage and poor visual design, the product suffered from low retention rate and low task success rate.

MY ROLE

MY ROLE

MY ROLE

MY ROLE

MY ROLE

As the sole UX designer, I proposed the redesign solution to the product leaders and worked closely with UX researchers and ML engineers, owing the end-to-end redesign of the homepage, improving its overall usability and contributing components to the design system. The redesign was launched in Q3 2024, and received amazing results.

As the sole UX designer, I proposed the redesign solution to the product leaders and worked closely with UX researchers and ML engineers, owing the end-to-end redesign of the homepage, improving its overall usability and contributing components to the design system. The redesign was launched in Q3 2024, and received amazing results.

IMPACT

IMPACT

IMPACT

IMPACT

IMPACT

37%

37%

growth in the monthly retention rate

26%

26%

increase in task success rate

7%

7%

improvement of the monthly churn rate

REDESIGN AT A GLANCE

REDESIGN AT A GLANCE

REDESIGN AT A GLANCE

REDESIGN AT A GLANCE

REDESIGN AT A GLANCE

Before

After

FINAL DESIGN

FINAL DESIGN

FINAL DESIGN

FINAL DESIGN

FINAL DESIGN

MagicSurvey is internal AI-Native Product for ByteDance's employees. With over 40K+ users, it uses text-based AI prompt to generate survey questionnaires, summaries, and interview outlines.

An extensive AI prompt input library, guiding users to write more accurate prompt based on different use cases.

Creating a consistent visual identity and interaction modes for the product's Design System, identify new color systems and introducing new icons.

THE PROBLEM

THE PROBLEM

THE PROBLEM

THE PROBLEM

THE PROBLEM

MagicSurvey's H1 2023 data shows the product suffers in low user retention rate and low task success rate, with significant user drop out at its homepage.

Low Retention Rate

-50%

More than 50% of the users dropped off after landing at the home papge.

Low Task Success Rate

-63%

More than 63% of the generated content were not exported.

PAIN POINT DEEP DIVE

PAIN POINT DEEP DIVE

PAIN POINT DEEP DIVE

PAIN POINT DEEP DIVE

PAIN POINT DEEP DIVE

What isn't working for the current homepage?

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 with writing accurate AI prompts.

IDENTIFYING THE GOALS

IDENTIFYING THE GOALS

IDENTIFYING THE GOALS

IDENTIFYING THE GOALS

IDENTIFYING THE GOALS

After evaluating the existing problems, I worked closely with the product managers to align our design goals, solving user pain points while aligning the product's long-term goal in becoming an AI tool that is intuitive, clear and delightful to use.

Optimize user flow, allowing users to clearly navigate core functions, easily understand and choose templates based on different use case.

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.

DESIGN GOAL #1

DESIGN GOAL #1

DESIGN GOAL #1

DESIGN GOAL #1

DESIGN GOAL #1

Optimize user flow, allowing users to clearly navigate core functions, easily understand and choose templates based on different use case.

DESIGN PROCESS

DESIGN PROCESS

DESIGN PROCESS

DESIGN PROCESS

DESIGN PROCESS

Restructure the information architecture to highlight the discoverability of template cards, allowing users to quickly discover and choose.

Old information architecture

New information architecture

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

DESIGN GOAL #2

DESIGN GOAL #2

DESIGN GOAL #2

DESIGN GOAL #2

DESIGN GOAL #2

Create an AI prompt input library, providing users with prompt examples for each template type.

DESIGN PROCESS

DESIGN PROCESS

DESIGN PROCESS

DESIGN PROCESS

DESIGN PROCESS

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.

DESIGN GOAL #3

DESIGN GOAL #3

DESIGN GOAL #3

DESIGN GOAL #3

DESIGN GOAL #3

Creating consistent visual identity and interaction modes for the product's Design System.

FINAL DESIGN

FINAL DESIGN

FINAL DESIGN

FINAL DESIGN

FINAL DESIGN

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.

TAKEAWAY

TAKEAWAY

TAKEAWAY

TAKEAWAY

TAKEAWAY

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.