Designing for complexity and autonomy

Designing for complexity and autonomy

Designing for complexity and autonomy

Designing for complexity and autonomy

Building foundations for scaling back-of-house systems.

A four-year case study of foundational design strategies developed at a pet insurance company, following its journey from startup to unicorn.

TDLR: This case study focuses on information architecture and interaction design approaches that shaped the internal product’s design direction. Actual implementations will not be showcased due to confidentiality reasons.

It’s about a 30-minute read, possibly dry, but I hope it offers value to anyone interested in information and interaction design.

Year :

2019-2024

|

Industry :

Insurance technology

|

Client :

ManyPets

Roles :

Design strategy • Foundation design • Information architecture • Interaction design • Product design • System design • User interface • UX • UI

Designing for complexity and autonomy

Building foundations for scaling back-of-house systems.

A four-year case study of foundational design strategies developed at a pet insurance company, following its journey from startup to unicorn.

TDLR: This case study focuses on information architecture and interaction design approaches that shaped the internal product’s design direction. Actual implementations will not be showcased due to confidentiality reasons.

It’s about a 30-minute read, possibly dry, but I hope it offers value to anyone interested in information and interaction design.

Year :

2019-2024

|

Industry :

Insurance technology

|

Client :

ManyPets

Roles :

Design strategy • Foundation design • Information architecture • Interaction design • Product design • System design • User interface • UX • UI

Designing for complexity and autonomy

Building foundations for scaling back-of-house systems.

A four-year case study of foundational design strategies developed at a pet insurance company, following its journey from startup to unicorn.

TDLR: This case study focuses on information architecture and interaction design approaches that shaped the internal product’s design direction. Actual implementations will not be showcased due to confidentiality reasons.

It’s about a 30-minute read, possibly dry, but I hope it offers value to anyone interested in information and interaction design.

Year :

2019-2024

|

Industry :

Insurance technology

|

Client :

ManyPets

Roles :

Design strategy • Foundation design • Information architecture • Interaction design • Product design • System design • User interface • UX • UI

1

Understanding the system

1

Understanding the system

1

Understanding the system

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.  

2

Challenges uncovered

This section highlights the challenges and insights uncovered through both strategic and tactical work.

2

Challenges uncovered

This section highlights the challenges and insights uncovered through both strategic and tactical work.

2

Challenges uncovered

This section highlights the challenges and insights uncovered through both strategic and tactical work.

Navigation and information accessibility

Users spend a lot of time piecing together a holistic view of the customer. This lack of visibility caused delays in assessments.

Information hierarchy was modelled around the policy entity, which caused customer information to repeat across policies. As the system scaled to support multi-policy capabilities, this model proved to be increasingly challenging in terms of data accessiblity and consistency.

Navigation and information accessibility

Users spent a lot of time piecing together a holistic view of the customer. This lack of visibility caused inefficiencies and delays in assessments.

Information hierarchy was modelled around the policy entity, which caused customer information to repeat across policies. As the system scaled to support multi-policy capabilities, this model proved to be increasingly challenging in terms of data accessiblity and consistency.

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.

3

Hypotheses

These hypotheses reflect key patterns observed in the previous section, "Challenges uncovered".

3

Hypotheses

These hypotheses reflect key patterns observed in the previous section, "Challenges uncovered".

3

Hypotheses

These hypotheses reflect key patterns observed in the previous section, "Challenges uncovered".

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.

4

Approaches

Strategic challenges were addressed by embedding foundational design methods, testing hypotheses and informing iterative improvements.

4

Approaches

Strategic challenges were addressed by embedding foundational design methods, testing hypotheses and informing iterative improvements.

4

Approach

Strategic challenges were addressed by embedding foundational design methods, testing hypotheses and informing iterative improvements.

Setting up guiding principles

Four core principles were established to guide design decisions toward intended outcomes, addressing current gaps and opportunities while fostering efficiency and autonomy for both users and collaborators.

Setting up guiding principles

Four core principles were established to guide design decisions toward intended outcomes, addressing current gaps and opportunities while fostering efficiency and autonomy for both users and collaborators.

Setting up guiding principles

Four core principles were established to guide design decisions toward intended outcomes, addressing current gaps and opportunities while fostering efficiency and autonomy for both users and collaborators.

Adaptable

To acknowledge diverse workflows and working styles of users and collaborators

To support mindfulness of long-term scalability amongst collaborators, aiming to avoid tactical solutions that may limit future growth.

Design for current needs that are easily adaptable for future growth

Offer users the control of their experience to suit their individual workflows

Adaptable

To acknowledge diverse workflows and working styles of users and collaborators

To support mindfulness of long-term scalability amongst collaborators, aiming to avoid tactical solutions that may limit future growth.

Design for current needs that are easily adaptable for future growth

Offer users the control of their experience to suit their individual workflows

Adaptable

To acknowledge diverse workflows and working styles of users and collaborators

To support mindfulness of long-term scalability amongst collaborators, aiming to avoid tactical solutions that may limit future growth.

Design for current needs that are easily adaptable for future growth

Offer users the control of their experience to suit their individual workflows

Knowledgeable

To provide clear, accurate, and proactive information, helping users make informed decisions confidently.

For collaborators, it emphasises designing systems or solutions that instil trust by ensuring information accuracy and providing appropriate feedback when information is unavailable.

Improve reliability and user confidence by presenting accurate information

Use clear instructions and feedback to maintain clarity and responsiveness of user feedback.

Knowledgeable

To provide clear, accurate, and proactive information, helping users make informed decisions confidently.

For collaborators, it emphasises designing systems or solutions that instil trust by ensuring information accuracy and providing appropriate feedback when information is unavailable.

Improve reliability and user confidence by presenting accurate information

Use clear instructions and feedback to maintain clarity and responsiveness of user feedback.

Knowledgeable

To provide clear, accurate, and proactive information, helping users make informed decisions confidently.

For collaborators, it emphasises designing systems or solutions that instil trust by ensuring information accuracy and providing appropriate feedback when information is unavailable.

Improve reliability and user confidence by presenting accurate information

Use clear instructions and feedback to maintain clarity and responsiveness of user feedback.

Empowering

To foster autonomy and confidence for both users and collaborators, build user confidence during system migrations or rapid feature rollouts and reduce collaborator reliance on UX oversight.

To build learnability confidence during system migrations or rapid feature rollouts and reduce collaborator reliance on UX oversight.

Offer users a way to undo or modify their actions where possible

Enable users/collaborators to make confident decisions independently

Empowering

To foster autonomy and confidence for both users and collaborators, build user confidence during system migrations or rapid feature rollouts and reduce collaborator reliance on UX oversight.

To build learnability confidence during system migrations or rapid feature rollouts and reduce collaborator reliance on UX oversight.

Offer users a way to undo or modify their actions where possible

Enable users/collaborators to make confident decisions independently

Empowering

To foster autonomy and confidence for both users and collaborators, build user confidence during system migrations or rapid feature rollouts and reduce collaborator reliance on UX oversight.

To build learnability confidence during system migrations or rapid feature rollouts and reduce collaborator reliance on UX oversight.

Offer users a way to undo or modify their actions where possible

Enable users/collaborators to make confident decisions independently

Predictable

Defined to ensure consistent interfaces and navigation, reducing cognitive load for users and helping them build confidence in navigating tasks.

For collaborators, it focuses on maintaining alignment in design direction, promoting consistent, scalable outputs without requiring extensive UX oversight.

Aim for consistency with interfaces and interactions to create a predictable experience, reducing cognitive load for users and collaborators.

Leverage familiar mental models to maximize intuitiveness and ease of use, minimizing the learning curve for new users and reducing the need for ongoing UX support.

Predictable

Defined to ensure consistent interfaces and navigation, reducing cognitive load for users and helping them build confidence in navigating tasks.

For collaborators, it focuses on maintaining alignment in design direction, promoting consistent, scalable outputs without requiring extensive UX oversight.

Aim for consistency with interfaces and interactions to create a predictable experience, reducing cognitive load for users and collaborators.

Leverage familiar mental models to maximize intuitiveness and ease of use, minimizing the learning curve for new users and reducing the need for ongoing UX support.

Predictable

Defined to ensure consistent interfaces and navigation, reducing cognitive load for users and helping them build confidence in navigating tasks.

For collaborators, it focuses on maintaining alignment in design direction, promoting consistent, scalable outputs without requiring extensive UX oversight.

Aim for consistency with interfaces and interactions to create a predictable experience, reducing cognitive load for users and collaborators.

Leverage familiar mental models to maximize intuitiveness and ease of use, minimizing the learning curve for new users and reducing the need for ongoing UX support.

Reinforcing with interaction design principles

Without reinventing the wheel, modern interaction design principles were spotlighted to resolve current gaps, and provide clarity and direction to support the guiding principles.

Reinforcing with interaction design principles

Without reinventing the wheel, modern interaction design principles were spotlighted to resolve current gaps, and provide clarity and direction to support the guiding principles.

Reinforcing with interaction design principles

Without reinventing the wheel, modern interaction design principles were spotlighted to resolve current gaps, and provide clarity and direction to support the guiding principles.

Spotlighted interaction design principles

For further reading on interaction design principles mentioned, do check out First Principles of Interaction Design by Bruce Tognazzini.

Anticipation

Anticipation

Consistency

Consistency

Defaults

Defaults

Explorable interfaces

Explorable interfaces

Efficiency of the user

Efficiency of the user

Fitt's Law

Fitt's Law

Latency reduction

Latency reduction

Protect user's work

Protect user's work

Simplicity

Simplicity

Establishing structures

Structures were defined to improve consistency and predictability of UI/UX designs, enabling collaborators to make better design-informed decisions. By organising interactions and information into meaningful hierarchies, it formed the blueprint for an autonomous and scalable UI/UX framework.

These structures were defined in two categories: Interaction and Information structures.

Establishing structures

Structures were defined to improve consistency and predictability of UI/UX designs, enabling collaborators to make better design-informed decisions. By organising interactions and information into meaningful hierarchies, it formed the blueprint for an autonomous and scalable UI/UX framework.

These structures were defined in two categories: Interaction and Information structures.

Establishing structures

Structures were defined to improve consistency and predictability of UI/UX designs, enabling collaborators to make better design-informed decisions. By organising interactions and information into meaningful hierarchies, it formed the blueprint for an autonomous and scalable UI/UX framework.

These structures were defined in two categories: Interaction and Information structures.

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.

1

Search

e.g. Nav bar / Filters

2

Assessment / Action

e.g. Info / Inputs

3

Transaction / More info

e.g. Checkout / Preview / Notes

1

2

3

1

Search

e.g. Nav bar / Filters

2

Assessment / Action

e.g. Info / Inputs

3

Transaction / More info

e.g. Checkout / Preview / Notes

1

2

3

1

Search

e.g. Nav bar / Filters

2

Assessment / Action

e.g. Info / Inputs

3

Transaction / More info

e.g. Checkout / Preview / Notes

1

2

3

Vertical interaction

Vertical structures represented the mapping of interface elevation to categories of actions. From bottom to top — Assessment ↑ Single-task ↑ Support.

Assessment

1

1

Assessment and action

e.g. navigation, information, checkout

Assessment

1

1

Assessment and action

e.g. navigation, information, checkout

Action

2

2

Single-task focus

e.g. forms

Action

2

2

Single-task focus

e.g. forms

Support

3

3

Feedback & support

e.g. tooltips, notes, alerts, notification toasts, preview drawers

Support

3

3

Feedback & support

e.g. tooltips, notes, alerts, notification toasts, preview drawers

3

Feedback & support

e.g. tooltips, notes, alerts, notification toasts, preview drawers

3

Feedback & support

e.g. tooltips, notes, alerts, notification toasts, preview drawers

2

Single-task focus

e.g. forms

2

Single-task focus

e.g. forms

1

Assessment and action

e.g. navigation, information, checkout

1

Assessment and action

e.g. navigation, information, checkout

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.

Customer

Insurance cover

Pet

Condition

Claim

Condition

Claim

Pet

Condition

Claim

Condition

Claim

Condition

Claim

Customer

Insurance cover
Pet

Condition

Claim

Claim

Condition

Claim

Pet

Condition

Claim

Condition

Claim

Condition

Claim

Customer

Insurance cover
Pet

Condition

Claim

Claim

Condition

Claim

Pet

Condition

Claim

Condition

Claim

Condition

Claim

Entity relationships communicated:

A customer

has 1 or more insurance covers

has 1 or more insurance covers

has 1 or more insurance covers

has 1 or more pets covered

has 1 or more pets covered

has 1 or more pets covered

An insurance cover

covers 1 or more pets

covers 1 or more pets

covers 1 or more pets

A pet

has 0 or more ailments

has 0 or more ailments

has 0 or more conditions

A condition

has 1 or more claims

has 1 or more claims

Example B: In-depth example of a customer's information structure for a Customer Support Agent.

Customer

Subscription

Payment method

Discount %

Amount

Pet

Health information

Condition

Claim

Condition

Product

Coverage

Deductible options

Claim

Coverage

Claim

Coverage

Product

Treatment

Treatment

Claim

Pet

Health information

Condition

Condition

Condition

Claim

Product

Coverage

Deductible options

Coverage

Customer

Subscription

Payment method

Discount %

Amount

Pet

Health information

Condition

Claim

Condition

Product

Coverage

Deductible options

Claim

Coverage

Claim

Coverage

Product

Treatment

Treatment

Claim

Pet

Health information

Condition

Condition

Condition

Claim

Product

Coverage

Deductible options

Coverage

Customer

Subscription

Payment method

Discount %

Amount

Pet

Health information

Condition

Claim

Condition

Product

Coverage

Deductible options

Claim

Coverage

Claim

Coverage

Product

Treatment

Treatment

Claim

Pet

Health information

Condition

Claim

Condition

Product

Coverage

Deductible options

Claim

Coverage

Claim

Coverage

Product

Treatment

Treatment

Claim

Entity relationships communicated:

A customer

has 1 subscription

has 1 subscription

has 1 subscription

has 1 or more pets

has 1 or more pets

has 1 or more pets

A subscription

has 1 or more products

has 1 or more products

has 1 or more products

has 1 price

has 1 price

has 1 price

has 1 payment frequency

has 1 payment frequency

has 1 payment frequency

has 1 payment method

has 1 payment method

has 1 payment method

has 0 or more discounts

has 0 or more discounts

has 0 or more discounts

A pet

has 0 or more conditions

has 0 or more conditions

has 0 or more conditions

has 0 or more pre-ex conditions

has 0 or more pre-ex conditions

has 0 or more pre-ex conditions

is covered by 1 or more products

is covered by 1 or more products

is covered by 1 or more products

A condition

may be pre-existing

may be pre-existing

may be pre-existing

A product

has 1 or more coverages with limits

has 1 or more coverages with limits

has 1 or more coverages with limits

has 0 or more claims made

has 0 or more claims made

has 0 or more claims made

A coverage

may have deductible options (e.g., excess)

may have deductible options (e.g., excess)

may have deductible options (e.g., excess)

may have a limit

may have a limit

may have a limit

Bridging principles and solutions with patterns

Spotlighted interaction-design principles were embedded into patterns discovered and newly-defined ones as a way of targeting usability gaps and rationalising user-centered design perspectives with collaborators with the intent of cultivating a shared responsibility.

Bruce Togazzinni spoke of the principle "Efficiency of the user" which was a reminder to what mattered was the user's productivity first, followed by the system. it was common for collaborators to lose sight on the user when their KPIs are not reflective.

Bridging principles and solutions with patterns

Spotlighted interaction-design principles were embedded into patterns discovered and newly-defined ones as a way of targeting usability gaps and rationalising user-centered design perspectives with collaborators with the intent of cultivating a shared responsibility.

Bruce Togazzinni spoke of the principle "Efficiency of the user" which was a reminder to what mattered was the user's productivity first, followed by the system. it was common for collaborators to lose sight on the user when their KPIs are not reflective.

Bridging principles and solutions with patterns

Spotlighted interaction-design principles were embedded into patterns discovered and newly-defined ones as a way of targeting usability gaps and rationalising user-centered design perspectives with collaborators with the intent of cultivating a shared responsibility.

Bruce Togazzinni spoke of the principle "Efficiency of the user" which was a reminder to what mattered was the user's productivity first, followed by the system. it was common for collaborators to lose sight on the user when their KPIs are not reflective.

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

Efficiency of the user, Explorable interfaces, Latency reduction

Anticipation, Fitt's Law, Simplicity, User In Control

Impact

This structure reduced UX oversight and increased autonomy for product and engineering, providing confidence in a dual-track agile environment.

This was also helpful in driving reduction of user latency by encouraging loading specified information first where ever possible.

These guidelines improved the design direction of accessibility to information by reducing clutter, making interactions more intuitive and efficient.

Anatomy (Animated demo)

A demonstration of nesting containers using a fixed information and action structure.

Containers are split into two sections: 'Header' and 'Body':

Header: Top-level entity information like entity name, status, eyebrow and contextual actions. These served as entry points in finding contextual information quicker.

Header: Top-level entity information like entity name, status, eyebrow and contextual actions. These served as entry points in finding contextual information quicker.

Design for current needs that are easily adaptable for future growth

Body: Additional entity content.

Body: Additional entity content.

Offer users the control of their experience to suit their individual workflows

Entity actions positioned inside entity containers served as entry points in finding contextual information quicker.

Contextual actions located in entity containers were used as entry points in finding meaningful information quicker. In the previous section regarding

STATUS

Eyebrow

Actions

Heading

Subheading

Body

Body

STATUS

Eyebrow

Actions

Heading

Subheading

Body

Body

STATUS

Eyebrow

Heading

Subheading

Body

Body

STATUS

Eyebrow

Heading

Subheading

Body

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.

1

Start

Users are presented with possible ways of choose a contextual navigation action.

1

Start

Users are presented with possible ways of choose a contextual navigation action.

1

Start

Users are presented with possible ways of choose a contextual navigation action.

Entry points
Customer

Actions

Pet A
Pet B
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 ➜

2

Drilling further down

User is taken to page templates with content pre-filtered based on the query.

2

Drilling further down

User is taken to page templates with content pre-filtered based on the query.

2

Drilling further down

User is taken to page templates with content pre-filtered based on the query.

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

Impact

Impact

Impact

A common theme in user feedback was an improved accessibility to information. Users were able to manage price and reimbursement breakdowns more effectively with customers over the phone. Another benefit was fostering an understanding amongst collaborators during discoveries on what is meaningful for the user, not just the customer.

This design improved the simplicity of information presented by reducing clutter, making customer service interactions with customers over the phone more focused.

Example: Payment breakdown (Interactive demo)

This is an example of a price breakdown for a customer, the costs for each of pet and their products.

Default states are determined by the space it exists in. In this example, Level 1 detail (i.e. "Plan for Pet X") is shown by default.

Fitts’ Law was also applied to reduce interaction effort by providing a larger click area for each level of detail.

By presenting meaningful information upfront, users can progressively reveal more detailed information by expanding each layer. This reduces visual clutter, prioritising essential information and providing user control over information density.

Fitts’ Law was also applied to reduce interaction effort, by having a larger click area for each level of detail.

Click on each line item to show/hide more information

Next payment

£63.00

Plan for Pet A

39.50

Plan for Pet B

20.50

Subtotal

60.00

Discount (12.5%)

-7.50

Tax (20%)

10.50

Total

£63.00

Next payment

£63.00

Plan for Pet A

39.50

Plan for Pet B

20.50

Subtotal

60.00

Discount (12.5%)

-7.50

Tax (20%)

10.50

Total

£63.00

Next payment

£63.00

Plan for Pet A

39.50

Plan for Pet B

20.50

Subtotal

60.00

Discount (12.5%)

-7.50

Tax (20%)

10.50

Total

£63.00

Anticipatory inputs

Anticipatory inputs reinforced a user-first approach by recommending repetitive inputs or pre-filling where possible.

Spotlighted ID principles

Anticipation, Consistency, Defaults

Impact

Impact

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.

Vet

Search for a vet

Vet

Search for a vet

Vet

Search for a vet

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

Impact

Impact

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.

Pet A's postcode

|

Pet A's postcode

|

Pet A's postcode

|

5

Takeaways

5

Takeaways

5

Takeaways

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.