Kirontech

Password-protected section - request access

When I joined Kirontech, it was briefed as 'unsexy' project, focused on insurers and underwriters. Yet, my design role required seeing the people behind user stories and table rows. With Kirontech's focus on healthcare, malpractice, and ultimately lives, were at stake.

My internal projects were:

• Brand Redesign: Revamped the company's visual identity into a recognisable, trust-inspiring and scaleable brand.
• In-Field UX Research: Environmental observation, qualitative research, and in-situ alpha testing, to gather actionable insights and validate designs in the real-world.
  User Research - Request Access
• Data-Dense, Complex Dashboards: A UI hierarchy aligning with user mental models, task-driven and exploratory workflows for intuitive navigation.
• Data Visualisation: Explore and implement infographic languages, from the standard to the innovative.
  Visualising complex relationships - Request Access
• Atomic Design System: Robust and scaleable design system to support all of the above, optimising dev time and handoff.

Empathising and scaffolding UI

With insights from internal clients, and from the highest possible level of abstraction, the platform served two main patterns of action: A proactive mode (querying, filtering) and a receptive mode (inbox, case alerts). Following industry standards, I proposed and implemented a base UI hierarchy of nested screens and panels, as follows:

1. Top level (grey), the usual side drawer or menu (iterated later) to navigate between screens, account management and support.
2. For each screen, a task / heuristics panel (blue) would either list items (e.g. an e-mail inbox) or apply queries, facets or filters.
3. Workspace area (green) would present data following its internal hierarchy, sorting functions: Content, context, details, and focus panels to narrow down any given analysis.

This represents self-evident functionalities (AKA affordance¹) which users would take as second nature, with natural reading directions and transitions between task-driven and exploratory workflows.

User Flow

Typically, underwriters assess insurance claims for risks and anomalies, while Special Investigation Units (SIU) conduct deeper analysis on flagged cases.

Mapping these touch points maintained an industry-aligned product vision. But to keep focus on the product's strengths, it was useful to identify a few sacrificial concepts: Functions for which clients robust solutions, such as escalation protocols.

This also highlighted the need to pay careful attention to user roles and permissions and data presentation, ensuring underwriters had optimal screening tools while investigators had deeper analytical capabilities.

Wireframing

At the start of a new project or feature, much like the first broad strokes of a painter, a wire-framing stage is indispensable to explore alternative approaches, such as allowing stakeholders to evaluate competing I.A.² before we invest in detailed visual design.

But as some voices in the industry suggest, it can also be beneficial to bypass the wireframe stage (provided the Design System is mature enough), and reuse standardised UI components to build hi-res mockups for a new feature.

This reduces ambiguity and the "imagination gap" required for stakeholders and devs. I did this when designing comparatively smaller, new features, as shown in the extended Case Study:

Hi-Res Prototyping of Complex UIs - Request Access

Rapid to Detailed Prototyping

To quickly validate complex interactions and workflows, I created interactive prototypes using Sketch and Principle App. These focus on asking questions and evaluating key user journeys and interaction patterns, rarely if ever, a comprehensive functionality.

Let's take for example, data panel expansion/collapse mechanisms: How would a screen composed of four equal panels deal with alternate to expand one at the time?

This would not immediately cover all possible interactions (for example, if we need two arbitrary panels expanded, and the rest collapsed) but it quickly brings forth clarity to the next iteration.

Prototypes of higher resolution explored more nuanced interaction patterns, such as filtering behaviours and state changes during analytical workflows. Due to the privative knowledge these reveal, they are covered in the private section.

Hi-Res Prototyping of Complex UIs - Request Access

Atomic Design System

The Kirontech interface required balancing data density with usability. This means an Atomic Design System that supports:

• Readable data-dense tables that are actionable, sorteable and highly responsive, optimal column/row size for maximising screen real state.
• Variety of UI elements such as tags, calls to action and even nested tables.
• Custom iconography for abstract, specialised concepts beyond what third-party libraries cover.
• Persistent but unobtrusive filtering mechanisms
• Subtle hover states to aid navigation through complex datasets
• Novel visualisation solutions that represented relationships, e.g. Collusion Networks. More on this on the private section: Visualising complex relationships - Request Access

In-person User testing

Our testing approach centred on qualitative interviews and observation sessions with practising underwriters and fraud investigators.

A particularly illuminating discovery came after we received feedback that a very lean platform was struggling with performance. Our face-to-face sessions in 2022 to 23 (when lockdown restrictions weren't in place) allowed us to observe underwriters opening dozens of browser tabs while working.

This emergent behaviour, not captured in our initial sessions, indicated a need for a internal work management tools and alternatives to the common "open in new tab" pattern.