.png)
The context: The internal app at Momnt is used by 200+ employees, and the Loan Information section is one of the most commonly used. As the Product Designer for the internal app, it was clear that an overhaul of this section would allow users to more quickly surface the information needed. Usually, users were on the phone with consumers when accessing this, so ease of use and simplification of information was crucial. FullStory user data and conversations with users indicated the current design of this section was a painpoint.
The problem: What information is most important to surface, and how do current users access it?
The solution: Using open card sorts and user interviews, I was able to reorganize and restructure the layout and functionality of the Loan Information section to ensure it was user-friendly. I was also able to bring in more color to help with readability.
The result: Reduced frustration signals by 25% (via FullStory user data), and improved efficiency (via stakeholder feedback). Added 2 new components to the design system.
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.
.png)
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)
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.
Users need a more efficient way to find loan information, so they can quickly help consumers.
Reorganize, recategorize, and redesign the section — with color, new titles, and a glossary — so navigation is streamlined.
.png)
.png)
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. As I designed, I explored the problem further:
How might we reorganize information so users find what they need more efficiently?
How might we add aesthetic changes to ease navigation?
How might we simplify the design to decrease clutter?
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)
It was important to balance design aesthetics and the current design system with tech scope. I synthesized user findings to discern how different fields should be categorized, but from here, I focused on how to incorporate these improvements within Momnt's design system and tech stack. Rather than adding lots of new functionality, I focused on how to use text hierarchy and page layout to increase scannability.
Accessibility was also a factor. I added in colors to aid in scannability, but it was important to ensure the colors themselves were not the only indicators of different sections, so that those with color blindness or low vision were not negatively affected. As such, minimizing the amount of colors used in the final design while ensuring each section used clear headings were critical for balancing scannability with accessibility.
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:
Loan Charges & Balances shown as a breakdown, so amounts relate clearly to each other
Information only displays when applicable, keeping the view clutter-free
A language preference and glossary toggle, designed as a follow-on to this project
.png)
Shipped a re-categorized Loan Information layout, using categories that came directly from 7 open card sorts, which reduced frustration signals by 25% (via FullStory data)
Redesigned the Loan Charges & Balances section as a clear breakdown and hid inapplicable fields: cut visual clutter for a section 200+ employees use daily while on live calls, which improved efficiency (via user feedback)
Shipped a language-preference/glossary toggle as a scoped follow-on: addressed a language-access gap surfaced during stakeholder interviews
Better ease of use for new employees (anticipated)
Handed off to developers, helping write ticket details and coordinating with the PM
Kept regular check-ins with users to confirm no pain points remained
Monitored user sessions in FullStory
Push to scope the language-preference/glossary toggle into the original project rather than treating it as a follow-on, since the language-access gap surfaced during the same round of stakeholder interviews
Run a lightweight follow-up validation to confirm the categories from the 7 card sorts held up at a larger scale