Revamping CUNY CityTech’s open education communities through modern & responsive design

The Open Lab at CUNY’s CityTech college is at the intersection of online communities and open learning resources that presents as a hub for all students, faculty, alumni and the public to find courses, clubs, projects and portfolios. As their product design team, we successfully modernized their website with a mobile first responsive approach based on data analyzed from our research process.

Team: Bhavna Paikattil, Bryony Hoare, Cassandra Cyphers, Medhaswi Paturu

  1. Refresh the visual design with a contemporary look and feel.

2. Ensure accessibility for users of all levels of digital literacy and English language fluency.

3. Maintain continuity and functionality across desktop, tablet, and mobile.

How do users interact with the OpenLab?

Based on our conversations with OpenLab’s team, we created an ecosystem map of the various stakeholders that use the platform within CUNY’s ecosystem

  1. Faculty
  2. Staff
  3. Students
  4. Alumni

During our user interviews with stakeholders, we learnt that students primarily use OpenLab when required for a specific course, or as dictated by a professor. However, Interns who are more aware and involved with the platform tend to use it independently and quite extensively.

Notes from experts and similar platforms

We included Academic papers in our research process to identify key themes to create a successful Open Education Community

  1. Promote interaction and community
  2. Create a personal history for each user
  3. Accessibility as an integral part of the process
  4. Supporting equitable education

We also evaluated 7 similar platforms according to the following categories:

  • Homepage
  • Navigation
  • People
  • Courses
  • Projects
  • Online Communities

Key Findings:

  1. Few platforms provide an introduction with instructions and guidelines for users to navigate with ease.
  2. Most platforms have hierarchical positioning of the navigation menus, all at one glance
  3. Many platforms follow the same template / format for course structure

Analyzing OpenLab’s current state

OpenLab has an extensive information architecture with multiple pages, profiles, external sites and blog posts. We chose to not focus on transforming the architecture due to the large scale and development limitations within their team.

OpenLab currently uses a 1-4 column layout with rectangular UI blocks. Margins tend to vary and pages lead to an extended scroll due to the large amount of information

There are 3 hamburger menus located at different points which complicates navigation using the main menus.

Our re-design is focused on improving navigation and modernizing the look and feel of the platform, within the limitations of WordPress and BuddyPress

Defining our Design Principles

Based on our interactions and research insights, we identified three key principles to guide our design process.

  • Easy access to educational materials for all learners
  • Indicating clearly which pages and features are open or closed
  • Reduce barriers and clicks
  • Simple language
  • Easy-to-understand icons and visuals
  • Guidance and onboarding for new users
  • Ensure that every user feels included
  • Promote interaction and engagement
  • Provide settings and features for personalization and identity
  • Showcase work and create opportunities for connection

Crafting our Product Architecture

Based on the key workflows and ecosystem map, we created a product architecture that maps out main users and their needs and interactivity with OpenLab. We categorized students to include current students, alumni, and the public. The product architecture also shows which aspects of the OpenLab support open educational resource or online community aspects.

A quick walkthrough of our Design Process

Keeping in mind the limitations of OpenLab’s WordPress site and our insights from research,

we created basic sketches that transformed into multiple iterations lo-fi designs.

We shared our mid fidelity designs with the OpenLab team, but we quickly realized that the lack of colors, content and images confused our client

So, we got to fleshing out our high fidelity designs, and tested them with current students at CityTech and…

we received an overwhelmingly positive response!

View our entire redesign process here

We created a modern + responsive layout

Bento-box inspired grid that stacks easily to provide a modern look to the website

Usage of tabs also reduces information overload on mobile by maintaining visual consistency

Courses promote both open education and online communities by highlighting user interactions on the platform

We solved the 3-hamburger menu problem

by decluttering the navigation menu, and providing in-page navigation such as tabs, lists and stackable blocks

Overall, our clients were impressed!

We successfully achieved all three project goals, and provided our clients with a new strategy. They were surprised by a lot of our findings, but they are going to consider our research + recommendations in their redesigns!

“Maybe the mobile first approach will push more students to use OpenLab”

Judy Rosen, Asst. Prof

This project made me understand the need to empathize with clients and speak their language if you want to communicate your vision and ideas.

Working within limitations is not a limitation at all! I liked having a fixed scope and it was a fun challenge to fit our ideas a box.