Support Ticket: Mobile Workspace Experience
A mobile ticket experience designed for the company’s workspace app, enabling users to create and manage support tickets directly on mobile. The workflow was adapted to mobile-native interactions and the company’s design system, ensuring a consistent and efficient support experience.
Overview
Role: UI UX Designer
Team:
2 Stakeholders
1 Product Owner
1 Product Designer
1 Front-end Engineers
1 QA Engineer
Platform: Mobile App
My Contribution
• Designed the mobile ticket creation flow
• Adapted the workflow from web to mobile interactions
• Applied mobile components from the company design system
• Designed the ticket detail interaction
Context & Problem
The support ticket system was originally part of the omnichannel platform, used by the support team to manage and resolve customer issues across multiple channels. The workflow was designed for desktop, relying on large layouts, complex forms, and dense information.
The company already had a mobile workspace app called B3Works, which integrates tools like chat, AI assistance, and internal features in one place. However, the support ticket system was not included and was still only available on desktop.
As B3Works became the main mobile workspace, users needed to create, edit, and manage tickets directly inside the app instead of switching back to web.
However, the existing workflow depended on desktop interaction patterns, with multiple fields and heavy layouts, which did not fit smaller screens. The experience could not simply be resized. It had to be redesigned for mobile-native interactions while keeping the workflow familiar for existing users.
This led to several usability and workflow challenges that needed to be solved before bringing the ticket system into the mobile workspace.
Key issue:
Originally designed for desktop-first workflows
Ticket creation required dense forms with multiple structured fields
Interaction patterns were built for mouse and large screens, not touch devices
Needed to fit inside an existing mobile workspace (B3Works) without breaking the current workflow
Design Goals
Adapt the ticket creation workflow for mobile usability
Reduce friction when filling multi-field forms on small screens
Ensure the ticket experience fits naturally within the mobile workspace environment
Improve clarity when viewing ticket details and related information
Constraints:
The workflow was originally designed for desktop screens
Ticket forms contained multiple fields and structured inputs
Desktop interaction patterns did not translate directly to touch interfaces
The experience needed to integrate smoothly into an existing mobile workspace app
Design Solution
Mobile Ticket Creation
The ticket creation process was redesigned for mobile usability while maintaining the original workflow logic. The form structure was simplified with clear hierarchy, bottom sheets were used for channel and category selection, and users can link related cases to provide additional context.
Ticket Detail Experience
The ticket detail screen is designed to help support teams review and manage customer issues efficiently. It provides a clear overview of ticket information, conversation history, attachments, and related cases, allowing agents to quickly understand the context and respond to customer requests.
Mobile Interaction Patterns
To ensure the workflow feels native on mobile, the interface follows mobile interaction patterns and the company’s design system components. Bottom sheets were used for list selections, touch targets were optimized for mobile usability, and the layout adapts when the keyboard appears. Image attachments can also be previewed directly inside the comment flow.
Edge Cases & Constraints
Several scenarios beyond the happy path were considered. Long ticket titles are truncated to prevent layout issues, empty states appear when no related cases or attachments exist, and comment inputs adapt when the keyboard is active. The ticket editor also had limited UI support, so certain formatting behaviors were simplified and some improvements were planned as future enhancements. These decisions balanced user experience improvements with engineering constraints.
Design Impact
Improved support response
Support teams can review ticket details, context, and attachments more easily to respond faster.
Consistent mobile experience
Applying the company’s mobile design system ensures the ticket workflow feels native and consistent within the workspace app.
Collaboration & Design Handoff
After completing the test cases, I hand off the work to the development team and review them together. We use Google Meet to collaborate with team members in Ho Chi Minh City.
For the Support Ticket feature, I also review and test the experience on mobile using TestFlight builds. This allows me to validate interactions, visual styles, and usability directly on real devices. I work closely with front-end engineers to refine touch interactions, fix UI inconsistencies, and ensure the interface feels smooth and native on mobile.
Lesson Learned
This project helped me better understand the differences between desktop workflows and mobile-native experiences. Adapting a complex ticket system required rethinking form layout, navigation patterns, and interaction behaviors while maintaining the logic of the original workflow.
Designing for mobile is not about shrinking a web interface, but rethinking how interactions work on smaller screens.
.webp)
