CUNY Academic Commons

Hello! Here is the design that I showed y'all last week: https://www.figma.com/proto/cucm60QpDIv9DRIxra0UXW/CUNY-Homepage-design?page-id=350%3A322&node-id=350%3A729&viewport=241%2C48%2C0.1&scaling=min-zoom

Note: it is still a work in progress. I will post another update later this week with some progress. Thank You!

Thank you, Sara!!

Thanks, Sara.

Would be great if the team could review the designs and leave some feedback here before our next Tuesday call.
Thanks!

Sonja, can you please share in this ticket where the design stood before Sara started work? I'd like to get a better sense of what changed in this latest iteration. thank you!

Sonja, can you please share in this ticket where the design stood before Sara started work?

Sonja's previous designs can be found here: https://redmine.gc.cuny.edu/attachments/17709/CUNY%20Redesign%20Design%20Direction.pdf

See https://redmine.gc.cuny.edu/issues/14000#note-2.

Thank you, Ray!! This is helpful. Having had some time to live with the design a bit, and after talking things over with Luke, I wanted to leave a few comments:

-- Luke and I agree that the original white background at the top works better in Sonja's draft than in the most recent iteration by Sara. The color feels a bit institutional to Luke (perhaps because of a bit of institutional CUNY blue), but overall, we agree that the design overall is cleaner and works better with a simpler white background at the top

-- I wonder whether we could work through a few potential iterations/possibilities for the hero section ("We help CUNY learn, teach, connect"). In particular:

• I'd be interested in seeing some alternatives to the abstract shapes and colors. I like the idea of continuing to move in this abstract direction (rather than, say, photographs), but it would be cool to see some possibilities/alternatives

• I'm wondering whether that hero space should take up less vertical space. It takes up a lot of real estate right now, and I'd be interested in seeing if we could shrink it a bit

Others likely have additional thoughts. thanks for all of your work on this, Sara!

Thank you for this. It's looking great. I will get some comments in over the weekend. Before I do I wanted to check in on the scope. Apart from the visual design itself, do we want, or not want, comments on the content, suggestions for additions/changes/removal etc.?

Hi All,

Thanks Sara for sharing the latest designs!

A few thoughts below:

- I agree with Matt about maybe trying to think through ways to make the hero section take up less space

- Making the hero take up less space might also address this next comment - right now when you go to the commons home page, you can see a lot of content at once -slider, groups, people recent posts - without too much scrolling, I think mostly because of the more vertical layout of the areas. I think there might some benefit to being able to see more this content and activity at once when you arrive on the home page what do others think? I am not suggesting we try to recreate our current home page, but I wonder if there is a way to surface more content at first glance with the new design and layout.

Looking forward to talking more about this next week!

Chris Stein wrote:

Thank you for this. It's looking great. I will get some comments in over the weekend. Before I do I wanted to check in on the scope. Apart from the visual design itself, do we want, or not want, comments on the content, suggestions for additions/changes/removal etc.?

Hi Chris, thanks for taking a look and sharing more feedback over the weekend. We're currently looking for visual design feedback. We went through many rounds of feedback on the wireframes/content/structure last year. If there are any questions, a lot of the conversation happened in the UX ticket: https://redmine.gc.cuny.edu/issues/14000

Cheers!

Reading Sonja response to Chris, i think my comment about surfacing more content might be out of place so please disregard!

Thanks all.

Great, thanks Sonja!

Hello Everyone! Thank you all for your awesome feedback! I'm working on some more hero options with a shorter height, a lighter header, abstract shape exploration, and other tweaks. I will have some options for y'all to look at before our Tuesday meeting. Just to note: I am coming into the header design with the knowledge that we are not addressing the navigation structure at this time, so that will remain the same. Thanks everyone!

Thank you, Sara!

Hello Everyone! I have some updates and options for the homepage design.

4-page Prototype link: https://www.figma.com/proto/NswPJzWVEyx0e27wZzXsXi/CUNY-Homepage-design-workingFile?page-id=363%3A2875&node-id=363%3A5155&viewport=241%2C48%2C0.25&scaling=min-zoom

Homepage public (logged out) - v1¶

This takes the design that we were previously working with and lightens the header as well as re-structures the page a bit for hierarchy purposes.

Homepage public (logged out) - v1 (hierarchy annotated)¶

This is the same design as the one you just saw but shows the HTML structure and hierarchy

Homepage public (logged out) - v2¶

This comp explores another abstract art option. It combines overlapping organic shapes with geometric ones. This takes a similar structure to v1 but puts the "in numbers" above "getting started". In order to get to the meat of the page without too much scrolling, I have also eliminated the excerpt on the "latest news" section as something to consider as well as added some sample abstract featured images for that section. And if you look closely there are some tidbits of potential avatar design usage in there.

Homepage public (logged out) - (Previous)¶

This is just for reference, the previous homepage structure with the blue block on the featured sites and taller header.

I'm excited to hear everyone's thoughts in the meeting tomorrow!

I just wanted to note here that many of us are meeting (likely on Friday, see Matt's Doodle poll and updates in the team forum) to go over Sara's latest design work and make sure we have thorough, cohesive feedback to pass along before we go much farther.

Just recapping last week's dev call that prompted the additional meeting a bit, there are some smaller items I think we'll address for sure, like de-emphasizing the institutional or "CUNY blue" elements and finalizing default/placeholder images, both for avatars as well as the News section where we might want to be more consistent with the rest of the design as opposed to using stock photo images.

As for more detail on these and bigger issues, I'll have notes after the meeting!

I'm excited about the focused design meeting later this week. I have some new explorations around the "CUNY Blue" color that I'd like to share.

I took the colors in the Commons logo and tested them for accessibility standards of contrast. The current logo colors failed when it came to pairing them with white but not black. One positive is that even though the logotype has low contrast with the colors with white text, WCAG Guidelines exclude logos: "Text that is part of a logo or brand name has no minimum contrast requirement." Considering that the commons colors don't meet contrast with white, I then created some darkened coordinating samples that meet contrast guidelines when it comes to a white pairing.

In case you were wondering, we want the color to be paired with white so we aren't reliant on having a dark background for the color to meet the contrast requirement. (the Commons logo colors would work great in a dark mode scenario) Upon meeting the contrast requirement for white, we can have not only have white text on a colored block but colored headlines on a white background if we so choose. This creates a scenario where the primary color is versatile.

In the link below, you'll see the contrast test with new color samples - then multiple different homepage comps with different colorways applied that stray away from the CUNY academic blue.

https://www.figma.com/proto/NswPJzWVEyx0e27wZzXsXi/CUNY-Homepage-design-workingFile?page-id=408%3A5838&node-id=408%3A13540&viewport=241%2C48%2C0.03&scaling=min-zoom

I imagine that we will talk more extensively about color in our meeting later this week - but would love some initial thoughts if you got the time.

I plan to have some more options for images and avatars prior to our meeting later this week. Cheers!

Thank you, Sara. Do you need notes from our discussion or do you have them?

After the Friday meeting and Tuesday's dev call, we're working through this latest round of feedback but have a few big issues to still tackle. One of the biggest is settling on copy, revising what we had before and finalizing the additions we've been making.

I've taken a stab here at a Google doc that pulls out the structure and text of Sara's latest design so that we can collaboratively edit it. Please feel free to add comments, copy/paste a section and take your own stab (like I did, as you'll see), etc. Here's the doc and then the relevant design mockup:

https://docs.google.com/document/d/1RpvyndlQrHjWKNlZHEdzH2q1nTRV86gr0_D2eRhrUCo/edit?usp=sharing

https://www.figma.com/proto/NswPJzWVEyx0e27wZzXsXi/CUNY-Homepage-design-workingFile?page-id=408%3A5838&node-id=408%3A13540&viewport=241%2C48%2C0.03&scaling=min-zoom

These already address a lot of what came up on Friday, with a lot of quick work from Sara! Items like:
- Reducing colors, going with a more clean/minimal scheme
- Moving numbers section down to Building Blocks
- Moving the Members section to the bottom
- Deemphasizing the pronouns display a bit

We have some other things to still work through, like:
- Figuring out the right balance of content and space/graphics above the fold, in the Groups/Sites/Connect columns right now. We were leaning toward having those three in a horizontal blade like they are now, but we don't want to overwhelm with text there.
- What should be explicit on this page, and what can we link out to, for documentation or otherwise?
- Simplifying the Getting Started and top buttons in the hero image.
- Potentially directing people above the fold down to other parts of the page, with anchor links etc.
- Do we want Courses listed in the Numbers section, since they're more of a subset of Sites? It's always good to feature courses, but if we do this we may need a separate section or better copy to address how courses are their own unique type of "building block."

Thanks, Colin. I've taken a run through

Hello! Ahead of our meeting tomorrow, I've modified the homepage based upon text edits in the google document. I know these edits might not be final but I thought I'd show you what they would look like.

I've also taken the homepage logged-in wireframes and have applied the text and design styles to them straight out of the box. I would think that it might be good for discussion in our meeting to talk about how we might want to move some things around on those. Check them out & Thank You!

https://www.figma.com/proto/JKI5UjZiNDt8DzkLnHtc4J/CUNY-Homepage-design-workingFile-Copy?page-id=0%3A1&node-id=589%3A4405&viewport=241%2C48%2C0.5&scaling=min-zoom

Thanks Sara!

Apologies that I'm not able to make Tuesday dev calls, but just wanted to share that I really dig the latest iteration of the homepage. It feels much more balanced, both in terms of the flow of the design/use of color and also in terms of accommodating our goals to inform and invite while we are demonstrating activity.

I like also that "Members" is at the bottom, and wonder if we might make additional use the real estate that opens up. A limited Active Members section is most often going to be mostly populated with undergraduate students, who are more likely to display an avatar. In this layout, we're seeing fewer members than we do in the current layout. Perhaps we might display 5-10 recently-active members by campus, or by a selection of most active campuses (or perhaps that can rotate randomly?). Smaller avatars and names with plenty of white space to reduce the bottom-heaviness of the page? I realize it would increase the height, but think it would also do a better job than we currently are doing of displaying the breadth of activity across the system, and providing evidence right there on the homepage that the Commons is in fact being used everywhere.

I also like the direction of the logged in home page. Are we combining with and replacing "MyCommons"? Think it would be confusing if we keep them separate.

Sorry to have missed the dev call yesterday as well, but this is looking GREAT!

Luke, I'm not quite sure what you're suggesting for the members display. I can't remember where we stand on My Commons and Logged in Homepage -- can someone remind us?

Sara, you haven't done anything yet with those group/site/group+site icons yet, right?

Overall, I don't really have major feedback, as things are looking really great!!!

Luke, I'm not quite sure what you're suggesting for the members display.

Suggesting not just displaying most-recently active members, but most recently-active members sorted by campus... it may cause too much bloat on the page, I realize...

Active Members from GC:
1
2
3
4
5

Active Members from Brooklyn College:
1
2
3
4
5

Active Members from LaGuardia CC:
1...

so it would only display the last five members of the campuses with which one has been associated with? I like that it would showcase a connection to the local campus; I'm not sure how complicated the design and data calls would be; they'd be made more complicated by the fact that some people would be associated with one campus and others with three or four.

maybe one way around this would be to have two members sections: one with "recently active members from your campus(es)" and another just with recently active members of the Commons?

I'm not sure whether that is a good idea or not! Interesting to think it through, though.

Hello all, I'm not sure I follow the member area debate when looking at the related areas on the logged-in and logged-out homepage mockups.

When logged out, we show a 3x4 grid of 12 most recently active members across the Commons. I don't think we can focus this by campus here, because you're logged out so we have no information about your affiliation, if any. We can certainly reduce this grid's size, which we've discussed, though bumping it to the bottom as we've done means it isn't de-emphasizing anything beneath it so we can use some extra real estate if desired.

When logged in, we don't show a large member grid, but rather the "People you may know" box, which we agreed in the dev call on Tuesday should be a horizontal blade at the very bottom rather than alongside the Sites area as it is in the latest mockup (page 2). That will create more manageable and visually equal Groups, Sites, and People blades when logged in. I think we're only planning on showing a few "People you may know." We could perhaps indicate how this is being calculated, by campus etc, but that adds complexity as Matt has referenced so I wonder if we just display and keep the calculation hidden.

We could explore adding extra Members sections like Matt mentions. I personally lean toward simpler here. We also discussed on the dev call keeping My Commons active, but not as its own nav link when logged in. Instead, we would deeplink into My Commons from the logged-in homepage for the places where you can click to see more of your activity in your sites, groups and people. This will become more clear once we nail down the logged-in copy, which I'm going to get going in a Google doc next.

For now, I have the latest public or logged-out copy here, with the latest feedback incorporated. More feedback welcome:
https://docs.google.com/document/d/1RpvyndlQrHjWKNlZHEdzH2q1nTRV86gr0_D2eRhrUCo/edit?usp=sharing

We discussed on the dev call keeping Courses in the In Numbers section, and linking each item there to its respective directory, since members / sites / groups / courses all have one of those as a top-line nav item so there is consistency with that.

We're also going to use anchor links from the three-column explanatory area up top to the features/active Groups and Sites sections, if you want to see examples of either after reading the brief description there. We'll link to documentation for the connected group + site.

Thanks Colin and Matt!

My suggestion for displaying members by campus wasn't relevant to being logged in-- the intent here is to demonstrate to all visitors (users and not) that activity truly spans the university by showing it.

I'd like to hear more about the "People You May Know" feature, which is news to me (sorry if I missed earlier discussions of it). I'm not sure of the utility there-- is it to encourage friending on the system, as part of an effort to drive up those connections? Give folks more of a social sense? I confess to being resistant to algorithms that make broad assumptions about users unless they serve a clear and necessary purpose. They can provoke negative associations just as well as positive ones...

Hello all, talk to many of you on the dev call in about an hour. I've updated our working copy Google Doc with proposed links for everywhere a link is included, as well as copy for the logged in, non public homepage:

https://docs.google.com/document/d/1RpvyndlQrHjWKNlZHEdzH2q1nTRV86gr0_D2eRhrUCo/edit?usp=sharing

There are a few comments on that copy (scroll down) to resolve, and all feedback welcome on that. I can go over a few of the remaining questions on the call.

We spoke with Luke on Friday's community call about his points above. I've adjusted the copy on the logged in homepage to be more straightforward about the "you may know" heading Luke was resistant to before. All those sections are showing is groups/sites/members from your chosen campus affiliation(s) as per ticket #14181, so now it states that clearly and not as Facebooky or intrusive-sounding.

Sara, we also wanted to see if you had any suggestions on the design side for making the member section on the public homepage more clearly display that members span the entire CUNY community and many campuses. Could we show the campus affiliation of members, perhaps? Some other way to get at that goal? It may introduce too much tech complexity to make it possible on that blade to sort or filter by campus, but perhaps we can achieve something with a visual tweak.

Hi all,

Following up on the conversation on the dev call today.

When looking through the sections of the logged in home page, it reads as pretty campus-oriented, possibly at teh expense of facilitating cross-cuny connection and collaboration, as the commons aims to do.

Would we want to consider getting rid of the logged in sections for "groups from your campus" and "sites from your campus" and replacing these banner sections with featured sites, latest news, or other pertinent sections that are currently on the logged out home page?

A few thoughts on this:
- Commons users may arrive at the home page and immediately log in, missing the featured sites and groups and latest news sections if they never scroll down the page. However this info is still pertinent to users so we might not want them to miss it.
-- moreover- users may go to their site directly to log in and never visit the logged out home page at all, so moving this info to the logged in home page builds in more opportunities to see these sections.
- Adding featured sites/groups and news to logged in home page re-introduce possibilities for cross-cuny connections and surfaces various projects across the university for logged in users, and i would think we want as many people as possible on the commons getting updates we will put out through the news section.

Laurie Hurson wrote:

Hi all,

Following up on the conversation on the dev call today.

When looking through the sections of the logged in home page, it reads as pretty campus-oriented, possibly at the expense of facilitating cross-cuny connection and collaboration, as the Commons aims to do.

Would we want to consider getting rid of the logged in sections for "groups from your campus" and "sites from your campus" and replacing these banner sections with featured sites, latest news, or other pertinent sections that are currently on the logged out home page?

A few thoughts on this:
- Commons users may arrive at the home page and immediately log in, missing the featured sites and groups and latest news sections if they never scroll down the page. However this info is still pertinent to users so we might not want them to miss it.
-- moreover- users may go to their site directly to log in and never visit the logged out home page at all, so moving this info to the logged in home page builds in more opportunities to see these sections.
- Adding featured sites/groups and news to logged in home page re-introduce possibilities for cross-cuny connections and surfaces various projects across the university for logged in users, and i would think we want as many people as possible on the commons getting updates we will put out through the news section.

Thanks for these notes, Laurie. I had an idea I wanted to propose instead of the four campus-oriented items we're displaying right now (two columns of two items each). What if we had one column with two CUNY-wide items, which would be the same as the two featured items under Sites and Groups on the public homepage, and one column with two campus items?

I don't know if we needed four there anyway, and this attempts to strike a balance between personalization on the logged-in homepage (the campus connections) and retaining CUNY breadth and serendipity too. This might be easier to follow/visualize in my revised Google Doc showing all of the copy. The logged-in homepage is the second part:

https://docs.google.com/document/d/1RpvyndlQrHjWKNlZHEdzH2q1nTRV86gr0_D2eRhrUCo/edit?usp=sharing

We also discussed timelines yesterday. While we're not quite in a place to set a deadline for a final design to hand off to dev, we are very close. We are going to try to resolve the copy, the above issues, and some other items like the Member grid display on both pages (Sara is going to mock up some options shortly for review here). Then, we'll see if we can make a clearer plan on next Tuesday's call.

We do have the ability to revise the designs somewhat after handing off to dev, but we don't want anything major to come up. Once we have the next full design iteration with close-to-final copy I'll post it in the forum for team-wide feedback. I think we can do an initial handoff either just before or linked to our next full team meeting on Friday October 15th, but we'll see how this week goes.

Colin, I wasn't quite sure if I understood it so I made some comments on the Google doc and added a screenshot. One question is whether the logged-in active section would keep the Active Sites title and have your two proposed sections as sub titles or just use those as titles for the section.

I would like to make the dev call on Tuesday, but the BMCC P and B meetings have been going long and followed by chairs' meetings and so I haven't been able to make Tuesdays.

Here is the Figma document that we looked at in the call on Tuesday. Meant to post this earlier! https://www.figma.com/proto/JKI5UjZiNDt8DzkLnHtc4J/CUNY-Homepage-design-workingFile-Copy?page-id=0%3A1&node-id=620%3A1408&viewport=241%2C48%2C0.13&scaling=min-zoom

Thanks Chris, and Laurie too, for your comments in my copy doc. Others can see the latest here. I should be able to post a cleaner version after today's dev call but didn't want to lose the conversation for now:

https://docs.google.com/document/d/1RpvyndlQrHjWKNlZHEdzH2q1nTRV86gr0_D2eRhrUCo/edit?usp=sharing

Chris, the two-column areas for groups and sites that I proposed are less about activity (like the top section with campus and all site activity) than pulling out more tailored results not tied to activity primarily. The CUNY-wide column shows the same curated results we're using on the public page, and the Campus column is tied to your campus, what's public, and activity after that.

Just following up from the dev call earlier, Sara shared a new design version we agreed is very very close. She's going to do a few more tweaks then share that here.

We'd like to collect final feedback by the end of the week so we can spend next week handing off to dev and tying up any loose ends between the dev call and the team/monthly meeting on Friday the 15th.

I've also cleaned up the copy doc here:
https://docs.google.com/document/d/1RpvyndlQrHjWKNlZHEdzH2q1nTRV86gr0_D2eRhrUCo/edit?usp=sharing

Hello everyone! Here are the latest designs:

https://www.figma.com/proto/JKI5UjZiNDt8DzkLnHtc4J/CUNY-Homepage-design-workingFile-Copy?page-id=0%3A1&node-id=656%3A1618&viewport=241%2C48%2C0.13&scaling=min-zoom

Note:
- Site, Group, and Connected Site & Group Icons are updated
- Mobile has been cleaned up a bit and added more of a "card" feel for the scrolling sections - Let me know what you think!

Love the design!! My only comment - the icons do not work to me. They take up too much space and seem out of place with the rest of the design. Maybe if they were smaller and inside the text box, so that the description wraps around the icon?

Great work!!!

Thanks for these, Sara! They look great, we're so close. Just a couple quick things:

- I think we need a third row of groups on the logged-in page for From Your Campus and Across CUNY columns.
- On the public page, it can just say Members instead of Active Members in that blade title. The copy explains that they're most recently active, and this is more consistent with the other Building Block titles.
- For the all links under My Sites and My Groups, capitalize to Show All Sites and Show All Groups.
- For consistency let's also capitalize all headers, so all of the ...From Your Campus(es) and Across CUNY titles on the logged-in page, instead of ...from your campus(es) and across CUNY.
- Also let's make the line under Campus Activity say "View the latest activity from your campus(es)."

And for the public homepage, these are via Luke's helpful comments in the copy doc:
- Change top tagline to: "We help people at CUNY connect, learn, teach, and more. What will you create?"
- Remove the 12,000 and 1,650 numbers in the text line under Active Groups and Sites header. No need to repeat the specific number again from the Numbers blade.
- Change Members text line to "Our members include students, faculty and staff. Check out our most recently active below, and register here to join the Commons."

That all sounds good to me. Thank you all!!

Here are the latest designs that we will be showing in the meetings tomorrow. Let me know if there are any tweaks needed! https://www.figma.com/proto/JKI5UjZiNDt8DzkLnHtc4J/CUNY-Homepage-design-workingFile-Copy?page-id=794%3A1448&node-id=794%3A1449&viewport=241%2C48%2C0.16&scaling=min-zoom

Looks great, Sara!

This looks fantastic, Sara! I think we are just about ready to move forward. Two minor questions/clarifications:

-- for the group/site/group+site icons, I'm wondering whether the headlines of those sections should be center justified to match the center justification of the icon images. What do you think?
-- On the logged in page, at the top, where you see your own sites/groups, where does "Show All Sites"/"Show All Groups" go? If they go to a full listing of one's own sites/groups (as I would tend to think they should), maybe we should change that to "Show All of My Sites"/"Show All of My Groups." What do you/others think?

Hi Matt, that's right on your second point. The links will go to these links within the profile area respectively (sub in your own username for mine if you'd like) for My Sites and My Groups:

https://commons.gc.cuny.edu/members/colinmcd/blogs/
https://commons.gc.cuny.edu/members/colinmcd/groups/

I'm fine with making the copy more specific. We have the room there. It worked for me simpler because you're under the larger My Sites and My Groups section headings, but I don't see the harm of the detail.

Thank you so much, Sara -- this all looks great. The English prof in me can't help but request that we include "of" -- ie, "show all of my groups" / "show all of my sites"

Just updating with a couple of notes from Friday's meeting:
- Sara is going to share a final Figma master doc here, and I'll work with her to add copy and other notes for dev there
- Sara will also share what's ready for the style guide
- Sara is also going to do two mockups looking at how to begin transferring the design to internal pages, one showing white background everywhere on one showing just the white nav in current darker design
- There are a couple of functionality questions still on the mobile hamburger nav and the search magnifying glass

Just noting here that Sara invited me to edit the latest Figma file directly, and I've just gone through and added comments for copy/functionality not contained in the design draft there, as well as links on certain phrases where it might unclear where we chose to link out in the copy-creation process. Just let me know if I can clarify anything.

Latest Figma Designs: https://www.figma.com/proto/3DMoVZ5ZG79AcwZOmYH7nn/CUNY-Homepage-design-Development-Handoff?page-id=725%3A4467&node-id=725%3A4468&viewport=241%2C48%2C2&scaling=min-zoom
Figma File:https://www.figma.com/file/3DMoVZ5ZG79AcwZOmYH7nn/CUNY-Homepage-design-Development-Handoff?node-id=725%3A4467
Development Assets Google Drive Folder: https://drive.google.com/drive/folders/1fFIhPJSUCpCnVIH1-fpcyhOIlUjD3IT2?usp=sharing