Redesigning the Customer Profile Page

Period

2023.04 - 2023.11

Company

ChartMogul

Tools

Figma, Notion, Slack

Project Overview

Improve the design after renewal of the profile page for B2B customers

After ChartMogul's CRM feature launch, we redesigned the customer profile page to serve both CRM and non-CRM users, ensuring all users could access key information without unnecessary friction.

My contribution

As a product designer, I led the design from initial wireframes through stakeholder reviews to final QA, ensuring the output aligned with both user needs and product goals.

Context

ChartMogul, subscription analytics platform, released CRM feature.

ChartMogul is a B2B SaaS subscription analytics platform. As CRM usage grew among users, we launched a CRM feature in 2023 that required a full redesign of the customer profile page — adding new components for customer management.

Problem statement

The CRM redesign left large empty spaces for non-CRM users, forcing them to scroll more to reach key information.

The restructured page worked well for CRM users, but left the right section empty for others. This imbalance meant users had to scroll significantly to access essential data.

Empty space

Feedback from the users who didn’t actively use CRM:

“I'm struggling with the new UX changes. Recently a giant empty "Activities" area exists under any customer I look up. It means I now need to scroll down to see the units chart and subscriptions information which is slowing me down. Is there a way I can go back to the old view and remove the giant activities area?”

“Is it possible to customize the customer profile design? The custom attributes are now on the left, and there is a large empty space on the right. The old one, with the custom attributes table divided on both sides, was easier to work with.”

“The UI real estate that has been allocated for activities on the contact records is a waste. My team will never be using your product as a CRM as we are a CRM vendor. If possible, I would like to have the UI switched to the previous view.”

How might we enable users, including non-CRM users, to efficiently access and view customer profile information?

Goals

Ensure the new customer page serves a wide range of users effectively

Consolidate a comprehensive array of information onto a single, compact page

Design Exploration

I explored multiple design directions through iteration, gradually narrowing down to a clear approach.

Solution 1. Chip UI for better accessibility to the each element on the page

Variation 1:
Filters for each activity, including Subscriptions section
Variation 2:
Separate Subscriptions section and the other activities with separate filters
Variation 3:
Only Subscriptions filter and the existing dropdown button for other activities

Variation 1:
Filters for each activity, including Subscriptions section
Variation 2:
Separate Subscriptions section and the other activities with separate filters
Variation 3:
Only Subscriptions filter and the existing dropdown button for other activities

Variation 1:
Filters for each activity, including Subscriptions section
Variation 2:
Separate Subscriptions section and the other activities with separate filters
Variation 3:
Only Subscriptions filter and the existing dropdown button for other activities

In these design approaches, Subscriptions section ended up limiting the access to the other activities, which is the key section for CRM.

Solution 2. Separate sections into 3 taps for easier navigation

“Movements” tab
“Profile” tab
“Activities” tab

“Movements” tab
“Profile” tab
“Activities” tab

“Movements” tab
“Profile” tab
“Activities” tab

The 3 split taps stopped viewing customer profile information and CRM related section at a glance.

Design principles

Simple user workflow

We emphasized a user-friendly and intuitive design, ensuring that users can access essential elements without unnecessary steps or complexity.

Feasibility

We placed a strong emphasis on evaluating the time & effort required for design implementation. This was a pivotal factor in our strategy to expedite the delivery of these enhancements.

User feedback

After finalizing the initial design, we gathered feedback from internal users to validate the direction and identify gaps.

Design Strategy

Create 2 Tabs: “Profile” and “Subscriptions”

To prevent users to be bothered to scroll to the bottom of the page to view some elements, we created a new tab bar to navigate between user’s profile and subscription information.

Transforming dropdown UI to chips

We introduced filter chips for quicker filtering of the feed as we added more elements in the right activity section.

Activity section

We integrated "MRR Movements" and "Transactions" that were located at the bottom of the page into the "Activity" section, placing them within the right-hand activity feed to allow users to view their important data without a long scroll.

Subscriptions tab

We divided the page into two tabs, and included the MRR chart, Subscriptions Table, MRR Movements, and Transactions tables in “Subscriptions” tab without other elements. Users can access this tab to easily review their subscription information without the need for extensive scrolling.

Header design

In addition to redesigning the main section of the customer profile, we recognized the potential for greater impact by reducing the vertical space occupied by the header. This change allows users to access the main section of the page more efficiently. After considering various design approaches, I have come up with the most suitable solution that aligns with the existing layout.

Design outcome

Implementation

Refining design details during development

Before

After

Handling the view of MRR Movements table

We reconsidered how to display icons within the MRR Movements table. Instead of showing an icon for each movement type, we decided to show the most representative icon for each group, making the table easier to scan.

Before CRM release
After CRM release (2023.04)
Updated design (2023.11)

Design iterations

Before CRM release

After CRM release (2023.04)

Updated design (2023.11)

Conclusion

The redesign was well-received, though feedback highlighted that non-CRM users still need further consideration.

Results

We provided early access to users who expressed dissatisfaction with the previous design to gather their feedback on the design changes.

I gathered the users’ info that sent us negative feedback on the previous customer profile page, and we sent emails to inform the design changes, giving early access to test it. After that, we received a couple of meaningful feedback that we should consider the further improvements based on their user role and their business model.

“I like it. I was unhappy that the CRM was forced onto my instance when I didn't ask for it and it created a lot of white space if you're not a user of it so the tabs system helps that. Still wish I could hide all the CRM related bits. I noticed the events section was slow to load on Clio which has lots of events. I would like it if I could swap the tabs around and have Subscriptions as the default one.”

- Customer A

“While I certainly understand that CRM is the new focus for ChartMogul, these changes are not a benefit to us. We are only using analytics, and honestly, I'd love to see an integration with Salesforce. We spend a lot of time and energy moving data from Salesforce into ChartMogul. There's nothing inherently bad about this update, but it does split up customer details and subscription details. If I'm working on sales opportunities, that makes sense. But when I'm trying to get a quick profile of the customer, I need to see our segmentation fields and subscription history at the same time. ...”

- Customer B

Takeaway

Experience designing a table

Designing the MRR Movement and transaction tables challenged me to think carefully about how complex numerical data should be presented — a skill directly applicable to B2B product design

Opportunity to extend design ideas

Working on this long-term project gave me space to explore multiple approaches, test ideas with stakeholders, and deepen my understanding of how user needs and product logic intersect.

Lack of user testing

User testing before implementation wasn't possible, but the early access feedback we collected post-launch gave us meaningful direction for future improvements.

Creative Analytics: Building a Validation Tool for Ad Campaigns (MVP)

Customizable MRR Movement Chart