Wp-calypso: Make Avatar/User link in top nav clearer

[jordesign]

Currently the small circular avatar shown in the top admin bar is the primary (and maybe only) way for users to access their account-level settings. For user's without a custom avatar this is even less clear as it simple shows an abstract icon in the circle. There is very little way to know that is how to access your profile.

Screenshot

It would be great if we could introduce some additional clarity here - to indicate that it is related to the user's profile.

[jordesign]

'Why' for this issue. Currently it is unclear how users can access their account settings to change things including (but not limited to):

• Billing details
• Security and password details
• Other profile information.

My bet is that by making the entry to user profile settings clearer we will have more users who find their own way to tasks in that area and will see less support enquiries for things related to account/profile settings.

[jordesign]

Obviously this would need some design exploration an idea of the best labels to use (My account seems generic, but clearer; username makes i personal - but for many users they don't actually know their username). Length of the string we show also needs to be a consideration.

But here's a couple of quick mocks:

---

There's also less room on mobile - so a different approach would be needed.

[davemart-in]

Once we align on a design for this, I'm happy to add it to our backlog.

[jordesign]

@davemart-in What would be next steps for trying to align on design for this?

[davemart-in]

I've added it to the Dotcom Manage Design board, so @lcollette and her team will just need to prioritize it at some point.

[eduardozulian]

+1 to this

In previous reports, I believe we suggested "My Profile" or even "My Account" as @jordesign suggested. See pKdGS-1Lj-p2

[JoshuaGoode]

Thanks for highlighting the internal notes on pKdGS-1Lj-p2 @eduardozulian

As mentioned in one of the comments there, the "My Profile" label is already in place but hidden and lacking some styling.

• Label: https://github.com/Automattic/wp-calypso/blob/ccaedaa00c6e3b25cde450ea1cd9baed4078dc77/client/layout/masterbar/logged-in.jsx#L170
• CSS hiding it: https://github.com/Automattic/wp-calypso/blob/ccaedaa00c6e3b25cde450ea1cd9baed4078dc77/client/layout/masterbar/style.scss#L289
• This would require reworking things a bit to use the same CSS being applied to regular item content: https://github.com/Automattic/wp-calypso/blob/ccaedaa00c6e3b25cde450ea1cd9baed4078dc77/client/layout/masterbar/style.scss#L96

I’d like to get it up and running — even if it’s just “My Profile” but preferably, once translations are ready, I’d personally like it to be “My Account”

Re: additional internal discussion: p7DVsv-6gf-p2