Redesign a Web Data Regulatory Platform for 60K firms
The client is a financial conduct regulator for nearly 60,000 financial services firms and financial markets in the UK and aims to make markets work well - approached us to revamp their platform from the ground up. They decided to embark on a major business transformation, with the aim of enhancing the experience for its customers. This project showcases the redesign of the platform and rebuild. We designed the new platform as easy-to-use that allows easy submission of data in a way that is efficient for the user and permitted the client to fix issues faster with a component-driven design and modernize legacy technology to create a modern platform.
Project Date
May 2019 - June 2020
Industry
Financial Services
My Role
-
Assisted user research team analyze research data and defining key personas along with a User Research
-
Responsible for the project's User Experience and Visual Design
-
Developed and maintained a Design Language for desktop
-
Developer collaboration
Team
-
3 UX Designers
-
2 UX Researchers
-
4 Front End Developers
-
8 Back End Developers
-
2 Scrum Masters
-
1 Product Owner
The Challenge
The client has an established online system for collecting and storing regulatory data from firms. They were now ready to deepen their understanding of markets and consumers, and more swiftly identify, appropriately intervene and remediate issues to minimise harm to the users.
However, the client’s existing online system for collecting and storing regulatory data from firms, but the legacy system lacked the capability of fixing issues quickly and didn’t allow for growth. It also lacked the ability to view previous or upcoming submitted data immediately coupled with inconsistent navigation patterns and 180+ forms that were lacking features of support, validation etc.
It was also getting harder to maintain well-governed records according to GDPR laws, with the outdated, siloed systems. Thus, the client decided to invest in a new and improved platform for our data collection systems, which will include replacing the existing platform entirely.
Existing experience screenshots
The Research
User Research team set with a goal to shift toward a digital process that facilitated more meaningful customer relationships. As well as allow exploring how technology could make it easier for firms to meet their regulatory reporting requirements and improve the quality of information they provide.
Stakeholder interviews
We started our UX activities with stakeholder interviews. This allowed us to get a clearer idea about the scope and parameters of the project. To understand the current product and how customers and clients interacted with the platform, we conducted workshops with internal stakeholders to understand the strengths and challenges.
Stakeholder interview guide
Surveys
Next, the User Research team ran an Online Survey where 1,000 users and client stakeholders combined shared their thoughts on the current system. It helped us identify key areas for improvement before we moved to the User Interviews.
Screenshot for the survey
The surveys didn't give us the scope to probe the responses to dig into the details of the answers of the respondents. To gain a deeper understanding and narrow down the problem and close the knowledge we conducted 20 x 1:1 generative user interviews. The team did remote moderated sessions and deep inquiry, to develop a fully rounded, understanding of the users in question— what their experiences are like in relation to the platform and what drives their behaviour and decisions. I sat through all interviews as an observer.
User quotes noted during user interviews.
We learned that users required
-
Viewing Schedule redesign, so the user can view past and future submissions in one place
-
Make the form filling make the process as easy as possible
-
Aligning the uploading files experience across the platform
We then collaborated with the client team to define a minimum viable product (MVP), product vision and roadmap.
MVP finalized
The Proposed Solution
Information Architecture
Help the user reach that goal in the easiest way possible
Post the user interviews we realized the application suffered from confusing menu labels. Unclear naming was one of the challenges we had to tackle. Such labels were making it difficult for users to find what they were looking for.
In the face of a time and resource crunch, going through a full-scale card sorting exercise wasn’t possible. Also, it doesn’t necessarily produce the exact categorization scheme one should follow. Alternatively, we choose to do Tree Testing. It is considered a fast and iterative evaluation of menu labels and categories.
Post Tree Testing and analysis, we went ahead with a flat structure, where the pages are equal and they are put at the same level of navigation, so they are interchangeably accessible for the users. Also to improve findability and discoverability, we organized content by task and made the categories descriptive, specific, and mutually exclusive, so that users could navigate without hesitation.
This screen from a UX Insights System, a tree-testing system used to demonstrate which category is the correct answer for a particular task.
A sitemap, to help visually denote how different pages and content relate to one another.
Adopting Design System
Design Systems help you create efficient design solutions
While the user research team was handling the user interviews and generating actionable insights. We started with the next phase. As the team was globally distributed, with designers and developers from different groups it was getting hard to maintain a consistent experience across the platform. Also, one of the project goals was to implement a system that enabled the developers to fix issues faster. It became crucial to introduce a Design System.
The goal we set was to create a more intuitive and accessible design language. Before jumping into designing components, we needed the developers also onboard. We arranged to progressively emphasize a common language and process between developers and designers, we did so by leveraging Google Angular Material.
The first thing we did is list all elements that need to be included in the design system. We made an inventory in a worksheet
and then prioritized the items by usage. To facilitate this task, we assigned priority points from 0 (redundant) to 3 (compulsory). Once we had created a list of the components and prioritized them, we started building up or simply collecting the product principles or visual language elements such as brand guidelines, colours, typography and grid. Further, we created templates that described the components such as specifications, usage and accessibility.
An example of the Design System.
Form Redesign
Solidify the user experience by revisiting how the data was collected
Accordion Forms
We proposed the use of accordion forms. Since they use dynamic interactions on a single web page to hide and reveal sections of related questions, users could focus their attention on one set of questions at a time and not be overwhelmed with the entire form.
Along with that, we added a completion check to inform the user that indicated the previously open accordion had been completed and validated. A Proceed to Next Section button would inform the user that they have reached the end of the currently open accordion and helped with Server-side validation.
Error Prevention
If there are multiple errors, earlier the user would see them at the top of the page, along with the number of errors encountered. They would have to click on View All Errors to see them all or download the errors in XML or XBRL.
-
We introduced built-in form validation or Client-side validation, by providing format constraints already in place, so users would be less likely to enter incorrect data (e.g. if you enter letters where only numbers are allowed).
-
While Client-side validation is always better in the sense of providing a better User Experience (UX), server-side input validation is more reliable than client-side input validation. Hence, we retained the same once the entire form was submitted.
Form Header
The header needed to be as clean and straightforward as possible to guide the user through the whole process. Users would be less likely to defect and focus on the form by removing additional links to other pages. So we kept only save and return later and the guidance and help options.
Best practices were used while form designing to reduce user effort.
Takeaways
It took us a while to understand the complex world of data regulation, wrap our heads around the problems at hand, and come up with a strategy. This definitely created some anxiety at first, but our efforts to set a solid foundation helped us move fast and with confidence in the second half of the project.
The new website was launched in late 2020 and is constantly being improved according to customer feedback. A survey conducted in December 2020 proved that the redesign was a success.
