Manage Alerts Feature Redesign
This is a case study of a browser based application feature redesign. The goal was to make a customer-first experience, intuitive enough for the users to accomplish their tasks of managing alerts efficiently.
My Role
Research
UX design
Lo-fi & hi-fi prototyping
Type
Professional work
Year
2021-2022
Background
The product is a modular platform, banks and other vendors use to make a customizable digital experience for their cardholders.
Clients can choose experiences such as adding authorized users, E-statements, activating cards, changing the PIN, managing alerts, and more.
The product is flexible, and the experience can be standardized across multiple digital channels.
Using our in-house SaaS product, this platform can be customized according to various brands.
In the fall of 2021, my team was asked to redesign the Manage alerts feature of the product to reduce the friction our users were facing. A heuristics evaluation was already conducted on the feature, which helped us understand the situation very well.
Situation / What “they” said
-
The page was very long with inaccessible important information.
-
The user felt overwhelmed by the choices. Task felt complex.
-
Weak on aesthetic.
-
The page hierarchy was missing.
-
We confirmed (by running a short survey within the company) that 30% of users couldn’t find essential information on the page.
Manage Alert is a one-screen feature on which users can manage alerts for individual card holders.
Task/ What "we" needed to do
-
Ensure content is accessible
-
Minimise the scroll
-
Improve aesthetics
-
Simplify the task
-
Closely work with the API team to ensure the functionality
-
Create a meaningful grouping of the content that can help the user perform their task efficiently
Action / What “we” did
Feature goals
Ideation on Jam Boards through wireframing
Sketches made on Jam-boards in collaboration with the team
High fidelity wireframing
Different variations of the alerts page in desktop view
Different variations of the alerts page in mobile view
High fidelity Mockup
Desktop view
Mobile view (few of the key screens)
Click here for Figma prototype
Results/ What “we” achieved
-
Our clients found the revamped page more usable and aesthetic.
-
The key to success in this case for me was the continuous collaboration with Developers and the API team to gauge the complexity of my designs.
-
Established the practice of research and constant iteration throughout the design process that we’ve followed and improved upon for later projects.
-
The main goal of improving the overall experience of setting up alerts was achieved by seeing our client's feedback.
“This is a huge change from the current design. You guys have made it so much clear now. Clean page, tidy pattern and layout of content. I love it.”
– Client's feedback
“At first glance, this looks much better than the earlier design. This has a more professional feel to it.”
– Client's feedback
In retrospect...
New Skills
-
Coordination with developers.
-
Creating user stories with the Project Manager and brainstorming on different corner cases.
-
Conducting client presentations and feedback sessions.
New Concepts
-
Finding the middle ground between design and development.
-
Document, document, document. Every design review, discussion, feedback, and brainstorming session was recorded on google drive. Keeping a list of all the content made it much easier to prioritize issues and inform the subsequent design changes.
-
For the following steps, I would like to do usability and AB testing with users to see what failed and what can be improved in the next iteration.
