Design/UX #22941
open
Added by Sara Cannon 6 months ago.
Updated 2 days ago.
Description
In giving the admin bar a refresh, we will be changing the following:
- remove the CUNY Academic Commons Name and drop down from the top left (this to be confirmed after analytics check)
- Adding My Groups and My Sites to the top Admin Bar
- Add groups and sites into a drop down with a scroll bar
- Refresh the Help Icon
- Refresh the Down carrot by the avatar
- Segment and add new sections to the drop down
- Remove the "fly out" of the groups and sites
- Add: Invitations (with number count)
- Move "My Profile" to the top
- Add "Commons Home" above log out
- Make the notification numbers round with 1-2 numbers and expand like a pill
- make the font Poppins
- Mobile screens curated to designs that show sites, groups, help icon (no text), avatar & notification count
- Mobile screens when on a site simplified even further to leave room for site tools
I'm still thinking about mobile when there are too many icons. A ••• menu might work here
Files
|
Navigation Update.png (38.8 KB)
Navigation Update.png |
|
Sara Cannon, 2025-06-17 02:56 PM
|
|
|
More Horiz Icon.svg (427 Bytes)
More Horiz Icon.svg |
|
Sara Cannon, 2025-06-17 03:31 PM
|
|
|
Navigation Update2.png (50.2 KB)
Navigation Update2.png |
|
Sara Cannon, 2025-06-17 03:31 PM
|
|
|
Navigation - commons-mobile.png (6.66 KB)
Navigation - commons-mobile.png |
|
Sara Cannon, 2025-06-17 03:31 PM
|
|
|
Navigation - commons-mobilesites.png (19.6 KB)
Navigation - commons-mobilesites.png |
|
Sara Cannon, 2025-06-17 03:31 PM
|
|
|
Navigation - commons-mobile-more.png (7.81 KB)
Navigation - commons-mobile-more.png |
|
Sara Cannon, 2025-06-17 03:33 PM
|
|
|
Screen Recording 2025-12-11 at 10.00.04 PM.mov (2.03 MB)
Screen Recording 2025-12-11 at 10.00.04 PM.mov |
|
Sara Cannon, 2025-12-11 11:00 PM
|
|
|
Screenshot 2025-12-12 at 9.22.53 AM.png (64.7 KB)
Screenshot 2025-12-12 at 9.22.53 AM.png |
|
Sara Cannon, 2025-12-12 10:23 AM
|
|
|
Screenshot 2025-12-12 at 11.06.57 AM.png (143 KB)
Screenshot 2025-12-12 at 11.06.57 AM.png |
|
Sara Cannon, 2025-12-12 12:07 PM
|
|
|
cac-logo-top-left.gif (28.2 KB)
cac-logo-top-left.gif |
|
Raymond Hoh, 2025-12-16 02:41 AM
|
|
|
Screenshot 2025-12-18 at 3.27.54 PM.png (596 KB)
Screenshot 2025-12-18 at 3.27.54 PM.png |
|
Sara Cannon, 2025-12-18 04:28 PM
|
|
- Tracker changed from Bug to Design/UX
- Assignee set to Boone Gorges
- Target version set to 2.6.0
Sara, are you going to be building this as a Figma document for the dev team?
- Category name set to Toolbar
- Assignee changed from Boone Gorges to Raymond Hoh
- Target version changed from 2.6.0 to 2.7.0
Hi Sara,
Do you have an updated Figma link? Or if you do not have access to Figma, can you post screenshots of the "My Groups" and "My Sites" dropdown menus when expanded and other assets that haven't already been attached to this ticket such as the Help icon SVG?
Hi Sara, when I attempt to open the link, I get a message saying that there is an issue with the file sharing options:
Unable to open file
It looks like there’s an issue with this Design file’s sharing settings. We’ve emailed the owner to let them know.
Can you check the Figma permissions?
Thanks Sara! The new Figma link works.
I've committed a first pass of the new admin bar refresh design in https://github.com/cuny-academic-commons/cac/commit/0a46a9b216. This is available for testing on cdev. You might need to refresh your browser cache to see the new design.
There's still some work to do for the mobile view, specifically the More overflow menu and the various menu icons that get displayed when the screen width is < 400px, but I'll get to that in later revisions. In the meantime, let me know if you encounter any visual bugs.
This is looking so great! Can we have the hover states bold like you have it but not make the size of the box it's in expand? hovering moves the vertical lines a bit and it feels better when they stay still. Attaching screen recording that shows the slight movement when the text bolds on hover. All in all though I'm super excited about this change and improvement!!! great work here
I've added to the figma file a slightly refreshed login dropdown
From the team meeting on Friday, we talked a tiny bit about adding back a CUNY Academic Commons icon to the admin bar when you are on a sub-site and logged out.
I've mocked up something with the smaller CAC logo with a little hover popup explaining that the current sub-site is part of the CUNY Academic Commons network. The "Learn more about us" button in the GIF links to the main Commons About page. Let me know what you think.
I played around with different options, and I like the first one personally. I would love to hear the group's thoughts
Also available in: Atom
PDF
