Case Study: “Notes” Feature for Credit Repair Cloud
Sepehr Alimagham • Product Designer
Context 🗒️
I led the design of the "Notes" feature, transforming a simple, unstructured memo tool into a robust, intuitive interface for Credit Repair Operators (CROs). This feature was essential for CROs to document crucial information during client consultations and track client progress. The redesign aimed to enhance usability, integrate seamlessly with other CRC components, and improve the overall user experience.
CRC is a CRM-like product that allows Credit Repair Businesses to:
Help build and repair their clients' credits
Manage their clients and/or affiliates who referred them
Perform various other functions
It is a dense, multifaceted product with various interconnected components. Each surface serves a unique function and user type, creating an environment where designing any new feature requires a deep understanding of the entire ecosystem.
The original iteration of the “notes” aka “internal memos” that the users would use. No formatting, ability to have multiple notes, etc.Research and Discovery 🔬
I collaborated with our UX researcher and found that CROs extensively use notes during client interactions, often under high-pressure conditions such as consultation calls.
These notes are crucial for managing client relationships and tasks and typically include client goals, credit statuses, and internal updates. Additionally, notes serve as the foundation for creating tasks, which highlights the need for a clear visual hierarchy for quick retrieval and management of information.
Key Considerations 💡:
After finding out insights from our research team, I identified some key requirements with my product manager:
Distinction Between Messages and Notes: Understanding how CROs and affiliates use messaging versus note-taking to ensure clear differentiation.
Attachments: Identifying the types of attachments users commonly utilize, size limits, and their specific requirements.
Autosave Functionality: Determining the value of autosave, including its potential need for versioning history and visibility of system statuses (e.g., Saving, Saved, Disconnect, Re-connected).
Pinning: Determining how pinning would function, and the order of which pins would show up.
Titling and Formatting: Deciding between a dedicated title field versus automatically generating titles from the first line of notes.
Challenges 😤
Migration Complexity 🏎️:
Migrating notes from different parts of the product, such as the Messages section, posed a significant challenge. Ensuring these notes were clearly identified as migrated and distinct from new notes required a thoughtful approach. We implemented clear labeling and pre-pinned migrated notes for immediate visibility.
This was probably the biggest challenge of the project. I acted as a systems thinker designer, conducting a comprehensive audit of the entire product to identify all surfaces affected by this migration. I asked critical questions such as:
Were there any other places where users would take notes outside of the dashboard?
Do users take notes in the “messages” area of the app?
How would note taking work in other parts of the product like CHS/SCA?
Other Challenges 😤
High Usability in a Complex Dashboard 💭
Designing an interface that was highly usable within CRC's cluttered and complex client dashboard.
This involved creating a visually intuitive layout that would not overwhelm users while maintaining all necessary functionalities. Ensuring that the notes were easy to read and manage, especially as the volume of notes increased.
UI Consistency Across Products 💭
Ensuring a consistent user experience across CRC and SCA was another major challenge. The two products have different interfaces and user interaction patterns.
We resolved this by adhering to a unified design system while allowing for slight variations to fit the specific context of each product. This required extensive testing and iteration to balance consistency with usability.
Technical Constraints: 💭
I wanted to ensure that implementing new functionalities like autosave, attachments, and priority labels worked without compromising system performance.
CRC had long struggled with memory usage and slow loading times, so I needed to confirm with the developers that these features would load quickly. Additionally, I had to determine the limitations of using the formatting editor API.
Design Solutions ✏️
Dashboard Organization: 💭
Reorganizing the dashboard to place related sections together, like moving "Tasks" near the Notes section, required significant changes to the existing layout.
This was necessary to enhance logical flow and user efficiency but also risked disrupting user habits. We addressed this by conducting user testing to validate the new layout and gradually rolling out the changes with ample user support.
Migration of Existing Notes Seamless migration was critical to user adoption:
Clear Messaging and Pre-Pinning: Migrated notes were clearly marked, and previous notes (whether it was the unformatted memo from before, or notes from other surfaces) were pre-pinned to ensure users could easily find and manage their information.
User Guidance: Provided in-app banners to help users navigate the new features and understand the notes have been migrated to their dashboard.
I leveraged banner messaging as well as tooltips to communicate about the migration and new designs
Streamlined Interface with Natural Mapping
Inspired by applications like Apple Notes and Jira, I designed an interface that felt familiar and intuitive. Using the "natural mapping" approach, I ensured that the layout and functionality mirrored the physical act of note-taking. This included:
Consistent Visual Hierarchy: Implementing headers, bullet points, and other formatting options to make notes easy to read and organize.
Pinning and Priority Labels: Allowing users to pin important notes and assign priority levels to ensure critical information was always accessible.
Functionality: Ensured that features like autosave, attachments, and formatting worked reliably in both environments. For example, I implemented a status indicator for autosave, showing users when their notes were saving, saved, or if there was a connection issue.
Integration and Consistency Across Platforms
To address the challenge of integrating the Notes feature across CRC and SCA:
Unified Design System: I developed a design system of elements that maintained consistency in UI and interactions across both platforms. This involved close collaboration with engineers to ensure seamless functionality.
The new components I designed in order to improve usability of the notes and ensure consistency across product: the notes view as well as the zero state.The notes feature in action.
Results and Reflection 🌄
The redesigned Notes feature received overwhelmingly positive feedback from users and stakeholders. 9/10 users we tested said they were loving the new design 1 month into it being shipped.
Key improvements included:
Enhanced Usability: Users reported that the new interface was significantly easier to navigate and more efficient for note-taking during client consultations.
Improved Organization: The ability to format notes, add attachments, and assign priority labels helped users manage their information more effectively.
Seamless Integration: The unified design system ensured a consistent user experience across CRC and SCA, simplifying the transition for users.
Next Steps 👟
Moving forward with the Notes project, several key enhancements and features will be prioritized to further elevate the user experience and functionality:
Integrating Notes with Task Creation:
Develop a seamless feature allowing users to convert notes directly into tasks. This integration will enhance productivity by eliminating the need for duplicate entries and ensuring that action items from notes are easily tracked and managed.
AI-Powered Note Generation:
Implement AI-driven capabilities to assist users in note-taking. This feature will automatically generate summaries, highlight key points, and even suggest relevant tasks based on the content of the notes, providing users with intelligent and context-aware support.
Enhanced Search and Filtering Options:
Improve the search functionality to allow users to filter notes by tags, dates, or specific keywords. This will enable users to quickly locate specific notes, making the system more efficient and user-friendly.
Collaborative Note Sharing:
Introduce features for collaborative note sharing, allowing multiple users to edit and comment on notes in real-time. This will be particularly useful for teams and projects requiring collective input and collaboration.