Action Based Ticketing System

Action Based Ticketing System

Action Based Ticketing System

Project duration

3 weeks

3 weeks

3 weeks

Tools

Figma, Chatgpt

Sector

B2B SaaS Platform | End-to-End UX/UI Design

Objective

In a B2B SaaS e-commerce platform, the support system needed a smarter way to manage user issues — one that didn’t rely on live conversations or chat windows like Intercom or Zoho. As the sole designer, I was tasked with designing an action-based ticketing system from the ground up.

Scope: Build a responsive, action-triggered ticketing system that enables users to raise structured tickets without any direct conversation.

Understanding the Problem

Understanding the Problem

Unlike platforms that offer chat-style support windows, our use case demanded a more contextual, form-based experience tied to actions — like refund, returns, or many other's.

I conducted UI-focused research to understand what worked in existing tools — and what we needed to rethink:

  • Why do they use conversation-first designs?

  • How do they handle status updates, field clarity, and ticket details?

  • What happens when conversation is removed?

Observation's

Observation's

  • I observed Most ticketing designs use a table format because it effectively displays all the relevant information. This approach is efficient and convenient for users.

  • The ticket detail page displays a variety of relevant and important information, including the ticket's status, priority, an overview of order details, and much more.

  • Shown the activities related to the ticket, such as when it was raised, the actions taken, and any other relevant updates in the ticketing section.

Design Process & Personal Challenges

Design Process & Personal Challenges

Design Process & Personal Challenges

I usually begin any project with paper wireframes — it’s my go-to method to think freely without the constraints of tools. But this time, due to tight timelines and the urgency to align with product and engineering, I jumped straight into digital wireframes.

This shift, while challenging for me personally, turned out to be a valuable design exercise. It pushed me to think more structurally from the start and forced clarity in decision-making right within the wireframing stage.

I usually begin any project with paper wireframes — it’s my go-to method to think freely without the constraints of tools. But this time, due to tight timelines and the urgency to align with product and engineering, I jumped straight into digital wireframes.

This shift, while challenging for me personally, turned out to be a valuable design exercise. It pushed me to think more structurally from the start and forced clarity in decision-making right within the wireframing stage.

Iterative Design Process

Iterative Design Process

After the initial wireframes were shared, I gathered internal feedback from the product and engineering teams. Based on this feedback, I made several iterations to improve:

  • Grouped related fields for better visual hierarchy.

  • Improved form clarity to reduce cognitive load.

  • Prioritized ticket information for quicker understanding and access.

Key UX Challenge: Inform Without Overwhelming

Key UX Challenge: Inform Without Overwhelming

One critical UX decision was to show all relevant info inside the ticket flow — not make users click through 3–4 pages just to find order details. I carefully designed layouts that surfaced:

  • Order numbers

  • Products involved

  • Reason for the ticket

  • Status, timestamps, and attachments

  • Order numbers

  • Products involved

  • Reason for the ticket

  • Status, timestamps, and attachments

All within a compact, readable, responsive interface.

Outcome

Outcome

  • Fully responsive ticketing system, ready for development

  • Removed the need for conversation while still making users feel heard

  • Internal stakeholders appreciated the fast turnaround and clean UX

  • Laid groundwork for future scalable support components

Interactive Prototype

Interactive Prototype

Desktop version

Desktop version

Mobile version

Mobile version

What I learned🌱

What I learned🌱

  • Designing without traditional flows is possible: Jumping straight into Figma helped me move faster while still maintaining clarity in structure and logic.

  • UI-focused competitor research pays off: Studying how tools like Zoho and Intercom handle conversations helped me understand what to eliminate or rethink in a no-chat system.

  • Personal habits can be challenged: Skipping my usual paper wireframes forced me to adapt and still maintain design quality.

  • Feedback = better UX: Iterations based on internal reviews improved information grouping, hierarchy, and field prioritization.

  • Fast solo design in startups = real ownership: Being the only designer taught me how to lead decisions independently, while still aligning tightly with product and engineering.

Next Steps🚀

Next Steps🚀

  • Add automated ticket status updates to keep users informed.

  • Use AI-based ticket tagging to auto-suggest categories and priorities.

  • Integrate a chat window to connect users with the salesperson directly.