I started with supporting UI/UX design on front-of-house customer experiences and transitioned to product design for back-of-house features, relating to policy administration and claims handling. The majority of my work focused on achieving parity with a 3rd-party system, reducing repetitive workflows and optimising systems efficiencies.
Initial discovery efforts were taken to understand the existing system, identify tactical gaps and opportunities. User interviews, UI/UX audits, journey maps, surveys, mind maps, content and data models were the main methods used to assess complexity and challenges of the system, highlight user intents and recurring UI/UX patterns.
Insights gained, over time, through tactical design projects also helped validate design strategies and provide direction for iterative improvements.
Customer and payment information is repeated across policies
Policy
Pet A + Claims
Customer
Payment
Policy
Pet B + Claims
Customer
Payment
Serving increasing user types, domains, and intent
•
Initially developed as a basic policy administrative system, the platform struggled to support an increasing range of user types, such as claims handlers, complaints handlers, and auditors.
•
Each role brought unique and often overlapping workflows, resulting in a complex network of non-linear experiences required.
•
Rapid expansion of the business also required quicker delivery of numerous features across multiple domains and squads in a short timeframe. On top of that, solutions demanded significant product design effort and resource.
Examples of journeys
Customer Support Agents
Processing sales over the phone
Managing account details
Assessing account and policy history
Claim Handlers
Registering claims
Calculating payouts
Assessing policy and claim history
Scaling for growth and instability
•
Business objectives grew as the business expanded, and so were domains, regions, squads with their micro-cultures and workflows.
•
Market instability in the post-pandemic era further contributed to shifting priorities, making it increasingly challenging to maintain a consistent design vision.
•
The system needed to adapt rapidly without sacrificing clarity or momentum of both users and collaborators.
Migrating to a new VUE framework
•
Due to limitations of the existing custom front-end framework, the business began migrating to an open-sourced framework to enable faster feature implementation and interaction capabilities.
•
As each framework has their own UI/UX quirks, the migration risked significant UI/UX changes that could disrupt processes of users and collaborators.
Designer-collaborator ratio and capacity constraints
•
As the sole designer working on back-of-house features, supporting multiple domains often created bottlenecks.
•
Dual-track agile development and prioritisation improved output speed but also introduced other challenges in aligning outcomes consistently across domains.
Mental switching
•
Designing support systems presented a challenge in ensuring solutions were holistic, which required frequent mental switching between perspectives of internal users, collaborators and customers.
•
Balancing these perspectives was crucial in determining prioritisation of usability and learnability gaps.
Anticipatory design for task efficiency
Hypothesis
Intuitive systems that proactively surface relevant information and anticipate user intents can reduce cognitive load and time required to complete tasks.
Prediction
By surfacing meaningful information and actions at the right time, users would be able to approach tasks with greater clarity and confidence, leading to faster assessments and registrations.
Balancing clarity and depth through meaningful organisation
Hypothesis
Simplifying access to complex information and interactions enhances user focus and efficiency, leading to more effective task completion.
Prediction
Users will be able to focus and navigate efficiently, and avoid feeling overwhelmed when assessing complex information.
Modular approach for smoother scaling
Hypothesis
A highly adaptable system supports faster scaling and feature integration, reducing the need for extensive redesigns.
Prediction
Approaching design modularly enables collaborators to respond effectively to migration, evolving user intents and workflows across domains.
It also facilitates breaking down complex journeys into smaller, manageable components, allowing for flexible, plug-and-play experiences.
Autonomy-driven design consistency
Hypothesis
Clear, well-defined design frameworks empower collaborators to make autonomous, design-informed decisions.
Prediction
Greater autonomy in design decision-making will reduce reliance on UX oversight or intervention during scaling, while enabling a more consistent user experience.
Building confidence through familiarity and intuitive design
Hypothesis
Familiar mental models and intuitive patterns reduce friction during onboarding, helping both users and collaborators feel confident as they navigate tasks and design decisions.
Prediction
Designs grounded in familiar structures and mental models ease onboarding challenges and support smoother transitions during migrations, enabling users to become productive faster and empowering collaborators to make design-informed decisions with greater ease.
Navigating mental shifts in design for diverse user intents
Hypothesis
The mental switching required to address both frequent users (e.g. back-of-house systems users) and infrequent users (e.g. customers) can unintentionally transfer learnability-focused priorities into designs where usability is critical.
Prediction
Maintaining constant mindfulness of the differing needs of frequent and infrequent users leads to effective head spaces for user-centred experiences.
Spotlighted interaction design principles
For further reading on interaction design principles mentioned, do check out First Principles of Interaction Design by Bruce Tognazzini.
Interaction structures
Interaction structures were further defined in two dimensions: Horizontal and Vertical.
Horizontal interaction
Horizontal interaction represented the flow of task types. From left to right — Search → Assessment → Transaction.
Vertical interaction
Vertical structures represented the mapping of interface elevation to categories of actions. From bottom to top — Assessment ↑ Single-task ↑ Support.
Information structures
Information structures were used to communicate content model of entities and their relationships between them (e.g., Customer, Subscription, Pet, Coverage). It is also serves as a reference for collaborator alignment across engineering teams and domains.
The two examples shown below are meant to demonstrate how its used, from simple (A) to more granular and complex (B) relationships.
Example A: Simple example of an information structure for a customer.
Entity relationships communicated:
A customer
An insurance cover
A pet
Example B: In-depth example of a customer's information structure for a Customer Support Agent.
Entity relationships communicated:
A customer
A subscription
A pet
A condition
A product
A coverage
Entity containers and navigation
Entity containers were designed to simplify UI/UX decisions and provide a consistent and reusable UI structure for assessing and navigating information.
Entity actions were placed in a fixed location for consistency and predictability for both users and collaborators.
Spotlighted ID principles
Impact
Anatomy (Animated demo)
A demonstration of nesting containers using a fixed information and action structure.
Containers are split into two sections: 'Header' and 'Body':
Navigation
This is an example of an entity container of a customer with two pets. Entity actions serve as entry points for users to quickly navigate and filter content of another page.
Entry points
Queries
View all claims ➜
View timeline of all events ➜
View documents ➜
View all claims of Pet B ➜
View timeline of Pet B ➜
View documents related to Pet B ➜
Page content
Claims tab
Pre-filtered claims
Timeline tab
Pre-filtered timeline
Documents tab
Pre-filtered documents
Information icebergs
Information icebergs was a method of simplifying complex information and visual clutter by prioritising meaningful information first in a hierarchy structure. This provides the user more control of information density, progressively disclosing each level without overwhelming.
Spotlighted ID principles
Anticipation, Efficiency of the user, Fitt's Law, Simplicity
Example: Payment breakdown (Interactive demo)
Click on each line item to show/hide more information
Anticipatory inputs
Anticipatory inputs reinforced a user-first approach by recommending repetitive inputs or pre-filling where possible.
Spotlighted ID principles
Anticipation, Consistency, Defaults
By anticipating and providing smarter defaults, input and data inconsistency errors were minimised, including time spent on claim registration and assessments.
Example: Search input (Animated demo)
It was understood that customers would likely have no more than two vets, so it was worth recommending previous vet entries while providing the ability to search for other vets.
In this example, when a user initially clicks on the Vet search input, a dropdown menu with previously-added vet options drops down to facilitate quicker data entry.
Cascading changes
By cascading changes, it reduced user effort and registration inconsistencies by providing additional control to data updates when needed within a single journey.
This approach leveraged the principle of anticipation by simplifying workflows through offering meaningful options at the right time.
Spotlighted ID principles
Anticipation, Consistency, Efficiency of the user
There was a reduction in time spent in information collection and more importantly, additional assessments if data is consistent. Registration was quicker using previously-saved inputs, which allowed users to stay in a single journey when handling queries and requests over the phone.
Cascading example (Animated demo)
The postcodes of the customer and their pet are usually the same but there can be instances where they differ, which also meant there was more than one entry point in editing postcodes.
In this example, when the user edits a customer or pet's postcode, they are prompted to determine if the postcode applies to the other entity too.
Reflecting on this experience, my biggest takeaway was a deeper understanding of the importance of embedding strong foundational design strategies throughout the product design process. In the first couple of years, a significant amount of time and effort was spent addressing UX debt that arose from prioritising growth objectives.
The push to release features quickly often often resulted in unintended side effects, like users or teams developing their own workarounds to compensate for gaps in the experience. Embedding foundations earlier could have mitigated these issues and reduce the need for reactive fixes in the long term.
Approaches were constantly ‘work-in-progress’, adapting to new complexities. Understanding resilience to principles applied was important for iteration. Insights learnt from tactical projects were valuable for validation. Not everything could be solved immediately and required continuous tweaking.
Is it adaptable or flexible to change? Is it scalable?
What are it's dependencies and can/should they be decoupled?
As a sole designer working on back-of-house features across multiple domains, it was also important to maintain UI/UX consistency and reduce oversight by fostering a culture of shared ownership, empowering collaborators to make confident, design-informed decisions.
Designing with predictability became a key guiding principle for managing expectations of users and collaborators.
Retrospectively, I could have invested more time and effort in documenting design strategies earlier, even if it was changing. The growing occurrence of divergent UX patterns across squads increased the need for pro-actively managing change and onboarding for collaborators.
Designing holistically required frequent mental switching between needs of users, their customers and collaborators. It was important to be able to switch considerations effectively. For users, usability is the key. For customers, learnability is key. For collaborators, it's both. To easily manage this mental switch, I leaned on the mental framework from Kate Kaplan’s about designing for complex systems.
Everything is a work-in-progress. Thanks for taking time to read this far.