Six Paths of Designing - Thusitha's Portfolio Website

Summary

As the Principal UX Designer and Team Lead at Xyicon, I was responsible for spearheading the architectural and interactive overhaul of our enterprise platform. The application is used heavily by non-technical users in the medical, hospital, and service industries to map and manage complex 3D "Digital Twins" of their facilities.

My role required making critical, sometimes highly contested decisions that drastically pivoted the user experience. This case study outlines five memorable changes I led from redefining core interaction behaviours to establishing a mature, organic design system. Included in this case study are simplified problem domain, the pushback and negotiations, and the measurable successes.

1. Changing core navigation behaviour while pivoting the existing behaviour to future proof design

The Problem Example

In the existing system, users navigated the 3D space by holding Ctrl + Moving the Mouse. This monopolized the Ctrl key, severely limiting our ability to introduce standard power-user workflows (Eg: copying an asset, stamping, or selecting multiple assets to simultaneously edit properties).

The Solution

I made the critical decision to overhaul the fundamental interaction model. We shifted navigation to the Middle Mouse Button or Spacebar + Drag (similar to 3D modeling software standards), completely freeing up the Ctrl key for complex selection and duplication operations.

Pros & Outcomes 100% User adoption rate post-launch

C-level executives, who initially fought the change, completely sided with the UX decisions after seeing results and user testimonials.

Metric: Eliminating bugs and user-error tickets related to 3D navigation in space editor module.

Cons & Challenges

Severe Initial Lashback: Seasoned long-time users and descision making stakeholders were highly resistant to changing a deeply ingrained muscle memory.

2. Context-Preserving Sliding Panels over Modal Windows

The Problem Example

The legacy Angular JS frontend relied entirely on pop-up modal windows. Every time a user needed to edit an asset's properties, a modal would block the 3D canvas. Users constantly lost context of their current spatial selection and workflow.

The Solution

During our migration to React JS, I strongly advocated for the complete elimination of modals. I designed and introduced context-based sliding panels with tabbed interfaces. This allowed users to edit object properties while keeping their selected asset clearly visible on the 3D canvas.

Pros & Outcomes 13% increase in property panel usage

Created a significantly more robust and focused UI. This contextual pattern was so successful it laid the foundation for an entirely tab-based architecture when "UI v5" was created.

Metric: Hotjar analytics showed a 13% increase in user engagement with the property editing panel, indicating that users were more comfortable and likely to utilize the feature with the new design

Cons & Challenges

Technical Debt: Required a considerable amount of redesigning and rewriting. Creating new panel components that needed to work everywhere was a big engineering task with its own issues and caveats.

3. Visualizing Connections - Designing Port Templates For Equipment

The Problem Example

Assets in Xyicon App (like any equipment or device) don't exist as isolated entities in the real world. They could be physically and logically connected with other assets by ports and cables. We lacked a way to visualize these complex, multi-directional relationships.

The Solution

We designed a completely new "Dynamic Port Template" system. Attached to each 'Xyicon' as a property, this system visualizes incoming and outgoing connections to other assets. We designed a tree structured view that maps out the connections to and from other assets thats connected to the currently selected Xyicon.

Pros & Outcomes

Market Differentiator: This feature served as a unique visual system in the application, utilized as a major selling point against competitors in marketing strategies.

Cons & Challenges

Incomplete Visualization: Because connections between devices and assetes can be infinitely complex, in some of the use cases the UI realstate was not enough for the component to properly display all connections.

4. Reducing Complex Workflows Into Wizards With Linear Progression

The Problem Example

Essential tasks like creating a new Catalog item or creating a new space added to cognitive load due to fragmented UIs making it difficult for users to complete their task efficiently. Users had to navigate different menus to upload images, flooplans, configure 3D GLB models and customize 2D SVG glyphs etc. in different steps while they could have been done in a single, guided workflow.

The Solution

I conceptualized and designed a step-by-step wizard system to consolidate these mini-workflows into a guided 3-to-5 step journey. By making the process linear, we drastically reduced the cognitive load for our primary user base. Mostly consisted of non-technical staff in the healthcare and service industries.

Pros & Outcomes 4X increase in new non-admin and power user account self signups during the first quarter after implementation

Transformed an expert-only task into an intuitive, foolproof process that service industry and hospital administrators could complete without technical support.

Metric: Backend analytics showed new user accounts created for each organization, indicating that more non-technical users were able to use these wizards without needing technical support.

Cons & Challenges

Detail Heavy: Due to the sheer number of configuration options, the UI within the wizard steps remains very detail-heavy. I personally believe these screens require another pass for further simplification.

5. Creating a Design System That Mature Organically

The Problem Example

As the team and product grew over the last few years, we needed consistency, but trying to force a massive, rigid Design System on day one would have stalled our rapid prototyping.

The Solution

I adopted a "keeping it simple" approach to Xyicon's design system. Everything was initially conceptualized on whiteboards and note pads before moving to Figma. At first, the Figma file was just a simple layout, color, and typography system. Only as the explicit need for components and reusability arose did we actively shape it into a fully-fledged design system. We built it because we needed it, not just because we had Figma at our disposal.

Pros & Outcomes

Scalability: As the design and engineering teams expanded, this organically grown system became the single source of truth, drastically speeding up the handoff to developers and visual regression testing.

Cons & Challenges

System Bloat: As more people engaged, the system became quite heavy and evolved. We eventually had to include rigorous checks and dedicated design review meetings just to maintain the system itself.

Selected Case Studies

Visualizing the invisible - Interaction design for 3D spatial data at Xyicon

Designing for developers - DX for WSO2 API Manager & Identity Server

Modernizing corporate identity & simplifying self-service for Exetel

Revolutionizing movie ticketing in sri lanka with TicketsLK

Tools and Expertise

Worked On

Tools Used

Worked On

Tools Used

Worked On

Tools Used

Worked On

Tools Used

Worked On

Tools Used

Worked On

Tools Used

About Me

Current Personal Projects

Chat?

Good things come to those who click