top of page
Nav bar
Support Ticket Monitor
History Viewer Monitor is a sophisticated B2B internal organizational system designed to facilitate the analysis of comparisons and bugs throughout a game.
⚡ Overhauled design system increased user exposure to key features and address existing problems
My role
Design system, User Interface, Research, User Interviews, Usability Testing
Duration
7 mo.
Client
Lsports (B2B)
Background
WORKPHASE #1
Background & Strategy Kickoff
Company evolution
History Viewer monitor is an internal measurement system that analyzes sports game results. Its primary objective is to identify, investigate, and resolve any encountered bugs
in real-time, whether they occur prior to, during, or after the conclusion of the game.
Frustration and growing pains
In Lsports, the ones responsible for identifying and solving the different real-time events and bugs are the Support team.
One of their biggest challenges was they were using 3 different monitoring systems.
That caused:
1. Slow Data
2. Duplication of a ticket between 3 different systems.
My solution to that problem was creating a ticket monitoring system that collects all the different data in real time and provides users the option to export documents easily.
Older versions of a monitor screen - Problem Issue
.png)
Action Buttens
Empty Space
Card Management
Flexibility System
Filtering
Roles and skills in different features
1. Optimizing performance through an efficient and seamlessly integrated ecosystem
Dedicated, robust Design System
2. Eliminating the necessity for multiple tools through a comprehensive and user-friendly
3. Optimizing data and accessibility by implementing cards for Information Navigation
4. Flexible system that allows customization and adaptability
5. Precise filters that directly answer common user needs
Nav bar
Via research
WORKPHASE #2
Structure of research
Problem statement
The presence of three distinct system versions has resulted in an unstable and inefficient working environment, plagued by the following issues:
1. Ineffective bug investigation: Prolonged development cycles and widespread frustration among users.
2. Inaccurate data: Slow data processing provides incorrect data, which can puts the company's reputation at stake
Possible Solution
A holistic bug research and resolution system that provides the following:
🤗 Boosted productivity with a highly efficient work environment
🤔 Reliable system for the users enabling independence and focus
👍 Bug management and additional enhancements such as customization
Defining our target personas
Support Dep.
👩🏻
Monitors bugs and transfers to Dev Dep.
Dev Dep.
👦🏻
Fixes bugs and publishes to Production
Sales Dep.
👨🏻
Creates trust between customers and the product
Collaboration and Brainstorming
As a design leader of this project, I tried to understand user needs and frustrations. I set out to conduct comprehensive research. Here are the steps I took to achieve this goal:
User Journey Analysis: examing the user journey to identify pain points
Stakeholder Meetings: to gather direct feedback, insights, and requirements
Through analysis: I mapped out the priorities and the needs
Support Team Engagement: to understand their pain points, I joined them
Mapping the Users requirements & needs
Site map
To map the user's requirements and needs to the website portfolio, we begin by creating a sitemap that reflects the organizational goals. This process involves sketching and identifying the user group.
Building the Site Structure
As a design leader of the product, I collaborated closely with the development, data, and support teams. To ensure transparency throughout the process, we utilized the "Fig Jam" tool for structuring the site and mapping the flow.
Stakeholders meetings
By engaging in meetings with stakeholders ranging from managers to support staff, I mapped and identify their feature preferences, which serve as insights for the development process.
Design process
WORKPHASE #3
Design definition A-Z
Design system & documentation
By creating a robust design system, I establish a cohesive visual language and consistent UX and provide detailed documentation that guides developers and stakeholders.
Main screens
Horizontal table Selecting Row by user needs
Selecting Display Modes: Tables or Cards?
To evaluate usability, I utilized Figma prototyping to assess the effectiveness of both options.
The results indicated that tabs were suitable in 90% of cases related to tables.
Statistics of comparisons
Using a statistical comparison curtain, allows users to verify the results by comparing statistics with other providers.
Selecting Message on Cards mode
Users can effortlessly browse through the messages section, this innovative feature has significantly enhanced user navigation within the platform, resulting in an efficient experience.
Key features
Easy card access according to the user
One of the monitor's key features is task prioritization. Users can customize tabs according to personal preference by Stretching cards or selecting from a drop-down panel.
The ability to Drag & Drop cards
Rearrange cards by dragging them to other positions. 90% of users utilize this feature to prioritize tasks
CTA cards
Message top bar features
Action buttons on row
Message top bar features
Provider colors
WORKPHASE #4
WORKPHASE #4
Success metrics
✅ The data flow functions effectively in real-time, ensuring seamless information transfer.
✅ The flexibility of the cards has emerged as a pivotal element in user operations, enabling enhanced usability.
✅ The handling of each bug has improved by 90% compared to previous systems, resulting in significantly increased efficiency.
✅ Communication between teams has significantly improved, fostering better collaboration and coordination.
bottom of page