UC Berkeley Class Editor is a web application that helps professors promote their classes to students by allowing them to provide information about their background, as well as to customize class information that would show up on their course pages at classes.berkeley.edu.


Project Statement

As the No.1 public university in the United States, UC Berkeley offers more than 10,000 undergraduate and graduate courses in 2017. However, popular classes are overloaded due to high word-of-mouth publicity, and lesser known classes are often overlooked due to a lack of awareness.Students complain that it is hard to discover new and interesting classes to take besides taking popular classes and professors have to cancel their classes due to low enrollment rate.

With UC Berkeley Class Editor web application, professors are enabled to improve their class enrollment rates and attract students to take their classes by sharing content related to the class topics and information about themselves on the Berkeley Academic Guide website.


Category: Web Application Design
Time: Jan - Mar 2018
Project type: Group Work Team Members: Kyle Tan, JT Kim

My roles:

1. Planned and conducted qualitative UX research, such as, surveys, remote user interviews, and usability tests

2. Facilitated synthesize sessions with the team, and presented actionable insights to key stakeholders

3. Created UX deliverables such as , context scenario, task flows and wireframes to facilitate the Design Thinking process

4. Produced hi-fi interactive prototypes on Sketch and InVision


The gaps between professors and students


We kicked off the project by probing into the why behind these situations. Through listening to our client’s concerns and requests, we identified the students and the professors are the major two stakeholders of our project. Thus, we spent our research time in conducting surveys and interviews with them to help us gain deeper insights into these problems.




Limited class and the professor’s information preclude students from planing out their semesters confidently.


To understand the needs and pain points of the students, we deployed a behavioral survey to ask 33 UC Berkeley students from different degree and school year level about what information they expect to know to help them make a enrollment decision.

student persona.png

However, the course catalog website currently doesn’t meet the students’ needs since it fail to provide helpful course information that the students are looking for when they sign up for a class.




No control over the course page preclude professors from promoting their classes


We talked to two types of professors and identified a type of professors who are newly hired and teach an interesting class that is not well-known and publicized  have the most needs to effectively promote their classes to a large body students and interest in her class from students who are motivated. However, they aren’t able to do that now due to a lack of means and tools that allows them to edit such information.

Laura's Persona.png

So how might we help the instructors share helpful course information with students and ensure students register to classes they like ?


We fill this gap by creating a web application for the UC Berkeley’s professors to share information about themselves, as well as to customize class information that would show up on their course pages at classes.berkeley.edu.

Our visions

  • Giving instructors a platform through which they can easily advertise their classes to the students

  • Within the university’s constraints, maximizing professors’ editing controls on their course pages

home page@2x.png


Start to view the most recent tasks

Follow UC Berkeley’s visual design principles and current bCourse’s UI pattern to make understandable and familiar UI on the dashboard page.  The live status promptly informs users of classes that needed to start editing on the interface. 

class edit_1.1@2x.png


Step 1: All about the basic

Users are asked to share their syllabus, their versions of course overview and expectations of the class. Here we facilitate and streamline users' editing process with visual elements and hint text.  



Step 2: All about "Know more" 

Users are provided with simple accesses to maximize opportunities of sharing multimedia class content with students on class pages. When editing, a progress bar is a helper notifying users where they are and how many steps they left before completing of the edit. 


Step 3: All about confirming everything looks good

Users can review the information and make sure everything looks good before publishing the page to the Berkeley Academic Guide website. Course Logistics information is added here for review to ensure both instructors and students’ end goals are achieved through the design - attracting the right students and enrolling in the right classes. 


How We Got There?

Phase 1 Explore

Upon visualizing the context scenario, we were able to focus on how our personas think and behave while editing the class page. As we considering persona under the context of use, it helps translate scenarios into task flows for specifying what interactions the system must support on each user interface.

Context Scenario Storyboard - Created by Me
Major Task Flow - Created by JT Kim, Kyle Tan and me.

Powerful controls become overwhelming controls

Phase 2 Ideate

To meet the easy to use and powerful controls goals, we firstly tried to design the editing interfaces was to focus on providing multiple editing elements for users to add to their pages and keeping all UI controls on one interface. However, we quickly found that this solution was not optimal for one reason.


Excess customizations cause the class pages have too many extreme distinctions among classes

Phase 3 Validate

“I’m concerned about how students can easily navigate class information on the website if the class information pages are not displayed in the identical layout or orders”

- Joanna, Staff at the Office of Register, UC Berkeley


Problem#2: Layout Inconsistency

The second problem came out after we tested the 2nd draft wireframes with the clients and professors. They were concerned about the distinct class and profile pages may confuse and distract students from making a right class decision.


Solution: We removed the customized layout features and divided the process into three steps: The purpose of these changes was to make sure the final generations of the class profile pages are consistent format-wised, but distinct from each other content-wised.



Feedback: Our team's design earned the most praises from the staffs at the UC Berkeley Registrar office. The key feedback we received from the client is  providing access for professors to upload images relating to their class topics seems hard to be managed because we can't ensure professors share high quality and topic-related pictures to the application. 

Takeaway: What I will do differently is to consider mobile first and responsive design at the beginning of the project. Mobile phones are the most frequent used devices. We should expect scenarios that our users will operate this tool on their phones as well.


You May Also Like