Showcase

Re-Design and User Experience

CUNY Academic Commons

The CUNY Academic Commons is an open platform designed to foster connection, collaboration, and learning among CUNY faculty, staff, and students.

Since 2021, I’ve collaborated with the CUNY Academic Commons team to spearhead a comprehensive site redesign. My primary goal was to refresh the platform's visual identity and enhance usability for its vibrant community of over 50,000 users.

Key contributions included:

  • Brand Refinement: Modernizing the visual identity while staying true to the platform’s mission.

  • Wireframing: Developing user-centric layouts to guide the redesign process.

  • Web Re-design: Designing an intuitive and engaging interface for the platform based on BuddyPress.

  • User Experience Design: Improving navigation, accessibility, and overall usability to better serve the community's diverse needs.

This redesign aimed to empower the platform’s users with a seamless and inviting experience, reflecting the collaborative spirit of the CUNY community.

Brand Refinement

Collaborating closely with the CUNY team, I developed a range of brand refinement concepts that honored their original logo while modernizing the overall aesthetic. To ensure accessibility remained a priority, I conducted a comprehensive color contrast study using their existing brand palette. This analysis helped identify optimal colors for content, enhancing readability and inclusivity.

Following the study, I proposed several updated brand graphic options, each designed to align with the platform’s goals and user needs. The final concept, now in use, reflects a balance of functionality, accessibility, and visual appeal.

Side By Side Comparison of Old vs Redesigned
Side By Side Comparison of Old vs Redesigned
Color Accessibility Audit
Color Accessibility Audit

Site Redesign

The website redesign was a collaborative, phased effort with the CUNY team, ensuring a seamless transition for both users and the development team. We began with key foundational elements, including the homepage and upper navigation, before progressing to more complex areas like groups and user settings in a specialized BuddyPress environment.

This incremental approach allowed us to roll out updates gradually, minimizing disruptions and ensuring users could adapt comfortably to the new design. It also provided the development team with the flexibility to implement changes effectively while maintaining the platform’s functionality.

CUNY Academic Commons Homepage
CUNY Academic Commons Homepage
CUNY Academic Commons Homepage (logged in)
CUNY Academic Commons Homepage (logged in)
Group Page - Activity
Group Page - Activity

Groups & Forums Redesign

I led the comprehensive redesign of the Groups feature to enhance user engagement and streamline collaboration. The new design introduces a tabbed interface on the group landing page, replacing the previous sidebar layout. This interface includes tabs for Activity, Forum, Events, Library, Members, and Settings, providing users with organized and intuitive access to key group functionalities.

The Forum and Library sections have been redesigned to utilize the full-width layout, offering clear titles, member information, and enhanced search and filter tools. This improvement facilitates easier navigation and content discovery within groups.

For group administrators, the Manage tab has been introduced, offering a unified interface to customize group settings, manage members, and adjust privacy and invitation settings. This centralized management panel streamlines administrative tasks and enhances the overall group experience.

Groups - Home (Activity)
Groups - Home (Activity)
Groups - Events
Groups - Events
Groups - Members
Groups - Members
Groups - Forums
Groups - Forums
Groups - Forums - Single
Groups - Forums - Single
Groups - Forums - Compose
Groups - Forums - Compose
Groups - Settings
Groups - Settings
Groups - Library
Groups - Library

Group Admin Settings

Groups - Manage - Details
Groups - Manage - Details
Groups - Manage - Settings
Groups - Manage - Settings
Groups - Manage - Members
Groups - Manage - Members
Groups - Manage - Cover Image
Groups - Manage - Cover Image

Group Creation Flow

Redesign of the Group Creation flow

Create A Group_ Details
Create A Group_ Settings
Create A Group_ Cover Image
Create A Group_ Photo
Create A Group_ Cover Image-1
Create A Group_ Publish

Designing A New Feature: The Commons CV 

The CV feature on the CUNY Academic Commons is a cutting-edge tool that enables members to create and display professional, customizable public profiles. Designed to replace the outdated "Public Portfolio," the CV serves as a dynamic digital resume and homepage, allowing academics and professionals to showcase their achievements, publications, teaching experience, and more. The feature leverages the WordPress Block Editor to provide a seamless interface for users of all technical skill levels.

I led the design of the CV feature with a focus on user-centered design principles and technical collaboration. My approach involved iteratively prototyping designs while working closely with developers to leverage the modular capabilities of the WordPress Block Editor. I prioritized accessibility, ensuring ADA compliance with inclusive typography, contrast ratios, and screen-reader-friendly navigation. Additionally, I balanced clean, responsive design with robust functionality to deliver an intuitive, visually appealing, and scalable tool that enhances the professional presence of CUNY Academic Commons members.

This project highlights my ability to integrate design, technical innovation, and accessibility to create impactful, user-focused solutions. You can read more about the CV on the Commons News Blog.

Public CV - (Logged In - My Profile)
Public CV - (Logged In - My Profile)
Public CV - Select Cover Image
Public CV - Select Cover Image
CV Welcome Modal
CV Welcome Modal

Revamped Settings and Inbox

To modernize and enhance the user experience of the CUNY Academic Commons, I spearheaded a comprehensive redesign of the Account Settings, Inbox, and Notifications interfaces.

I began by auditing the existing Account Settings navigation, streamlining the user flow by consolidating and eliminating redundant tabs. This improved navigation clarity and reduced friction for users managing their profiles and preferences.

In the Inbox and Notifications tabs, I introduced a refreshed design that harmonizes with the updated visual language across the Commons platform. The redesigned interface not only ensures a cohesive aesthetic but also prioritizes functionality and accessibility.

These updates have greatly enhanced the usability of the platform, offering members an intuitive, visually modern, and efficient environment for managing their accounts and communications. You can read more about the Revamped Settings and Inbox on the Commons News Blog.

Account Settings - Change Profile Photo
Account Settings - Change Profile Photo
Account Settings - Notifications
Account Settings - Notifications
Account Settings - Profile Visibility
Account Settings - Profile Visibility
Account Settings - Security
Account Settings - Security
Inbox
Inbox
Inbox - Compose
Inbox - Compose
Notifications
Notifications
Action Center
Action Center

Invitation System Redesign

 

Invitations on the Commons are inherently complex, requiring users to invite others to groups, sites, or even onboard non-users to the platform. This functionality needed to be accessible from various areas of the site, making a modal overlay the ideal solution.

The redesigned invite modal provides a unified, seamless experience. Users can easily search for specific members, invite new ones, and select the desired part of the platform—whether a group, a site, or the entire Commons. This streamlined approach ensures that the invitation process is intuitive and efficient, no matter where users engage with it on the site.

Invite Modal - Step 1 - Select People
Invite Modal - Step 1 - Select People
Invite Modal - Step 1 - Select People (search drop down)
Invite Modal - Step 1 - Select People (search drop down)
Invite Modal - Step 1 - Error States
Invite Modal - Step 1 - Error States
Invite Modal - Step 2 - Select Groups & Sites
Invite Modal - Step 2 - Select Groups & Sites
Invite Modal - Step 3 - Review & Send Invites
Invite Modal - Step 3 - Review & Send Invites
Invite Modal - Success Screen
Invite Modal - Success Screen

Events and Activity Pages 

I led the redesign of the Events and Activity pages to enhance user engagement and streamline navigation. By eliminating sub-menus in the top navigation bar, I introduced seven primary sections—People, Groups, Sites, Courses, Events, Activity, and About—providing users with direct access to key areas of the platform.

For the Activity page, I implemented a personalized experience by introducing tabs and filters that allow users to view updates from their campuses, groups, sites, and friends, as well as a sitewide feed. This customization empowers users to focus on content relevant to their interests and connections.

Similarly, the Events page was redesigned to feature a series of tiles with images and key text for each upcoming event, replacing the traditional calendar grid. This visual approach enhances event discoverability and engagement. Additionally, I introduced a personalized tab to display events associated with a user's Commons connections, along with filters and the option to toggle back to the traditional grid view for those preferring a more structured layout. You can read more about the changes on the Commons News Blog.

Activity Page
Activity Page
Events - List view
Events - List view
Events - Calendar view
Events - Calendar view
Events - Single Event
Events - Single Event

Activity Page Filter Audit

Sitewide
My Commons
My Groups
My Campus
My Sites
My Friends

Site Style Guide

Style Guide

More of Sara Cannon's Work

BrodoAccessibility Color Audit

ConservSAAS Product Design

Rooted In RightsWeb Design

LifeTutors - Branding and Web DesignBranding and Web Design

BorteaWeb Design

Museum Audio GuideApp Design

Art ProcessorsWeb Design

Underdog RescueBranding

WeRateDogsECommerce

SmART GuideWeb Design

DhriftBranding & Web Design

Rick RiordanWeb Design

ChalkbeatWeb Design

InsideClimate NewsWeb Design

Flickr BlogWeb Design

Sara Cannon is a Design and Digital Strategy Consultant, UX/UI Designer, Creative Director, & Artist.
Have a project I could help you with? Contact me at sara@saracannon.com.

Skip to content