UX/UI Design | Interface Redesign
SaaS
Desktop
Case Management
Financial Services
End-to End Experience
Client
Deloitte UK
Timeline
2 months
Role
Product Designer
Introduction
Deloitte's Flow Engine, a robust case management platform, includes a key feature: building customised forms for KYC (Know Your Customer), AML (Anti-Money Laundry), and other applications.
This feature allows System Administrators to design sections, fields, and forms for end-users to fill out during case processing.
Problem
Our main goal was to improve the form builder by reducing configuration time, adding features, and making it easier to see and edit forms before publishing. We wanted to answer these questions:
How can users love using the form builder?
What design patterns help people build forms faster?
How can we prevent mistakes after publishing forms?
Can users clearly see the connection between the main and sub-forms?
Does form complexity affect completion time?
How can we reduce support requests and understand what people typically ask for?
Are there hidden user needs we still need to address?
Outcome
Based on user feedback, we made significant improvements that led to a 75% increase in user satisfaction and faster task completion. We focused on two key areas:
Parent-Child Relationships: We made the visual hierarchy between sections and sub-sections more straightforward, making it easier to understand their connection.
Functionality and Action Buttons: We redesigned the section card layout and clarified button functions, giving users better guidance. This also made adding fields and previewing the form smoother.
Crew
As a Product Designer, I applied my UX/UI design and research skills to work with a team of Project Managers, Developers, and QA testers. I led workshops to define the problem, understand user needs and product metrics, and guide the design process.
Challenges
Our main challenge was ensuring changes wouldn't disrupt other parts of Flow Engine. I contacted developers to ensure the new design was integrated seamlessly without extra testing or deployment complexity.
Persona
Sam
The System Administrators are the ones who onboard and configure projects in Flow Engine.
They are the ones that ensure the project requirements are configured and the project can be released efficiently and quickly maintained.
Goals
Sam's goals as a System Administrator are to streamline project onboarding and maintenance, ensure accurate configurations, and prioritise compliance and security.
She also aims for a user-friendly interface to enhance productivity.
Frustrations
Sam faces pain points related to complex configuration, maintenance challenges, and the pressure of regulatory compliance.
Additionally, she experiences difficulties due to the lack of user-friendly tools as a System Administrator.
Process
We followed a structured design process with three key phases:
Discovery: We started with a workshop with internal stakeholders. I analysed the current user flow and then wrote a user story explaining the form builder's value for users.
Current User Flow
User Story
Also, a stakeholder interview was conducted to gain insights into the product metrics, feature feasibility, user goals and pain points. Leading to formulating the "Problem statement" and "Can we?"" questions.
Problem Statement
Can We? Questions
Research Insights
How Might We? Question
Brainstorming
Insights
The case study highlights how focusing on user needs can improve the usability of a product. It stresses the significance of conducting regular research with users and collaborating with the UX research team to continuously enhance the product beyond just addressing the concerns raised by the Administration and Support team.
Research: Using semi-structured interviews and task analysis with system administrators, I identified their pain points, goals, and needs. I then grouped insights using affinity mapping to prepare for the next phase.
Define: The team collaborated, voted on research insights, and worked on "How Might We?" questions to prioritise challenges.
Based on the voted-on insights, we formulated "How Might We?" questions for the most pressing issues:
Parent and Child Relationship: Can we make nested sections more straightforward?
Form Preview: Can we avoid users switching between tabs to see how changes affect the form?
Documentation History: Can we show users past configuration changes?
We then focused on the "What will the published form look like?" question, which best addressed the problem statement, business goals, and user pain points. This collaborative brainstorming session helped clarify our design direction and the reasons behind each choice.
Before prototyping, I consulted with developers to understand the impact of any proposed changes. We decided to improve the form creation process from the beginning, as this would positively impact the entire form setup and user experience. We focused on three core flows:
User Flows
The new proposed flow suggested to break down the flow by tasks, currently users would be jumping into multiple pages making the navigation troublesome. E.g: Certain actions would pull in a side panel so the users would be kept in the same page and being able to return to the previous interface without having to figure out how. Also, the terminology was revised to make it more intuitive for the users the task they are going through. E.g: Forms previously was called Forms Collection
The idea was that once a form was created, users would be adding and editing their sections in the Form Section Workflow. Also, the types of forms was reviewed as there were a lack of intuitiveness in some of naming. E.g: Mapped Section became Section and Unmapped Section became Blank Section.
Lastly, users can add child elements within the parent element sections.
Prototypes
Form Creation: We moved configuration input fields to a side panel instead of a separate page, reducing cognitive load and navigation for users.
Add Section: We created an intuitive "Form Sections Workflow" interface to visualise the form structure and simplify section addition. We also clarified different section types for better understanding.
Add Child Section/Field: We designed a simple way to add child sections and fields while clearly showing their relationship to the parent section. This aligns with users' natural understanding of parent-child relationships, making the system more accessible and efficient.
Once, the flow was refined and agreed with the team, I jumped into do some sketches and then digitalising the designs that I assumed would fit with the proposed solution.
I ran an usability testing through the prototyping process with some of the team members from the Customer Delivery team to gather further feedback.
Sketching
Form page variations
Main flow
Platform Screenshots
