[HOLD for payment 2024-03-22] [Wave Collect] [Ideal Nav] Ideal Nav v2 changes

[JmillsExpensify]

Background

Now that we've lived with Ideal Nav for a week, we've experienced the following issues with the core design:

• Accessing a workspace via the 🔧 resulted in a "lateral," global switch of someone's workspace. This was confusing because we created one known, obvious way to switch a worked – the workspace switcher – and then one secret, confusing way to "laterally" switch a workspace by choosing it in Settings.
• Account settings was accessed via an avatar in the top right, whereas workspace settings was accessed in the 🔧 bottom tab. Though now that we're deprecating "lateral" switching, separating these two types of settings pages is no longer necessary. Let's combine them in one central place.
• Finally, while we aspire to have feature-rich global search, today our "search" is merely a chat switcher. As a result, it doesn't deserve the prominence that we've given it.

Summary of changes

All in all these and other experiences have encouraged us to tweak the core Ideal Nav designs via the following v2 changes:

Header

• The workspace switcher, workspace name and page name all share the same line in the header.
• Additionally, the search input becomes a magnifying glass icon is only appears the header for the Chats tab (as again, the only "search" we have is a chat switcher).
  

Bottom Tab

• The 🔧 is replaced by a 28x28 user avatar, which reveals a new Settings page that combines account settings as well as workspace settings
  

Settings

• The new combined Settings page has three main sections: Account, Workspaces and General.
  

• A 100x100 user account avatar appear at the top of the Settings, with a "share code" icon in the top left and a "status" icon in the top right. The "share code" icon replaces the previous push row, while "status" displays a user's status, should one exist. Tapping the "status" icon takes the user to https://new.expensify.com/settings/profile/status.

  • 

• Account is the first section in Settings, and includes nav items for Profile, Wallet, Preferences and Security

  • 

• Workspaces is the second section in Settings, and includes nav items for Workspaces, Subscription, and Cards & Domains.

  • 

• General is the last section in Settings, and includes nav items for Switch to Expensify Classic, Help, About and `Sign out.

  • 

Workspaces

• The Workspaces page has two states, depending on whether a user is a member of a workspace or not.
  
• When viewing a specific workspace's settings, we launch a full screen experience, which pushes the workspace setup pages in the the LHN. No bottom tabs appear in this view.
  
• To exit out of the full screen workspace editor, a user would click the back caret in the LHN header, which takes them to https://new.expensify.com/settings/workspaces.
• Mobile views shown below for extra clarity.
  

Individual Issues

[This space can be used if we opt to break up this initiative into individual issues and corresponding PRs]

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

Current assignees @JmillsExpensify and @trjExpensify are eligible for the NewFeature assigner, not assigning anyone new.

[JmillsExpensify]

Note: This issue is for internal use and the corresponding implementation to be handled by SWM.

[trjExpensify]

Nice!!

Bottom Tab

• The 🔧 is replaced by a 28x28 user avatar, which reveals a new Settings page that combines account settings as well as workspace settings
  

What about the active state of the settings bottom tab. We're giving the avatar a green ring, right @shawnborton?

[shawnborton]

That's right, I can update the images above.

[trjExpensify]

Perf, thanks!