.png)
BACKGROUND
The OpenLab was looking outdated and irrelevant — and students and faculty were feeling it.
CityTech wanted us to update the homepage and overall site design while ensuring accessibility and responsiveness.
New York City College of Technology (CityTech)
PROJECT OVERVIEW
The OpenLab at CityTech is an online hub for open educational resources, academic collaboration, and community for students, faculty, alumni and the public.
Our team identified and proposed impactful changes to refresh the visual interface with a responsive, mobile-first approach, while enhancing accessibility for a diverse range of users.
Role
Participant Recruitment, Moderated Testing, User Interviews, Ideation, Wireframing, Prototyping
Team
Bhavna P., Bryony H., Cassandra C., Medhaswi P.
Duration
10 Weeks
Tools
Figma, UserTesting.com, Zoom
BACKGROUND
CityTech wanted us to update the homepage and overall site design while ensuring accessibility and responsiveness.
In our initial client meeting, the CityTech team conveyed that their priority was to update the homepage and the overall visual design of the platform.
Uniquely, the OpenLab is made up of a combination of WordPress and BuddyPress, and is also available as free, open-source software for other universities to create their own online academic community. These were key constraints we kept in mind throughout the project.
After meeting with the CityTech team, we identified three overarching goals for our project.
01
Refresh the visual interface
02
Ensure accessibility for varying levels of digital literacy and English language fluency
03
Maintain continuity of functionality across desktop, tablet, and mobile
Our process started with exploratory research to get the lay of the land.
Exploratory Research
Technical Analysis
Competitive Audit
Ecosystem Map
User Interviews
Schematic Design
Sketching
Wireframing
Evaluative Research
User Interviews
Design & Iteration
Prototyping
User Testing
Final Prototype
BACKGROUND RESEARCH
A technical analysis of the current site and competitive audit of similar sites highlighted opportunities to streamline common user flows for a diverse range of stakeholders while standing out from the crowd of competitors.
Technical Analysis
The current information architecture is complex and repetitive, opening multiple pathways to the same destination.
The visual design also suffers from inconsistent margins across various pages, compounded by a formulaic grid system that enables content overload.
Multiple conflicting hamburger menus arise when navigating between the backend and frontend.
Competitive Audit
We evaluated seven competitors on their layout, navigation, and content, and found that most use a stale hierarchical structure displaying every level of navigation upfront, causing high cognitive load for the user.
The visual design of these platforms was also less than inspiring, with drab colors and the same layout across various types of pages.
Faculty
One of the two major user groups (with students), they use OpenLab to create course pages, post readings and assignments, and promote class discussion and collaboration.
Staff
Includes administrators, non-teaching staff members, and those who originally developed and currently maintain the platform.
Students
One of the two major user groups (with faculty), their primary focus on the OpenLab is accessing and completing coursework and making connections with other students.
Alumni
They retain lifetime access to the platform, but are largely an untapped user base.
USER RESEARCH
Interviews with faculty, staff, and students revealed common frustrations with the mobile version and desire paths that avoid the complicated navigational experience.
Our team relied on CityTech representatives to connect us with students due to their student information privacy policies, and they struggled to find interested students. CityTech also lacked the funding to provide reimbursement to student participants, which likely factored into the meager response from students.
It was easier to find faculty participants. Ultimately, we spoke with three faculty and staff members and one student in our first round of interviews.
Even though the interns have a bit more background knowledge about the OpenLab, they highlighted the same issues as participants who weren't affiliated with the OpenLab.
This brought our total number of students interviewed to four.
100%
students choose to access the OpenLab on desktop due to the shortcomings of the mobile version
50%
students mainly navigate to the OpenLab from other platforms like Blackboard as required for a class
75%
students report skipping over the Course Pages altogether and going straight to the Course Websites
Faculty and students alike reported difficulty getting started with and understanding the OpenLab, especially with varying levels of digital literacy and familiarity with existing web conventions.
Most participants reported that using the OpenLab on a mobile device was tedious. While faculty members primarily use the desktop version, some students reported that their mobile device was their only way to access the OpenLab.
DESIGN
Our design process towards a minimum viable product was guided by our design principles of openness, accessibility, and community — focusing on making the OpenLab more understandable, navigable, and inviting for students and faculty alike.
With mobile-first design in mind, we sketched mobile versions of our new screens to ensure that it was a starting point for the rest of the design, not an afterthought.
Our design concept was rooted in Bento-box inspired modular shapes.
EVALUATION
We wanted to get a sense for how the visual design was landing for the client and start testing the key user flows with students.
When we presented our low-fi wireframes midway through the project timeline, the clients were unconvinced about our more minimalist UI because they feared content would be hidden and overlooked. We planned to test this out in our usability testing.
The scope of the project also seemed to change, as the client asked us to resolve the issue of multiple navigation menus in the mobile version.
Since restructuring the backend of the mobile version was beyond our expertise, we aimed to incorporate the client's concerns about the UI while sticking with the initial project scope we were given, focusing on the homepage and overall design.
"It’s very clear in the content it’s trying to show you....It keeps your attention to one thing at a time."
—Student #2
The four students who completed usability testing with our mid-fidelity wireframes found our redesign to be cleaner and easier to navigate compared to Blackboard. We reduced the cognitive load by better organizing the content based on users' typical behavior.
"When I first downloaded OpenLab, it was complicated. Before working there, I don’t think I would have been able to use it. This design would be much more helpful, especially for freshman students.”
—Student #3
Our tabs layout helped minimize the amount of content shown to users at a time, as students expressed their preference to see only the content that is relevant to them.
We condensed the multiple hamburger menus into one, with more local navigation on each page, which students described as "well-defined and easier to use."
FINAL PROTOTYPE
From initial ideation to the final prototype, we fine-tuned the design to empower users to reach their most-visited pages quickly and easily and addressed the issue of multiple hamburger menus on mobile, all within a more contemporary design.
The tabs organize content into more digestible chunks for easier browsing while reducing visual clutter.
Students and faculty can reach their own courses in fewer clicks, especially through the use of the hyperlinked course website button.
Tailored to users browsing the OpenLab, the course pages highlight only essential information upfront, reducing information overload through the tabs structure.
When logged in, users can access their MyOpenLab page, a personalized hub of courses, projects, clubs, and friends.
REFLECTION
The OpenLab's specifications required us to always keep the practicalities of implementation front of mind.
With budgetary and technical limitations impacting our scope, we identified visual changes that offered a big bank for their buck.
In our final presentation to CityTech, their representatives were pleased with our final design and the solutions we were able to identify even while working within the constraints of the project.
"First of all, thank you!! We wanted to say how impressed we were with the excellent work you did for us. You grasped so much of what the OpenLab is about, came up with such creative ideas, and presented them so thoughtfully and professionally. As we mentioned, we plan to work on a site design refresh next academic year, so this will be extraordinarily helpful, and we will of course credit you for any ideas we use."
—Client Feedback