Redesign and New Filters
MerchantView™ is an innovative solution that helps banks and payment service providers identify hidden risks in their merchant portfolios. By leveraging advanced digital ecosystem analysis technologies, MerchantView™ enables users to detect illicit activities, prevent online transaction laundering, and ensure regulatory compliance.
The Main Challenge
The primary challenge was to consolidate numerous scattered filters into a single location, significantly enhancing both accessibility and functionality. This required a comprehensive and modern redesign of the user interface, enabling effortless filter usage, quicker searches, and the added capability to create, compile, and save custom filters. This redesign not only simplifies the user experience but also boosts productivity by streamlining the filtering process.
The Solution
As a UX/UI designer, I was involved in every phase of the project, from initial concept and user research to surveys, wireframes, and prototypes, culminating in the final UI design and handoff to the development team. I collaborated closely with product managers, developers, customer success teams, technical writers, and BI teams. This comprehensive approach ensured a cohesive and user-centric final product, seamlessly integrating feedback and insights from all stakeholders.
My Role and Team
The goal was to consolidate all filters into a single, accessible location.
I participated in the effort to add advanced filtering options, revamp the UX/UI for a more modern and clean look, and update the microcopy. This comprehensive redesign not only streamlined the user experience but also enhanced functionality, making it easier for users to navigate and utilize the filters effectively. By focusing on these key areas, we significantly improved the overall usability and efficiency of the interface.
THE MAIN CHALLENGE
The main challenge was to combine many scattered filters in one location in order to increase accessibility and functionality. This involved a modern redesign of the user interface that facilitates simple filter use, faster searches, and the added ability to compile and save your own filters.
MY ROLE AND TEAM
As a UX / UI designer, I worked on all phases of the project, from the idea, user research, surveys, wireframes, and prototypes to the final UI design and delivery to the development team. I worked closely with product managers and developers, as well as the customer success, technical writer and BI teams.
THE SOLUTION
-
Place all filters in one place
-
Add advance filter
-
Change UX / UI to be more modern and clean
-
Change microcopy
Started with...
Problem 1
Multiple Filters
Users face challenges with numerous filters scattered across different locations, making them difficult to find. Additionally, the “GO” button is often overlooked and underutilized. As a result, users sometimes believe they have applied filters and end up working all day without them, which reduces efficiency and productivity.
Problem 2
No Advance Filters
Every morning, the risk analyst must re-select the necessary filters, which consumes extra time and frustrates the user. This repetitive task not only increases the likelihood of errors and inefficiencies, as filters may be missed or incorrectly selected each time, but also detracts from the analyst’s ability to focus on more critical tasks. Streamlining this process would significantly enhance productivity and reduce user frustration, ensuring a more efficient workflow.
Problem 3
Outdated UI Design
Nowadays, we all use desktop and smartphone applications. Encountering an outdated program can negatively impact our perception of the software and the company behind it. Our tech-savvy users are accustomed to modern designs and applications, so we aimed to enhance this aspect of the user experience. Additionally, after thorough review, we discovered that the microcopy was often inconsistent and unclear, necessitating improvements for better clarity and consistency.
UX Researching
I started by discussing the primary issues with the product manager to gain a clear understanding of the project’s challenges. Following this, I conducted user interviews and engaged in conversations with my peers in customer success and support. These discussions provided me with a comprehensive understanding of user needs and pain points.
Before diving into the design process, I researched how filters are implemented in other products such as Notion, Monday, and JIRA. This comparative analysis helped me identify best practices and potential improvements. Additionally, I read several insightful articles from various resources, including Pencil and Paper and UXD World, among others. These resources enriched my knowledge and informed my approach to creating a more user-friendly and efficient filtering system.
User Persona
Jessica
25 / Risk Analist / London UK
Jessica is a young, tech-savvy risk analyst working at a prestigious bank in London. As a new employee, she takes great pride in being part of a large, reputable company. Jessica lives in a cozy apartment in central London, which she has decorated with a minimalist yet stylish touch, reflecting her modern and organized personality.
Every evening, after a productive day at work, she enjoys unwinding at a nearby café with a cup of coffee and a croissant. This routine helps her relax and reflect on her day. Jessica is also an avid reader and often brings a book to the café, immersing herself in different worlds and stories.
Jessica has a charming red cat named Risky, a playful nod to her daily task of assessing client risks.
Jessica is dedicated to her work and finds great satisfaction in her role as a risk analyst. She is constantly seeking to improve her skills and knowledge, attending workshops and networking events to stay updated with the latest industry trends. Her colleagues appreciate her enthusiasm, attention to detail, and willingness to help others.
Overall, Jessica is a dynamic and ambitious individual who balances her professional and personal life with grace and enthusiasm. She is driven by her passion for her work and her love for the city she calls home.
Survey
Our team decided to conduct a survey to determine which filters are created and used most frequently, as well as to understand how users feel about their experiences. We wanted to identify the most commonly used filters to facilitate easier access and to determine which filters are less important and could be safely hidden under an “All Filters” button. The survey responses clearly indicated that creating filters is not easy for most users.
We also consulted with the Business Intelligence (BI) team regarding the use of filters, and the BI team data aligned with the user responses. Using both the survey data and the BI team insights, we decided to keep three filters prominently displayed: “RISK,” “TYPE,” and “Category.” Additionally, we decided to remove the “GO” button because it was rarely used.
Sketching
Before I began working on wireframes, I created hand-drawn sketches based on our research. These sketches helped both the product manager and me understand how to design our new filters.
ALL FILTERS IN ONE PLACE
All the filteris in one place that allow a quick filtering
ADVANCE FILTERS
An advance filters that allow to an user to save his own filters and working esear ans faster.
Wireframes
I created wireframes to conceptualize the new filters and redesign. I modified the design of the tabs, relocated the ‘Settings’ and ‘Help’ buttons, consolidated all the filters into one place, and hid certain functions that are now only visible when the user hovers over specific areas.
Color Pallete
One of the challenges is matching colors that are supposed to work together in harmony. The goal is to eliminate any flicker that the eye may perceive with the color combinations, so that they can be visually interpreted without issue and be integrated into the user mindset as part of the identifying brand elements.
Button System
I updated the buttons to have a rounded design, which gave them a more modern appearance than the rectangular buttons previously in use. This new design feature also complemented the new, darker color pallet. And I created various new sizes for the primary and secondary button options.
Typography
I used the pre-established brand fonts for titles and paragraphs Space Grotesk and Open Sans. I chose to improve the user experience by increasing the font readability through contrast and size manipulations.
Icons
I used icons that are widely recognizable, easily understood, and well-suited to the product. This helps simplify visual elements and reinforce the brand image.
The Design System
I created a design system for the new filters which facilitates brand consistency and helps developers and designers to work quickly and more efficiently.
Filter Sizes
The maximum dropdown height is 394 pixels
The filter badges will include a dynamic width with a Max limitation accordingly. If the selected filter is bigger than the max size > add a ... at the end.
Example for Evidence Filter flow
Example for Risk filter flow
Example for Risk filter flow
The Final Ddesign (UI)
In our latest project, we have adopted a new clean design language that emphasizes simplicity and usability. This design language is characterized by the following key elements:
-
Minimalistic Aesthetics
-
Consistent UI Components
-
Enhanced Navigation
-
Interactive Elements
-
User-Centric Approach
Before
After
Design Changes
Results
Our latest update introduced a newly-designed user interface (UI) and user experience (UX) that incorporates modern visual elements and simplified functionality. This redesign focuses on the following key aspects:
-
Modern Visual Elements: The new UI features contemporary design elements that provide a fresh and appealing look. This includes updated color schemes, typography, and iconography that align with current design trends.
-
Simplified Functionality: We have streamlined the available choices to ensure that they are clearly visible and easily accessible. This simplification helps users navigate the interface more efficiently, reducing the time and effort required to perform tasks.
-
Improved Accessibility: All options and features are now more intuitively placed, making it easier for users to find what they need. The design ensures that important functions are prominently displayed, while less frequently used features are still easily reachable.
-
Enhanced User Success and Satisfaction: These changes have led to a significant increase in user success and satisfaction. Users can now complete their tasks more quickly and with greater ease, resulting in a more positive overall experience.
-
Consistent User Experience: The redesign ensures a consistent experience across different devices and platforms. Whether users are accessing the application on a desktop, tablet, or mobile device, they will encounter the same intuitive and user-friendly interface.
By implementing these enhancements, we have created a more engaging and efficient user experience that meets the needs and expectations of our users.