CMG's Client Portal is a web-based application that provides real-time online earnings and performance updates across various music stores and video publishing royalties. Despite its functional offerings, users needed help navigating the portal, particularly finding payment updates and understanding past payment statuses.
Users should have spent more time locating payment updates, leading to frequent complaints about the portal's navigability and clarity regarding past payment statuses. The challenges identified were:
- The outdated UI kit needs an update with a new Design System.
- It is necessary to migrate product pages from XD to Figma for better collaboration and efficiency.
The team embarked on a comprehensive redesign process, prioritizing user feedback and data analysis:
- User Data Analysis (UX Research): Conducted to understand users' specific pain points and behaviours when navigating the Client Portal.
- Sketching and Wireframes: Initial ideas were conceptualized through sketches and wireframes, focusing on improving navigation and information architecture.
- Developing a New Design System: A new, more intuitive design system was created, encompassing components, user and task flow, and high-fidelity mockups.
- Prototyping: Interactive prototypes were developed to test and refine the new designs.
During the User Data Analysis, the team identified that users needed to spend more time locating payment updates, which led to frequent complaints about the portal's navigability and clarity regarding past payment statuses. The team used tools like Smartlook to analyze user behaviour and identify where users were focusing and where they were getting lost. The insights from the research were validated through interviews and usability tests, which helped prioritize the features that needed immediate attention.
As part of the redesign process, the team developed a new, more intuitive design system, encompassing components, user and task flow, and high-fidelity mockups. The header size was reduced to provide more screen real estate for important content, and tabs and tables were redesigned for a more precise, more accessible information presentation. The team conducted exercises to generate user-centric design approaches and voted on the best iterations. The new layout underwent rigorous testing and was met with positive feedback from users.
Insights from Research
- Heat Map and User Behavior Analysis: Tools like Smartlook provided valuable insights into where users were focusing and where they were getting lost.
- Usability Testing: Interviews and usability tests confirmed the initial assumptions and helped prioritize which features needed immediate attention.
- Redesigned Layout: The header size was reduced to provide more screen real estate for important content. Tabs and tables were redesigned for more precise, more accessible information presentation.
- User-Centric Design Approaches: 'Crazy 8' exercises were conducted, and the team voted on the best iterations.
- Testing and Validation: The new layout underwent rigorous testing and was met with positive feedback from users.
- A new persona, "Music Label Accountant," was added to the design board, reflecting a deeper understanding of the user base.
- The team gained insights into the user journey and potential shortcuts by analyzing similar products.
- The project highlighted the importance of continuous user feedback and data-driven design in creating effective digital solutions.