[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!

[shawnborton]

Updated.

Though @Expensify/design one thing I realized - if the default avatar is green, the green active ring is hard to see. Maybe we should create some separation like so?

[dannymcclain]

Yeah @shawnborton I'm into that. That will work well for any type of avatar.

[shawnborton]

Right on, I'll update the shots assuming Jon doesn't have any strong pushback either.

[shawnborton]

Okay, updated all the screens.

[JmillsExpensify]

Nice work! @mountiny This one is ready for SWM.

[mountiny]

Will coordinate with them on Monday, thanks!

[dubielzyk-expensify]

Looks great to me @shawnborton . Alternatively we can add a 5% scrim on top of their avatar that won't actually mess too much with their picture, but will allow us to always have the circle be different. Just an alternative, but still think what you have above looks awesome.

[kosmydel]

Hey, I'm from SWM and I will work on this.

FYI: I'm going OOO from Wednesday, then @WojtekBoman will take over this issue.

[trjExpensify]

Nice, I've assigned you @kosmydel. @WojtekBoman can comment when he's taking over and we can assign him as well. :)

[kosmydel]

Thanks! Do we have somewhere Figma designs for it? I couldn't find it.

[shawnborton]

Try this file here.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.52-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Ideal nav v2 workspaces #37421

If no regressions arise, payment will be issued on 2024-03-22. 🎊

For reference, here are some details about the assignees on this issue:

• @WojtekBoman does not require payment (Contractor)
• @kosmydel does not require payment (Contractor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@WojtekBoman / @kosmydel] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@JmillsExpensify / @trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[shawnborton]

Not overdue, onto payment soon.

[hayata-suenaga]

waiting for payment

[JmillsExpensify]

No payments are due here, so what else are we waiting on? Do we have a full set of regression tests added to TestRail? If so, I think we just lack a project wrap up and we're good.

[mkhutornyi]

@JmillsExpensify I am eligible for reviewing PR

[JmillsExpensify]

Ah thanks, that's not captured in the payment summary above. Is there an existing Upwork job for you?

[JmillsExpensify]

Looks like we have regressions to account for as well.

[mkhutornyi]

Ah thanks, that's not captured in the payment summary above. Is there an existing Upwork job for you?

No job created

[JmillsExpensify]

Payment summary: $500 to @mkhutornyi for PR review and testing.

[mkhutornyi]

There were regressions, but can we keep standard rate since this was big PR?

[hayata-suenaga]

I agree @mkhutornyi this PR was quite a huge. we should at least have the standard rate.

@JmillsExpensify I'm sorry I should have provided a note about it before 🙇

[mountiny]

Yep I agree with updated summary of $500 for @mkhutornyi for reviewing #37421 which was large PR and hard to catch all the regressions.

[JmillsExpensify]

Cool, updated!

[JmillsExpensify]

@mkhutornyi I just sent you an offer on Upwork.

[mountiny]

I believe @mkhutornyi is out for medical reasons. We can keep this monthly open unless you have confirmed its paid up @JmillsExpensify

[mkhutornyi]

I accepted offer

[mountiny]

@JmillsExpensify @mkhutornyi can this be closed?

[JmillsExpensify]

Yes!