.png)
Momnt's Consumer Support team uses the Loan Information section of the internal app frequently, but its previous design was overcrowded and difficult to navigate.
Much of this information has been added to this section in individual pieces as needed, so that some of the cards ended up holding quite a lot of information. And, the design made it so that scanning was difficult - there was not much text hierarchy nor varying colors.
12 stakeholders
Throughout this process, I met with various stakeholders (Consumer Support team members and leads, Product Managers, and Risk and Compliance team leads) to better understand how they currently used the Loan Information section and to collaborate on design iterations.
For example, the image below was from a brainstorming session with a Product Manager, in which we attempted to group together different pieces of information that are connected or linked. The purple highlights, for instance, are the details about the loan. This was our attempt to make sense of the current information and how it might be regrouped.
.png)
7 open card sorts
The card sorts listed all the possible categories that could be shown in the Loan Information section, and asked users to categorize as they saw fit (and naming those categories themselves). Below are the results. For example, all 7 people created a category called Loan Details/Information, and all people put Loan Product within that category.
.png)
.png)
.png)
7/7 users
created the Loan Details category.
5/7 users
created the Late/Delinquent category.
5/7 users
created the Statuses & Dates category.
5/7 users
Created the Payments & Spending category.
-How might we reorganize the information so that users can find what they need more efficiently?
-How might we add in aesthetic changes to ease navigation?
-How might we simplify the design to decrease clutter?
Users of Momnt's internal app need a more efficient way to find loan information, so that they can quickly help consumers.
To solve for this, the Loan Information section was reorganized, recategorized and redesigned so that navigation was streamlined. This allowed users to complete tasks more efficiently, and created a foundation for new subcategories to be easily added into updated categories.
After the results of the open card sorts and follow up conversations with users, I created various designs to incorporate the research and get feedback.
.png)
.png)
After receiving feedback on the initial designs and proposed re-categorization, I continued distilling the information into designs and added in some color. Many of these colors were taken from Momnt's color library to ensure consistency, and I also created new colors that fit within the same brightness to make the designs uniform.
.png)
.png)
.png)
The final design separates more information into cards, and each card has its own colored heading and new category titles based on the open card sort results and brainstorming sessions.
Some features to highlight:
-The Loan Charges & Balances section shows the information as a breakdown, so that users can better understand how the amounts relate to each other.
-Some information will only display if applicable, so that the information shown is as clutter-free as possible.
-This final design also shows a language preference and a glossary toggle, which are two additional features I designed after this project. I am happy to share details on these!
Following the completion of this project, I continued having regular check-ins with users to ensure the redesign was useful and there were no pain points.I also monitored user sessions on FullStory.
This project reaffirmed the importance of collaboration, because various pieces of the design came together only through multiple feedback and brainstorming sessions with a variety of users and colleagues. It also underscored how design is always iterative, and new functionality and tweaks can always be added as long as it centers the user.