I started with supporting UI/UX design on front-of-house customer experiences and transitioned to designing for back-of-house features, relating to policy administration and claims handling. The majority of my work focused on reducing repetitive workflows, optimising systems and resolving user inefficiencies.
When i began working on product features, 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 of both content and data models were some of the methods used to assess the complexity of the system, highlight user intents, challenges, and recurring UI/UX patterns.
Over time, insights gained through tactical design projects helped validate approaches and provide direction for iterative improvements.
Isolated customer information across policies
Policy
Pet A
Claims
Customer
Policy
Pet B
Claims
Customer
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.
•
This rapid expansion required delivering numerous features in a short timeframe, spanning multiple domains and squads, with solutions demanding significant product design effort and resources.
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 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, the system will enable users 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 better user-centred experiences and reduces confusion in design alignment.
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
Entity containers provided a consistent and reusable UI structure for assessing and engaging information. Information and contextual actions were grouped into fixed locations for both users and collaborators as a way to maintain consistency and predictability.
Split into two sections: 'Header' and 'Body':
Anatomy
Containers can be nested to provide more hierarchical context.
Entity-based navigation
Entity containers used as entry points in finding contextual information quicker.
Spotlighted ID principles
Anticipation, Fitt's Law, Simplicity
Impact
This design improved the accessibility of information by reducing clutter, making interactions more intuitive and efficient.
Example
The example employs the interaction design principle of Simplicity to present the most meaningful information upfront. Users can progressively reveal more detailed information by expanding each layer. This reduces visual clutter and prioritises essential information.
Secondly, Fitts’ Law is also used to enable users to click anywhere on the line item to hide or show the next level of detail. This increases accessibility and reduces interaction effort.
Entry points
Pet
Actions
Policy
Policy
Queries
View claims related to Pet ➜
View timeline of Pet ➜
View documents related to Pet ➜
View claims made on this policy ➜
View timeline of this policy ➜
View documents related to this policy ➜
Page content
All claims
Pre-filtered claims
All timeline events
Pre-filtered timeline
All documents
Related documents
Information icebergs
The information iceberg pattern simplified complex information hierarchy by presenting the most relevant information at the top. Each layer reveals the next meaningful entity or details. Users could expand panels for more detail when needed, improving clarity without overwhelming them.
Spotlighted ID principles
Anticipation, Fitt's Law, Simplicity
This design improved the accessibility of information by reducing clutter, making interactions more intuitive and efficient.
Payment breakdown example (Interactive)
The example employs the interaction design principle of Simplicity to present the most meaningful information upfront. Users can progressively reveal more detailed information by expanding each layer. This reduces visual clutter and prioritises essential information.
Secondly, Fitts’ Law is also used to enable users to click anywhere on the line item to hide or show the next level of detail. This increases accessibility and reduces interaction effort.
Try clicking each line item to show/hide more information
Anticipatory assists
Anticipatory forms made workflows more efficient by anticipating user needs, reducing repetitive inputs, and pre-filling wherever possible.
Spotlighted ID principles
Anticipation, Default, Efficiency of the user
This design improved efficiency for users by reducing input time and minimising errors, while reinforcing a user-first experience.
Search input example
When a user initially clicks on the Vet Search input, a dropdown menu with previously-added vet options can help with facilitate quicker entry of information.
Cascading changes
Cascade changes reduced user effort by enabling updates to related entities within a single journey. This approach leveraged the principle of anticipating user needs, simplifying workflows by offering intelligent options at the right time.
Spotlighted ID principles
Anticipation, Efficiency of the user
This design improved efficiency for users by reducing input time and minimising errors, while reinforcing a user-first experience.
Cascading example
When updating their address, customers were prompted to apply the changes to all related entities, such as pets or policies.
Reflecting on this journey, one of my main takeaways was a deeper appreciation for embedding strong foundational design strategies. Understanding resilience in design strategies was important for scaling. Not everything could be solved immediately and required constantly checking
if it is adaptable or flexible to change?
what are its dependencies and should they be decoupled?
Approaches and solutions were always ‘work-in-progress’. Insights learnt from tactical projects became valuable in validation, when to zoom further out, iterating where needed and adapting to new complexities.
As the sole designer working on back-of-house features across multiple domains, it was necessary for me to reduce UX oversight by fostering a culture of shared ownership and empowering collaborators to make confident, design-informed decisions.
I should have invested earlier in formalised UX documentation. One key mistake was underestimating the impact of inconsistencies across domains. Increasing repetition of divergent UX patterns across squads also increased the need for improving onboarding and change management.
Designing holistically required frequent mental switching between user needs for efficiency and autonomy, ease of learning, or a mix of both. To manage this, I leaned on a mental framework from Kate Kaplan’s about designing for complex systems.
Everything is a work-in-progress.
Thanks for your time.