[UX] Navigation for CDot to represent new User/BillingAccount data structure
Problem
Right now a Customer record in CustomersDot represents a mixture of a physical user (Zuora Contact) and an Account (Zuora Customer Account). As discussed in Introduce CustomersDot BillingAccount (&8331), this is a problem for a few reasons, leading to a variety of bugs. The groupfulfillment platform team is working to correct this by introducing new data models to allow for Accounts and Account Memberships (and renaming Customers to Users to reduce confusion). Multiple Users in CDot should be able to be associated with a BillingAccount. On the flip side, one User record should be able to be associated with multiple BillingAccount (through BillingAccountMemberships).
The UI for CustomersDot currently only supports one User per BillingAccount and one BillingAccount per User. As we work on updating the data structure, we need to think about IA and navigational changes to allow an Account to have multiple billing managers and a User to have multiple BillingAccountMemberships.
Proposal
Explore how the new data structure will impact the IA and navigation of CDot.
- How/where do Users manage their personal user data vs data associated with an BillingAccount(s)?
- How/where do Users associate additional Customers with an BillingAccount?
- If a User has multiple BillingAccount memberships, how does the choose which BillingAccount they are managing before the normal operations and features are shown, like Managing Purchases or Editing Account information?
While the output of this issue will be the final design/specs of the navigation for a customer with a single BillingAccount only, this issue will also explore, design, and validate navigation for customers with multiple BillingAccounts (because we want to make sure that the navigation will scale to that use case).
Information architecture
Click to expand
I wanted to understand how the new User/BillingAccount data architecture and IA will impact CDot navigation.
Process
To start, I did a site map of the current state of CDot. I wanted to understand which information that currently lives under the User model will be moving to the BillingAccount model. Based on information in this thread and #4799 and #4793 (closed), I highlighted all affected information/pages in blue.
From there, I started reorganizing and grouping the information, making a clearer distinction between what information lives on the User model and what information lives on the BillingAccount model. The team has already ironed out these details as part of spike/exploration work in &8331, so this is really just a visualization of that work and thinking through how a user might access it and interact with it.
Because it's important to think about the navigation and IA holistically, the site map is based on the end state of Introduce CustomersDot BillingAccount (&8331). However, I also wanted to think about how this work breaks down and how it fits into the iterations that we've outlined in that Epic.
I mapped out which parts of the experience would be tackled as part of each iteration (and other key Fulfillment projects like https://gitlab.com/groups/gitlab-org/-/epics/8905+).
Wireframes
Topics addressed in the video:
- How does the introduction of the BillingAccount impact the current information architecture of CDot?
- How will the information architecture change to support the BillingAccount structure?
- What navigation options have been explored to represent that BillingAccount relationship to the user?
- What are the next steps and how can I give feedback?
See this comment for more details about the wireframes and how to give feedback.
Visual designs
Based on the feedback on the wireframes, I explored a variety of different visual designs for the navigation. There were two different designs that moved forward into solution validation.
Option 1: Dropdown switcher in the left sidebar | Option 2: Account info page header with button to switch Accounts |
---|---|
![]() |
![]() |
Prototypes
Each of the two visual design options were built out into full prototypes for user testing.
Important note: The content and design of many of the pages (such as the My accounts page, the Account details page, and the Billing managers page) is not final or finished. There are separate UX issues open to fully design and test these pages. But in order to test the navigation, there needed to be something on those pages, so I threw together quick mockups for the purposes of the user test.
Prototype links
Solution validation
Final design and specs
➡ 🎨 Figma link for final designs and specs
Important note: The output of this issue is the final designs/specs for navigation for users with only a single BillingAccount (because in Iteration 1B: A single CustomersDot BillingAcco... (&8951), a user will only be able to have a single BillingAccount association).
Follow-ups and next steps
- The design for the navigation for mobile/small screens will be handled in [UX] Mobile / small screen navigation for CDot ... (#6051 - closed)
- While the navigation for users with multiple BillingAccounts has already been largely designed and validated in this issue, the final designs and specs will be handled in [UX] Designs for Customer with multiple Account... (#4791)