Cornell CMS Website Redesign (Keep updating)

Design Brief

The Course Management System (CMS) was developed by the Department of Computer Science at Cornell University to simplify the management of large courses. CMS is in use by more than 2000 students in over 40 courses in Computer Science, Computing and Information Science, Engineering, and Economics.

Multiple content authors and illogical website structure resulted in websites with redundant content, poorly structured navigation, and a frustrating user experience for internal users. Rather than using site navigation to properly check grades, users automatically defaulted to writing emails to ask for their grades because they don’t know where the grade is on the course management system. Meanwhile, users tend to get lost and discouraged from exploring the features that are relevant to them.

This project aims to make it possible to design a more responsive, attractive, and functional user interface. Accordingly, students and staff alike would benefit form a user-centered CMS redesign to increase its usability and the overall satisfaction.

Current Interface

Team

I worked with Hao and Ming (both front-end developer) as a team. The duration of the design process is three weeks. To address a redesign of the CMS system, I completed a 3 week exploration of the problem space. During this time, I conducted pointed user research to identify user needs, brainstormed new designs, built prototypes, evaluated these prototypes and created high-fidelity mockups with UI style guide of my final solution.

Project Goals

Our client representative defined our project goals as:

  • Conduct and collate user research.
  • Concept enhanced user experience.
  • Develop User Interface Style Guide.
  • Create annotated wireframes for the full website, including additional page templates.
  • Collaborate with developers to ensure high quality of experience and user iteration.
  • Design Approach

  • Background research: Conducted background research on CMS and previous functionalities in order to better understand users
  • Survey: Posted a survey online and got more than 100 users’ feedback to have a basic understanding of users’ attitude
  • Contextual Interviews: Interviewed students, TAs and professors about their CMS usage, likes and dislikes
  • Low Fidelity Paper Prototypes: Summarized findings from interviews and survey into initial design ideas via Paper Prototypes


  • User Testing: Conducted user testing with students at school to gather feedback on initial designs
  • Medium Fidelity Mockups: Created medium fidelity mockups based on their feedback
  • Stakeholder Feedback: Presented our medium fidelity mockups to two stakeholders and got their feedback
  • Finalized high fidelity mockups: Updated mockups and created final version in Sketch and Justinmind
  • Survey & Interviews

    I interviewed ten current users to get more information about how and why they use CMS, their time management habits, and most importantly, current practices.

    Goals:

  • Understand the day to day use of CMS
  • Discover how CMS helps students and professors implement daily practices on CMS
  • Identify user needs that are and aren’t addressed by the current site
  • Have students do a couple tasks on the site to see their navigation patterns


  • Key Findings:

  • Unorganized Structure: Most users complained about that they always feel painful and frustrated when using current UX & UI design of CMS
  • Feature Confusion: Users had low perceived utility of forming groups and checking grades
  • Navigation Confusion: Submitting assignments is the feature that users most frequently used, however, most users mentioned they had difficulties finding where the assignment are
  • Reassurance: Few users noticed the submission notification after they submitted the assignment
  • Submit an Assignment User Flow

    According to the analysis from my interviews, I discovered submitting assignment to be the most used part of CMS experience. Also, according to our online survey, 100% of students submit assignments when using CMS. However, many interviewees mentioned that the current CMS system only allowed them to submit assignment on the assignment page and course page. While students also had difficulties when finding their upcoming assignments, there was unanimity regarding the low perceived utility of ‘Assignment’ functionalities. After analyzing the current submit assignment flow I know I wanted to keep mine as simple as possible, but with more access to the submission. My eventual design solution provide three ways to submit assignments and allow users to find them easily.

    Testing the Wireframes

    I conducted two short rounds of user feedback to see if there were features users were confusing about or missing. After testing my wireframes, I found that users were confused by the submission functionality. Accordingly, my final mockup simplified the submission process so that assignment could be submitted immediately after students uploaded them. Below are some highlights of the feedback I received during these two rounds.

    Second Round Testing

    Screenshots of Low-Fi

    Final Design - Homepage

    The homepage features a user centered design inlcuding several brand new functionalities:

  • Users could submit assignments easily on the dashboard.
  • Users could manage group invitation for each project assignment and check the group member list.
  • Users could check the grades of past assignments by clicking the Grades button.
  • The new CMS allows users to set a deadline reminder for the current assignment to avoid late submission.
  • Always present is the link to each course on the left of the dashboard.
  • The course link in the Assignment section is accented with the courses color.
  • Final Design - Assignment Page

    New Assignment page:In the finished version of this interaction, users would be able to check the grades, download submitted assignments, send regrade requests, download grading comments and grade charts.

    New Course page: Students are allowed to submit assignments on the course page and view details of the project assignments.

    New Project page: New group member could be quickly and easily added by typing the name and NetId. The new member will appear on the group member list once he/she accepts the request.

    Conclusion

    Reflection

    Setting the expectations with our clients from the beginning of the project and keeping them updated on our progress made this project move smoothly. We made project plans and set milestones to make sure we stayed on track.

    Working as the only UX person is challenging but possible. We all had to make sure we kept super open communication so that two software engineers and I are on the same page. This included weekly meetings where we critiqued each other’s work and constant messaging in the group chat. Keeping in mind that the development process usually takes longer than the design process, I tried to made a tight timeline for the design part in this project.

    UI Styleguide

    Mobile Version (Coming Up Soon)