Helping IT technicians to provide fast, high quality customer service to keep mobile operations running smoothly

Industry
Internet of Things (IoT)

Type of project
XSight live support widget

Tools
Figma

My role
Solo designer, end to end product design

Overview

Redesigned SOTI XSight’s live support widget to improve text, voice, and video chat interactions, enhancing the end-user support experience and helping customers keep their operations running smoothly. Leveraged and extended the Elevate Design System to ensure consistent UI patterns and scalable components across SOTI products.

The Problem

IT technicians currently have to navigate multiple tabs to initiate communication with customers. This complex and confusing workflow significantly increases the time it takes to resolve device issues.

3 Days,

10 Hours

Average support ticket resolution time

My task was to enhance the overall experience of the existing live support widget. After a quick audit, I identified a major pain point: users had to navigate three separate areas—Live Support, Chat, and Contacts—to initiate an interaction with a customer.

 ~ Existing live support widget ~

Needs Statement

Mike, a multitasking technician, needs a centralized location to manage all inbound and outbound support requests from multiple channels so he can resolve device issues accurately and efficiently.

Ideation & wireframing

I began by adapting the information architecture through low-fidelity sketches, which I then evolved into interactive prototypes. Throughout the process, I collaborated closely with product and engineering teams to gather feedback and iterate on the designs.

‘Elevate’ design system

At SOTI, our team developed a new design system called Elevate. As the lead designer on the project, I created updated color palettes for both light and dark modes, designed over 500 icons entirely in Figma, and integrated them into the system. I was also responsible for designing the Elevate logo and creating new product illustrations. Below are a few key screens showcasing the Elevate Design System.

~ color palette ~

~ Iconography ~

~ Branding ~

Interactive Prototype

I designed a mid-fidelity interactive prototype in Figma, incorporating key user flows and interface elements to test usability and functionality. I presented the prototype to stakeholders, gathering feedback to align the design with business goals and user needs, and iterated based on their input to ensure a seamless experience.

Mood board & Competitive Design Research

Once the mid-fidelity prototype was finalized, I conducted rapid competitive design research to inform the visual direction and created a comprehensive mood board. This helped establish the product’s aesthetic, guided UI decisions, and ensured our design aligned with industry standards and user expectations.

Hi-fidelity mockup

I developed an interactive high-fidelity prototype using the Elevate Design System, ensuring consistency in components, typography, and color palettes. The prototype showcased complete user flows and interactions, allowing stakeholders to experience the product realistically. I collaborated directly with the CEO on this project, who loved the idea and concept, validating the design direction and vision.

Outcomes

Received a 4.5 out of 5 star rating in the post-launch user survey, reflecting strong user satisfaction.

60

minutes average ticket resolution time achieved, compared to 3 hours previously, within just one month of launch!

95%

Employees reported their resolution time has been drastically reduced.

25k

dollars saved annually by streamlining workflows and improving efficiency, delivering measurable value to the company.