Design/UX #17385: Profile CV & Account Settings
Account Settings Tab
The profile/account redesign will have several components, including those like Inbox/Notifications that aren't fully fleshed out yet.
We've agreed that the Settings tab is in a good place for Sara to submit assets for development though, so we can have this as a starting point for building out the wider redesign while she is away through April.
I'm breaking the workflow for the tab off into this ticket, a subtask of the main ticket at #17385.
Updated by Sara Cannon 3 months ago
Here is the Figma Preview with notes: https://www.figma.com/proto/0Ke5bCwheE5SXXkT6wDd2l/CUNY-Design---Spring-2023?page-id=2900%3A68936&node-id=2900%3A83092&viewport=3909%2C5816%2C0.13&scaling=min-zoom
Note: this also includes the "My commons profile" tab
Updated by Colin McDonald 2 months ago
Just noting here, even though we've cordoned off the tabs and are focused on the Settings tab for development right now, that in the monthly meeting last week we agreed that "Unfriend" made more sense for that button when it appears, and also that Activity might be better as the default/first tab than Sites when looking at a member's profile.
We also agreed that the forum tab under Settings is kind of a misfit where it sits currently. Could these options for thread display mode and posts per page be set by the user within each group, on the forum page perhaps, kind of like your email status? Something we'll have to discuss more as we get into the Group Page redesigns, but wanted to mention it here too.
Updated by Raymond Hoh 2 months ago
I've started going through some of the Commons Profile / Account Settings pages.
Not everything is 1:1 to Sara's mockups, but most of these pages should be styled with exception to the "Commons Profile > Docs" and "Commons Profile > Digital Research Tools". I believe we are not going to feature the latter anymore, so we can simply ignore DiRT, but did we want to show "Docs" under "Commons Profile"?
I've done a number of things in a new Git branch: https://github.com/cuny-academic-commons/cac/commits/feature/17769-commons-profile. (This is also available for testing on cdev.)
- Remove bp-default as the parent theme for our bp-nelo theme: https://github.com/cuny-academic-commons/cac/commit/dc2fdd0b241845a0d0426db15e7d9198062f2ac3. In the commit message, I noted why I did this, but to summarize, moving away from bp-default gives us greater flexibility when overriding BuddyPress templates.
- Add new template conditional tags to determine if we're on a "Commons Profile", "Account Settings" or "Inbox" page: https://github.com/cuny-academic-commons/cac/commit/7fde1a58f765f5568da0214409e5c13554a5e59f
- Set up an alternate, main navigation tab routine. Since our "Commons Profile", "Account Settings" and "Inbox" tabs are the new, primary tabs and some of the secondary tabs now reside in diferrent places ("Profile > Change Profile Photo" is now located under "Account Settings > Profile Photo"), I didn't want to drastically reinvent how BuddyPress registers subnav items and screen loader functionality. In the case of moving the "Profile > Change Profile Photo" subnav item under "Account Settings > Profile Photo", I'm actually leaving the "Profile > Change Profile Photo" subnav item as-is, but what I'm doing is highlighting the new alternate 'Account Settings' nav and rendering the 'Settings' option nav when on the 'Profile > Change Profile Photo' page. I also had to add a new "Settings > Profile Photo" subnav item, which is basically a shortcut link to the 'Profile > Change Profile Photo' page. I'm also using this approach for "Inbox" pages. This is more of a masquerade approach, but I think this works rather well. Would welcome your thoughts here, Boone.
- Ensure "Commons Profile > Events" page defaults to the "Upcoming" page and format from the Events Directory page instead of the "Calendar": https://github.com/cuny-academic-commons/cac/commit/267bbfcf35db5617d2efd299163f19efc00f3b9f#diff-1dfbefc79e2aec9ba9f6839552b623339738cfb8a363fa2da2aff9703244b11dR2475-R2481
- Add redesign styling to the Activation page. I noticed that this page was still using a mixture of the older bp-nelo style, so just made an update to this page.
- Add redesign styling for the Social Papers Directory page. Since my testing profile had a "Commons Profile > Papers" tab, I decided to style this page and the corresponding Papers Directory page. I kind of did a riff on the wide card format from the Activity page and used it for the Papers Directory.
Questions / Notes:
- The "Inbox" pages are currently unstyled and have a mismash of bp-nelo styles and cac-shared styles. I will fix these up in the coming weeks so it will maintain the same functionality before the Commons Profile redesign.
- The new Commons Profile has a breadcrumb at the top. I'm wondering what the first "Account" item links to. Is it the Public CV page?
- I remember Sara showing a mockup of a Commons Profile with three navigation rows. Right now, some of the Commons Profile and Inbox pages would benefit from having three rows such as "Commons Profile > Events" and "Commons Profile > Friends" and all the "Inbox" pages. I guess the subnav items for Events such as "Events > Manage" and "Events > Create" can be moved up to the Events Directory level, although "Events > Manage" has some items that are more specific to the current user such as the private iCalendar URL. The "Commons Profile > Friends > Requests" will probably be replaced with the new "Inbox" page, however we could probably move "Commons Profile > Friends > Requests" to "Inbox > Friend Requests" for now?
- The "View Public CV" button in the member header currently points to the main user URL, but when Jeremy is closer to implementing the Public CV we can implement all the proper CV button states such as "Create Public CV" and "Edit CV Draft"
- I also came across what Jeremy mentioned about having the CAC Advanced Profiles plugin active or not: https://redmine.gc.cuny.edu/issues/17768#note-2. I had to make one modification so CACAP is not rendering its top-level template: https://github.com/cuny-academic-commons/cac/commit/9b850f33c479ac717b23f639e2b0e960d7b024f2 and also so CACAP assets are not loaded on our redesign pages. But would agree that we should deactivate CACAP and have a migration routine in place for the new Public CV data schema.
So that is what I have for a first pass. I'll work on a second set of revisions and will post an update when I'm ready.
Updated by Boone Gorges about 2 months ago
Ray, this is all amazing. Thanks for starting this very difficult project.
The general approach looks sound to me. I like that we're ditching bp-default. Your "masquerade" approach for the navigation seems fine to me. It means that URLs don't necessarily match the nav structure, though IMO this is not a big deal at all. It also means that we have to be careful moving forward when detecting the "current page" both in PHP and in CSS selectors, since items like "Profile Photo" don't technically live where it looks like they do. Your new template tags should do much of this work for us, but it's something to keep in mind in the future.
I think we need to talk through the relationship between CVs and member URLs. Currently, member URLs like members/boonebgorges point to the Public Portfolio. In the new system, the Public Portfolio corresponds to the CV. But CVs will be optional, which means that member URLs can't point to the CV (at least not always). I see some suggestion in Ray's code that members/boonebgorges/public is intended to be the URL of the CV https://github.com/cuny-academic-commons/cac/commit/7fde1a58f765f5568da0214409e5c13554a5e59f#diff-1dfbefc79e2aec9ba9f6839552b623339738cfb8a363fa2da2aff9703244b11dR247. Something like this seems OK to me, but it means that existing users will experience a change whereby their Commons URL (members/boonebgorges), which used to point to the Public Portfolio, will instead point to the Commons Profile. Another option is to leave the CV at members/boonebgorges; users who don't have CVs would have this URL redirected to members/boonebgorges/activity (Commons Profile); and we'd filter most instances of
bp_core_get_user_domain() so that it points to
/members/boonebgorges/activity, so that links from directories, member cards, etc go to the Commons Profile. Anyway, we should talk through this flow, as it has some effect on the navigation structures that Ray has put together here.
Updated by Raymond Hoh about 2 months ago
I see some suggestion in Ray's code that members/boonebgorges/public is intended to be the URL of the CV https://github.com/cuny-academic-commons/cac/commit/7fde1a58f765f5568da0214409e5c13554a5e59f#diff-1dfbefc79e2aec9ba9f6839552b623339738cfb8a363fa2da2aff9703244b11dR247
The public CV code check is basically the same as for the Public Portfolio in CAC Advanced Profiles. In other words, the landing page URL for
/members/boonebgorges/ remains unchanged from CACAP. This is because I'm waiting to see how the Public CV will work before we proceed further with this. My assumption is the Public CV will use a new top-level template, but this can be adjusted once Jeremy pushes the Public CV prototype for us to play with.
Another option is to leave the CV at members/boonebgorges
Leaving the CV at
/members/boonebgorges/ was my original intention since it would use a similar setup to CAC Advanced Profiles and wouldn't change too much from a current Commons user's perspective, but we can do whatever makes the most sense usability-wise.
users who don't have CVs would have this URL redirected to members/boonebgorges/activity (Commons Profile); and we'd filter most instances of bp_core_get_user_domain() so that it points to /members/boonebgorges/activity, so that links from directories, member cards, etc go to the Commons Profile.
Redirecting could work. Or we can try setting the default subnav slug to
activity if the user has no Public CV. This would need some testing, but this should work in theory.
Updated by Colin McDonald about 1 month ago
Hi Ray, thanks again for all your work here. Circling back on a few things:
- No need to show Docs on the profile, and that's right about hiding Digital Research Tools too.
- At the top, I'm wondering if the Account / part of the breadcrumb is even necessary, and if it can just start with Commons Profile / -- but we should ask Sara when we can. It's not obvious in her mockups.
- I think it would be good to find ways to avoid the third tier of tabs if we can, and I think your ideas make sense especially on moving items to the Inbox when we tackle that. Let's circle back on this with Sara.
- Order of Commons Profile sub-tabs should be Activity, Sites, Groups, Friends, Events. Sara has Activity last in her mockups but I like making it first/default, as it's the most likely to be fresh.
- We agreed in the last meeting that the "Forums" settings tab seems out of place compared to the other. I'm going to ask Sara if she thinks we might move that elsewhere, maybe when we redesign Groups pages.
- On the default URLS, I also like what redirecting would allow us to do -- keep the CV at the /membername/ URL, corresponding to the current Public Portfolio URL, and redirect /membername/ to /membername/activity if there is no CV yet. Or if there is a more technically sound approach with a similar result, I'm all for it.
- I didn't quite follow your point here Ray. Where is the Social Papers Directory page? Sorry I'm drawing a blank here "Add redesign styling for the Social Papers Directory page. Since my testing profile had a "Commons Profile > Papers" tab, I decided to style this page and the corresponding Papers Directory page. I kind of did a riff on the wide card format from the Activity page and used it for the Papers Directory."
Updated by Raymond Hoh about 1 month ago
Thanks for the feedback, Colin.
Some follow-up notes:
No need to show Docs on the profile, and that's right about hiding Digital Research Tools too.
Done in https://github.com/cuny-academic-commons/cac/commit/2334a07e0b639285fcf229a5bce7d67adba60219.
Order of Commons Profile sub-tabs should be Activity, Sites, Groups, Friends, Events.
Done in https://github.com/cuny-academic-commons/cac/commit/6400751f5b61ff884900d0c8c8c56be68dbb01e8. I've moved the Groups tab so it matches this order. New users will not see the Papers tab, but if a user has Papers, I've moved the tab to the very end.
Where is the Social Papers Directory page?
It can be found at
We can work through some of the other points with the team and when Sara is available.
Updated by Boone Gorges about 1 month ago
- Related to Feature #17977: Add member search features to Group Manage section added