UX Design

Optimizing CMG's Client Portal for Enhanced User Experience

Client Portal is CMG's web-based app that gives customers a real time update of their online earnings and performance across all the music stores and video publishing royalties.
This is some text inside of a div block.

Context‍

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.

Problem

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.
Old Design
Heat Map


Process

The team embarked on a comprehensive redesign process, prioritizing user feedback and data analysis:

  1. User Data Analysis (UX Research): Conducted to understand users' specific pain points and behaviours when navigating the Client Portal.
  2. Sketching and Wireframes: Initial ideas were conceptualized through sketches and wireframes, focusing on improving navigation and information architecture.
  3. Developing a New Design System: A new, more intuitive design system was created, encompassing components, user and task flow, and high-fidelity mockups.
  4. 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.

Solution

New Design System
New Design




Redesigned Layout

  • 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.

Learning Outcomes

  • 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.