×
Jemma Kwak
bCourses Redesign
A redesign of Berkeley's course management system.
2018 - Product Design - Design Thinking - UI/UX
Process Deck
Background
bCourses is a Canvas web and mobile application used as a platform to connect students and instructors. Students use bCourses to view and submit homework assignments, connect with peers and faculty, and see their personalized grades. I decided to complete this redesign in a 2-week design sprint.
The Problem
Despite most courses at UC Berkeley being hosted on bCourses, the current interface is painful to use. The app leaves users feeling confused and frustrated, namely in its most crucial interactions.
Current home view. Action items are pushed to the right and there is lack of course distinction.
Lack of pertinent information regarding assignment submission.
Unintuitive file search.
User Research
Survey results of student use cases.
A survey of 20 students currently attending UC Berkeley showed that students weren't using bcourses beyond the functionalities that enabled students to succeed in their classes(submitting assignments, viewing readings), When diving into the pain points of the students, we discovered some key insights:
Idle Features
Users noted they tended to not use features such as calendar and inbox, stating they already had established methods and mediums for carrying out this functionality.
Lack of Clarity
Students noted the lack of clarity across the main features of bCourses— this included file search, course distinction, and assignment submissions.
Building Community
Lots of students noted that they did not use the Groups feature, but wanted a better way to use the platform to connect with students and faculty in the class.
Aesthetics and Feel
Many students noted that bCourses’ UI felt clunky and out-of-date. A major part of the redesign was to align the user interface up to speed with more modern design trends.
How might we streamline crucial interactions that aid student success?
Redesign Goals
  1. Streamline - Increase ease of access and flow of files, assignments, grades, and submission.
  2. Centralize - Concentrate pertinent interactions and student priorities into a singular dashboard.
  3. Update - Bring site aesthetics up to speed with current visual trends and patterns.
The Solution
I narrowed my focus on improving the existing systems that students felt were mandatory for succeeding in their classes(viewing instructor-uploaded content, submitting assigments, and checking grades). These interactions were noted as the most difficult to navigate.
Redesigned dashboard view.
  1. Assignments - A centralized location for the most recently assigned work.
  2. Courses - Easy access and viewing for each course a student is enrolled in.
  3. Updates - The most recent announcements in a centralized location.
Redesigned file view.
  1. Visible Search - File search that appears immediately to the user, as opposed to hidden within the layers of folders.
  2. Folders and Files - Folders and files in an more intuitive, GUI, much like Google Drive’s organization.
User Flow
Redesigned site flow of the home page.
Redesigned site flow of a course page.
Mid Fidelity Mockups
Style Guide
Interactions
A brief glimpse into all screens.
Submission made simple.
Fresh file delivery.
Final Mockups
What Lies Ahead
In the future iterations of this redesign, I would want to explore internal version of taking quizzes and add more complex functionality to the file viewing system. I felt that the UI fixes went hand in hand with the usability issues themselves, as clarifying the UI allowed for the experience to be clarified in return. Despite this, I would continue to improve the flow of the more minute interactions to not only make it usable, but as delightful of an experience as possible.

I thoroughly enjoyed learning about the ways students interact with the software designed to help them succeed in school. I learned about the minute, individualized frustrations Berkeley students had with the application and the wider, more general issues students had.