Case study 1
ECLIPSE Financial Assessment (FA) App - Rules Configuration
Case study 1
ECLIPSE Financial Assessment (FA) App - Rules Configuration
Case study 1
ECLIPSE Financial Assessment (FA) App - Rules Configuration
Product
ECLIPSE Financial Assessment (FA) App
Time
Role:
UI/UX Designer (solo ownership)
Timeline:
2024 (In progress)
Team
Product Manager,
Technical Writer,
Senior UI Designer,
Engineering Team
Tools
Figma,
Design System Components,
Storybook,
WCAG 2.2
Product
ECLIPSE Financial Assessment (FA) App
Time
Role:
UI/UX Designer (solo ownership)
Timeline:
2024 (In progress)
Team
Product Manager,
Technical Writer,
Senior UI Designer,
Engineering Team
Tools
Figma,
Design System Components,
Storybook,
WCAG 2.2
Product
ECLIPSE Financial Assessment (FA) App
Time
Role:
UI/UX Designer (solo ownership)
Timeline:
2024 (In progress)
Team
Product Manager,
Technical Writer,
Senior UI Designer,
Engineering Team
Tools
Figma,
Design System Components,
Storybook,
WCAG 2.2
1. Project overview
Purpose
Purpose Financial Assessment Officers (FAOs) across local authorities rely on this tool to interpret complex assessment rules that determine charging for care services. These rules originate in a database and were previously difficult to interpret and validate.
My Task
Transform dense database logic into a clear, accessible, navigable UI that reduces errors, speeds up assessments, and aligns with the ECLIPSE design system.
1. Project overview
Purpose
Purpose Financial Assessment Officers (FAOs) across local authorities rely on this tool to interpret complex assessment rules that determine charging for care services. These rules originate in a database and were previously difficult to interpret and validate.
My Task
Transform dense database logic into a clear, accessible, navigable UI that reduces errors, speeds up assessments, and aligns with the ECLIPSE design system.
1. Project overview
Purpose
Purpose Financial Assessment Officers (FAOs) across local authorities rely on this tool to interpret complex assessment rules that determine charging for care services. These rules originate in a database and were previously difficult to interpret and validate.
My Task
Transform dense database logic into a clear, accessible, navigable UI that reduces errors, speeds up assessments, and aligns with the ECLIPSE design system.
The Problem
The existing financial rules logic:
lived entirely in the backend
had no visual interface
caused delays during assessments
left FAOs confused about which rules were applied
required developers to investigate issues manually
Users needed a way to see, understand, and validate rules without reading SQL or backend tables.
The Problem
The existing financial rules logic:
lived entirely in the backend
had no visual interface
caused delays during assessments
left FAOs confused about which rules were applied
required developers to investigate issues manually
Users needed a way to see, understand, and validate rules without reading SQL or backend tables.
The Problem
The existing financial rules logic:
lived entirely in the backend
had no visual interface
caused delays during assessments
left FAOs confused about which rules were applied
required developers to investigate issues manually
Users needed a way to see, understand, and validate rules without reading SQL or backend tables.
Constraints: Business requirements
Display financial assessment rules in the FA app
Provide both Residential and Non-residential pathways
Ensure accuracy and traceability
Reduce developer dependency
Constraints: Business requirements
Display financial assessment rules in the FA app
Provide both Residential and Non-residential pathways
Ensure accuracy and traceability
Reduce developer dependency
Constraints: Business requirements
Display financial assessment rules in the FA app
Provide both Residential and Non-residential pathways
Ensure accuracy and traceability
Reduce developer dependency
Constraints:
Technical
Rules come from existing data schema
Some content cannot be modified by users
Constraints:
Technical
Rules come from existing data schema
Some content cannot be modified by users
Constraints:
Technical
Rules come from existing data schema
Some content cannot be modified by users
Design
Requirements
Show screens within FA app navigation
Use ECLIPSE Design System + Storybook components
Achieve full accessibility compliance (WCAG 2.2)
Provide flows for both rule categories
Present long-scroll screens for multi-section rules
✨ All of this becomes strong UX writing for your portfolio.
Design
Requirements
Show screens within FA app navigation
Use ECLIPSE Design System + Storybook components
Achieve full accessibility compliance (WCAG 2.2)
Provide flows for both rule categories
Present long-scroll screens for multi-section rules
✨ All of this becomes strong UX writing for your portfolio.
Design
Requirements
Show screens within FA app navigation
Use ECLIPSE Design System + Storybook components
Achieve full accessibility compliance (WCAG 2.2)
Provide flows for both rule categories
Present long-scroll screens for multi-section rules
✨ All of this becomes strong UX writing for your portfolio.
Research & understanding
Since there was no existing interface, I worked with:
FA officers
Product Manager
Technical Writer
Developers
Senior Designer
to understand:
how FA officers interpret rules
which rule types are most used
what mistakes happen today
what information needs grouping
what “must never be editable”
Research & understanding
Since there was no existing interface, I worked with:
FA officers
Product Manager
Technical Writer
Developers
Senior Designer
to understand:
how FA officers interpret rules
which rule types are most used
what mistakes happen today
what information needs grouping
what “must never be editable”
Research & understanding
Since there was no existing interface, I worked with:
FA officers
Product Manager
Technical Writer
Developers
Senior Designer
to understand:
how FA officers interpret rules
which rule types are most used
what mistakes happen today
what information needs grouping
what “must never be editable”
Information architecture
Residential Pathway
Manual-tested benefits
Disregards
Allowances
Benefit rules
Non-Residential Pathway
(same categories)
They mirror each other for cognitive consistency.
Information architecture
Residential Pathway
Manual-tested benefits
Disregards
Allowances
Benefit rules
Non-Residential Pathway
(same categories)
They mirror each other for cognitive consistency.
Information architecture
Residential Pathway
Manual-tested benefits
Disregards
Allowances
Benefit rules
Non-Residential Pathway
(same categories)
They mirror each other for cognitive consistency.
Design process
Database → Structured Categories → Screens → Flows
Key UX decisions
Used tabs + consistent sections for predictable scanning
Long tables converted to scrollable content
Included context labels on every screen
Used design system for accessible forms
Added section headers for screen reader clarity
Created anchors for long pages
Matched Storybook components for seamless build
Ensured contrast + spacing for WCAG 2.2 AA
Design process
Database → Structured Categories → Screens → Flows
Key UX decisions
Used tabs + consistent sections for predictable scanning
Long tables converted to scrollable content
Included context labels on every screen
Used design system for accessible forms
Added section headers for screen reader clarity
Created anchors for long pages
Matched Storybook components for seamless build
Ensured contrast + spacing for WCAG 2.2 AA
Design process
Database → Structured Categories → Screens → Flows
Key UX decisions
Used tabs + consistent sections for predictable scanning
Long tables converted to scrollable content
Included context labels on every screen
Used design system for accessible forms
Added section headers for screen reader clarity
Created anchors for long pages
Matched Storybook components for seamless build
Ensured contrast + spacing for WCAG 2.2 AA
Visual design
Explain the steps:
used ECLIPSE design system components
used token-based colours and spacing
aligned everything to 8px grid
used system table components
added clear hierarchy
maintained consistency across both pathways
Visual design
Explain the steps:
used ECLIPSE design system components
used token-based colours and spacing
aligned everything to 8px grid
used system table components
added clear hierarchy
maintained consistency across both pathways
Visual design
Explain the steps:
used ECLIPSE design system components
used token-based colours and spacing
aligned everything to 8px grid
used system table components
added clear hierarchy
maintained consistency across both pathways
Collaboration challenges
During collaboration, we discovered developers were inspecting flows directly in Figma rather than relying on specifications. To avoid confusion, the team aligned on exporting static screenshots for dev review only, while maintaining editable master screens for UI continuity.
Collaboration challenges
During collaboration, we discovered developers were inspecting flows directly in Figma rather than relying on specifications. To avoid confusion, the team aligned on exporting static screenshots for dev review only, while maintaining editable master screens for UI continuity.
Collaboration challenges
During collaboration, we discovered developers were inspecting flows directly in Figma rather than relying on specifications. To avoid confusion, the team aligned on exporting static screenshots for dev review only, while maintaining editable master screens for UI continuity.
Current Status
The project is currently in development review. I’m collaborating closely with engineering to refine data alignment, test logic presentation, and finalise accessibility behaviour for long-scroll pages.
Current Status
The project is currently in development review. I’m collaborating closely with engineering to refine data alignment, test logic presentation, and finalise accessibility behaviour for long-scroll pages.
Current Status
The project is currently in development review. I’m collaborating closely with engineering to refine data alignment, test logic presentation, and finalise accessibility behaviour for long-scroll pages.
10.Impact
FAOs will understand rules without developer help
Reduces assessment errors
Decreases investigation time
Improves clarity for training new staff
Creates a reusable pattern for other rule-based systems
Establishes a foundation for configuration in future releases
10.Impact
FAOs will understand rules without developer help
Reduces assessment errors
Decreases investigation time
Improves clarity for training new staff
Creates a reusable pattern for other rule-based systems
Establishes a foundation for configuration in future releases
10.Impact
FAOs will understand rules without developer help
Reduces assessment errors
Decreases investigation time
Improves clarity for training new staff
Creates a reusable pattern for other rule-based systems
Establishes a foundation for configuration in future releases
11.Reflection
This project strengthened my confidence in designing for complexity.
I learned to translate backend logic into human-readable flows, push for clarity without sacrificing accuracy, and collaborate with cross-functional teams under evolving requirements.
It also solidified my appreciation for accessibility and design-system thinking.
11.Reflection
This project strengthened my confidence in designing for complexity.
I learned to translate backend logic into human-readable flows, push for clarity without sacrificing accuracy, and collaborate with cross-functional teams under evolving requirements.
It also solidified my appreciation for accessibility and design-system thinking.
11.Reflection
This project strengthened my confidence in designing for complexity.
I learned to translate backend logic into human-readable flows, push for clarity without sacrificing accuracy, and collaborate with cross-functional teams under evolving requirements.
It also solidified my appreciation for accessibility and design-system thinking.
Esha Bhoyroo
Contact Me
Play my games
Website
UX/UI Training
Click to see my progress at memorisely
Certifications
Assessibility Certification
Designership Ultimate Figma Course
Designership Ultimate Figma Course 2.0
Current Certification
38% complete
Esha Bhoyroo
Contact Me
Play my games
Website
UX/UI Training
Click to see my progress at memorisely
Certifications
Assessibility Certification
Designership Ultimate Figma Course
Designership Ultimate Figma Course 2.0
Current Certification
38% complete
Esha Bhoyroo
Contact Me
Play my games
Website
UX/UI Training
Click to see my progress at memorisely
Certifications
Assessibility Certification
Designership Ultimate Figma Course
Designership Ultimate Figma Course 2.0
Current Certification
38% complete