3Play Media
Redesigning a complex B2B SaaS Video Accessibility & Localization service order form to reduce errors.
Role
Lead UX Designer
Team
2 UX Leads, 1 Product Manager, 1 Product Marketer, 3 Consultants
Timeline
Aug 2025 -
Dec 2025
Tools/Skills
UX Research, UI Design, Figma, Cursor, Client Relations
what did i do?
I led the redesign vision for the service order form to reduce support tickets and order errors.
The original service order form for 3Play Media was failing because users couldn’t make confident choices, therefore they couldn't predict the results. Each incorrect order created support tickets, manual intervention, and delayed media publishing. I led the redesign of a B2B SaaS ordering system used by 10,000+ clients, focusing on reducing decision uncertainty.
what did i do?
I led the redesign vision for the service order form to reduce support tickets and order errors.
The original service order form for 3Play Media was failing because users couldn’t make confident choices, therefore they couldn't predict the results. Each incorrect order created support tickets, manual intervention, and delayed media publishing. I led the redesign of a B2B SaaS ordering system used by 10,000+ clients, focusing on reducing decision uncertainty.
My redesign dropped it from 25% → 5%, reducing Operational Risk by 80%
In the final testing, users can complete compliance-sensitive orders independently rather than relying on support tickets (manual intervention).
In the final testing, users can complete compliance-sensitive orders independently rather than relying on support tickets (manual intervention).
USER INTERVIEWS
I interviewed 4 internal employees that assist customers with the order form.
The goal is to identify the friction points in the current ordering process to inform a redesign that will allow customers to self-serve and rely less on company support. The participants are Customer Success Managers, a Senior Technical Support Specialist, and a Senior BDR Manager, who work with various customers daily. I observed their natural workflow and identified friction points in real-time.
Identifying the problems
I narrowed down the complaints to 3 main pain points in the order form:
Missed Critical Decisions
"There are so many hidden options in this form that are crucial for a truly customizable order. Customers don't know about these details."
Disorganized Order Path
"You have to keep going back and forth pages and buttons to see what all the options are."
Unclear Descriptions, Status, and Results
“I don’t even know if anything I’m doing is correct, so I'm worried the result is not going to be what I want.”
3Play Media
Redesigning a complex B2B SaaS Video Accessibility & Localization service order form to reduce errors.
Role
Lead UX Designer
Team
2 UX Leads, 1 Product Manager, 1 Product Marketer, 2 Consultants
Timeline
Aug 2025 - Dec 2025
Tools/Skills
UX Research, UI Design, Figma, Cursor, Client Relations
The solution
My redesign increased 10 Customer Satisfaction Scores by 80%
Users can complete compliance-sensitive orders independently rather than relying on support tickets (manual intervention).
3Play Media
Redesigning a complex B2B SaaS Video Accessibility & Localization service order form to reduce errors.
Role
Lead UX Designer
Team
2 UX Leads, 1 Product Manager, 1 Product Marketer, 2 Consultants
Timeline
Aug 2025 - Dec 2025
Tools/Skills
UX Research, UI Design, Figma, Cursor, Client Relations
Identifying the problems
I narrowed down the responses to 3 main pain points in the order form:
Missed Critical Decisions
"There are so many hidden options in this form that are crucial for a truly customizable order. Customers don't know about these details."
Disorganized Order Path
"You have to keep going back and forth pages and buttons to see what all the options are."
Unclear Descriptions, Status, and Results
“I don’t even know if anything I’m doing is correct, so I'm worried the result is not going to be what I want.”
USER INTERVIEWS
I interviewed 4 internal employees that assist customers with the order form.
The goal is to identify the friction points in the current ordering process to inform a redesign that will allow customers to self-serve and rely less on company support. The participants are Customer Success Managers, a Senior Technical Support Specialist, a Senior BDR Manager, who work with various external customers on a daily basis. I observed their natural workflow and identified friction points in real-time.
The solution
My redesign increased 10 Customer Satisfaction Scores by 80%
Users can complete compliance-sensitive orders independently rather than relying on support tickets (manual intervention).
Made with 🩷, ☕️
DISAGREEMENT WITH MY MENTOR/Stakeholder
Varying Viewpoints become an Opportunity!
I had differing perspectives from the Product Marketer about the use of disabled controls, or greyed out options, to indicate features unavailable for the selected language. He believed these disabled controls increased awareness of additional offerings and potential upsell opportunities, but I believed they created confusion by presenting users with options they couldn’t act on. While I was thinking for the user, he was thinking for the business. I initiated a solution bridging both needs by designing a contextual limitation message that appeared only after selecting a language to communicate availablity without clutter.
❌ Users discover errors and limitations too late due to a lack of warning messages
Original
Improved
✅ Displays error and limitation messages before continuing
❌ Users discover errors and limitations too late due to a lack of warning messages
Original
Improved
✅ Displays error and limitation messages before continuing
Final Review Page
Original
Improved
❌ Terms and conditions can be missed
❌ Turnaround times are buried in text.
✅ Terms and Conditions is an active checkbox step.
✅ Turnaround time is emphasized
Final validation
Comparing the User Flows visually demonstrate the reduced cognitive overload.
I tested my final designs with 10 real customers of 3Play Media. Participants claimed that there is a
noticable decrease in switching between pages and needing support.
overcoming an obstacle
⚠️ Facing a Roadblock
The Product Marketer from 3Play wanted to use Cursor AI to prototype the wireframes from start to finish, but it made the design process unnecessarily rough. There was so much unnecessary debugging and the designs did not properly translate to how we wanted it to turn out, even after feeding our low-fi mockups into Cursor. However, this gave us a way to easily test our initial mockups with a working prototype. It would have taken much longer to prototype the low-fi wireframes in Figma. But the final designs were completed in Figma for high-fidelity accuracy + clean dev handoff.
I learned:
The value in speed for early prototyping
To leverage tools strategically, not blindly
The Product Marketer from 3Play wanted to use Cursor AI to prototype the wireframes from start to finish, but it made the design process unnecessarily rough. There was so much unnecessary debugging and the designs did not properly translate to how we wanted it to turn out, even after feeding our low-fi mockups into Cursor. However, this gave us a way to easily test our initial mockups with a working prototype. It would have taken much longer to prototype the low-fi wireframes in Figma. But the final designs were completed in Figma for high-fidelity accuracy + clean dev handoff.
I learned:
The value in speed for early prototyping
To leverage tools strategically, not blindly
ITERATIONS
Implementation of Self-Reliant Progressive Disclosure with
Accordion Format in the Service Selection
Original Form
❌ The different sized boxes are overhwhelming and confusing
❌ Certain settings must be configured outside the order form before ordering
❌ The Order Instructions button is often missed
❌ The flow is scattered over two pages, therefore creating multiple order paths.
Initial Ideation (Cursor)
❌ "There are a lack of descriptions"
❌ "I don't like how condensed each service is. If I only choose one service, I am working with less than a fifth of the page"
Final Service Selection Design with Accordions (Figma)
✅ Self-reliant progressive disclosure with accordions
✅ Single ordering path per service, embedding settings and instructions directly in the order flow
✅ Clear error messaging and required fields
✅ Self-reliant progressive disclosure with accordions
✅ Single ordering path per service, embedding settings and instructions directly in the order flow
✅ Clear error messaging and required fields
overcoming an obstacle
⚠️ Facing a Roadblock
The Product Marketer from 3Play wanted to use Cursor AI to prototype the wireframes from start to finish, but it made the design process unnecessarily rough. There was so much unnecessary debugging and the designs did not properly translate to how we wanted it to turn out, even after feeding our low-fi mockups into Cursor. However, this gave us a way to easily test our initial mockups with a working prototype. It would have taken much longer to prototype the low-fi wireframes in Figma. But the final designs were completed in Figma for high-fidelity accuracy + clean dev handoff.
I learned:
The value in speed for early prototyping
To leverage tools strategically, not blindly
ITERATIONS
Implementation of the Accordion Format in the Service Selection
Original Form
Initial Ideation (Cursor)
❌ "There are a lack of descriptions"
❌ "I don't like how condensed each service is. If I only choose one service, I am working with less than a fifth of the page"
Final Service Selection Design with Accordions (Figma)
✅ Self-reliant progressive disclosure with accordions
✅ Single ordering path per service, embedding settings and instructions directly in the order flow
✅ Clear error messaging and required fields
DISAGREEMENT WITH MY MENTOR/Stakeholder
Varying Viewpoints become an Opportunity!
I had differing perspectives from the Product Marketer about the use of disabled controls, or greyed out options, to indicate features unavailable for the selected language. He believed these disabled controls increased awareness of additional offerings and potential upsell opportunities, but I believed they created confusion by presenting users with options they couldn’t act on. While I was thinking for the user, he was thinking for the business. I initiated a solution bridging both needs by designing a contextual limitation message that appeared only after selecting a language to communicate availablity without clutter.
✅ Displays error and limitation messages before continuing
❌ Users discover errors and limitations too late due to a lack of warning messages
Original
Improved
Final Review Page
Reflection
Balancing Business and User Needs
I had differing perspectives from the Product Marketer about the use of disabled controls, or greyed out options, to indicate features unavailable for the selected language. He believed these disabled controls increased awareness of additional offerings and potential upsell opportunities, but I believed they created confusion by presenting users with options they couldn’t act on. While I was thinking for the user, he was thinking for the business. I initiated a solution bridging both needs by designing a limitation message that appeared only after selecting a language to inform the users, but not overwhelm them.
Leadership Skills
As the Lead Designer for this project, I learned the importance of considering all proposals while also making firm decisions that I believe are in the design's best interest. My team of 5 consisted of students from both engineering and design backgrounds, and our stakeholders were 3Play's Product Manager and Product Marketer, both whom don't specialize in design. As the leader, I challenged design decisions and unblocked design problems while also advocating for my team.
what did i do?
I led the redesign vision for the service order form to decrease support tickets and reduce ordering errors.
The original service order form for 3Play Media contains numerous friction points for the user. Customers struggle to navigate the form, resulting in disappointing outcomes. I led a 5-person team to redesign the complex order form for a Video Accessibility & Localization B2B platform to solve cognitive conflict.
what did i do?
I led the redesign vision for the service order form to decrease support tickets and reduce ordering errors.
The original service order form for 3Play Media contains numerous friction points for the user. Customers struggle to navigate the form, resulting in disappointing outcomes. I led a 5-person team to redesign the complex order form for a Video Accessibility & Localization B2B platform to solve cognitive conflict.
Identifying the problems
I narrowed down the responses to 3 main pain points in the order form:
Missed Critical Decisions
"There are so many hidden options in this form that are crucial for a truly customizable order. Customers don't know about these details."
Disorganized Order Path
"You have to keep going back and forth pages and buttons to see what all the options are."
Unclear Descriptions, Status, and Results
“I don’t even know if anything I’m doing is correct, so I'm worried the result is not going to be what I want.”
Made with 🩷, ☕️
overcoming an obstacle
⚠️ Facing a Roadblock
The Product Marketer from 3Play wanted to use Cursor AI to prototype the wireframes from start to finish, but it made the design process unnecessarily rough. There was so much unnecessary debugging and the designs did not properly translate to how we wanted it to turn out, even after feeding our low-fi mockups into Cursor. However, this gave us a way to easily test our initial mockups with a working prototype. It would have taken much longer to prototype the low-fi wireframes in Figma. But the final designs were completed in Figma for high-fidelity accuracy + clean dev handoff.
I learned:
The value in speed for early prototyping
To leverage tools strategically, not blindly
ITERATIONS
Implementation of the Accordion Format in the Service Selection
Original Form
Initial Ideation (Cursor)
❌ "There are a lack of descriptions"
❌ "I don't like how condensed each service is. If I only choose one service, I am working with less than a fifth of the page"
Final Service Selection Design with Accordions (Figma)
✅ Self-reliant progressive disclosure with accordions
✅ Single ordering path per service, embedding settings and instructions directly in the order flow
✅ Clear error messaging and required fields
Final validation
Comparing the User Flows visually demonstrate the reduced cognitive overload.
I tested my final designs with 10 real customers of 3Play Media. Participants claimed that there is a noticable decrease in switching between pages and needing support.
Original Form Average Task Time:
9 minutes
Redesigned form Average Task Time:
6 minutes
-3 min
DISAGREEMENT WITH MY MENTOR/Stakeholder
Varying Viewpoints become an Opportunity!
I had differing perspectives from the Product Marketer about the use of disabled controls, or greyed out options, to indicate features unavailable for the selected language. He believed these disabled controls increased awareness of additional offerings and potential upsell opportunities, but I believed they created confusion by presenting users with options they couldn’t act on. While I was thinking for the user, he was thinking for the business. I initiated a solution bridging both needs by designing a contextual limitation message that appeared only after selecting a language to communicate availablity without clutter.
❌ Users discover errors and limitations too late due to a lack of warning messages
Original
Improved
✅ Displays error and limitation messages before continuing
Final Review Page
Original
Improved
❌ Terms and conditions can be missed
❌ Turnaround times are buried in text.
✅ Terms and Conditions is an active checkbox step.
✅ Turnaround time is emphasized
Reflection
Leadership Skills
As the Lead Designer for this project, I learned the importance of considering all proposals while also making firm decisions that I believe are in the design's best interest. My team of 5 consisted of students from both engineering and design backgrounds, and our stakeholders were 3Play's Product Manager and Product Marketer, both whom don't specialize in design. As the leader, I challenged design decisions and unblocked design problems while also advocating for my team.
Balancing Business and User Needs
I had differing perspectives from the Product Marketer about the use of disabled controls, or greyed out options, to indicate features unavailable for the selected language. He believed these disabled controls increased awareness of additional offerings and potential upsell opportunities, but I believed they created confusion by presenting users with options they couldn’t act on. While I was thinking for the user, he was thinking for the business. I initiated a solution bridging both needs by designing a limitation message that appeared only after selecting a language to inform the users, but not overwhelm them.
USER INTERVIEWS
I interviewed 4 internal employees that assist customers with the order form.
The goal is to identify the friction points in the current ordering process to inform a redesign that will allow customers to self-serve and rely less on company support. The participants are Customer Success Managers, a Senior Technical Support Specialist, a Senior BDR Manager, who work with various external customers on a daily basis. I observed their natural workflow and identified friction points in real-time.
Balancing Business and User Needs
Leadership Skills
As the Lead Designer for this project, I learned the importance of considering all proposals while also making firm decisions that are in the design's best interest. My team of 5 consisted of students from both engineering and design backgrounds, and our stakeholders were 3Play's Product Manager and Product Marketer, both whom don't specialize in design. I challenged design decisions while also advocating for everyone's perspective.
Skills I Gained from this Experience
Before this project, I was solely user needs-driven. I advocated strongly for the most seamless experience for users, but I failed to consider business needs. My disagreement with my mentor in this project taught me the value and strategy of solving for both business and user needs.
Original Form Average Task Time:
9 minutes
Original Form
Redesigned form Average Task Time:
6 minutes
Redesigned Form
Redesigned form Average Task Time:
6 minutes
Original Form Average Task Time:
9 minutes
-3 min
-3 min
Final validation
Comparing the User Flows visually demonstrate the reduced cognitive overload.
I tested my final designs with 10 real customers of 3Play Media. Participants claimed that there is a noticable decrease in switching between pages and needing support.
Made with 🩷, ☕️
Original
Improved
❌ Terms and conditions can be missed
❌ Turnaround times are buried in text.
✅ Terms and Conditions is an active checkbox step.
✅ Turnaround time is emphasized