A Case Study for UCSD Extension Blackboard

UCSD Blackboard redesign with new visual

Introduction

UCSD Extension Blackboard is a learning platform. I use it for tracking classes, joining discussions and checking scores. It’s one of the least user-friendly platform I’ve ever used. There are design issues such as visual design, user experience insufficiency, and complex user experience flow.

Identify Issues

Login

There are too many sections with too many options, which can confuses users and could lead to information overload.

Login — Help

After clicking for help, user needs to read through loads of descriptions and there is no interface for user to operate.

FAQ

FAQ page only contains single external link, which is inefficient for user to solve their urgent problems. Quick solution is to paste all the FAQ content here instead of having an external link.

Syllabus

This page only include a document name with no sign it’s a clickable link. User needs to download it for further detail. Quick solution is to paste the syllabus content into this page.

Lessons (also Resources, Assignments,…etc)

Captions and descriptions are all black, which makes it difficult to identify clickable links.

Discussion Board

It’s difficult for user to read when forum names are squeezed together and descriptions are all across the screen.

Discussion Board — Threads

It’s difficult for user to identify which topic they clicked into. Seeing a bunch of answers doesn’t help. All author names are bold, and text within updated thread are bold as well, which may cause confusion. There is redundant affordance (the drop down icon) for user to open the thread, which can be done by clicking on the title.

Discussion Board — New Thread

How to add image or table? There are no options for adding image or table on the tool bar. The only way to do it is right click in the input field for extra actions.

Discussion Board — Add Link and Image

When user tries to add links and image, a new window would pop up. There is a drop down list full of non-nature language user may not understand.

Brief Case Study of Other Similar Sites

After reviewing these issues, I’d like to show some screens from University of Washington Canvas. It’s another learning platform I used for educational tracking during my graduate program. It has a simple, elegant and user-centered design.

Landing page after signing in

UW Canvas uses cards and different color for user to quickly differentiate courses. Side menu uses purple to present UW branding. The screen is simple and clean without any other extra information.

Course information page with sub tabs

There is sub navigation menu listed after the main menu. Using white as selected tab and extended to the whole page enables user to know where they’re at. It uses color band to divide each sections. Clickable links are universally blue.

Discussion board page

For discussion board, Canvas uses capsules to show different discussion topics.

Solutions

There are more detail user experience and visual issues haven’t been revealed. But, issues above are the ones that influence usability and hinder user to track their education activity fluently. The functionality of UCSD Extension Blackboard is more than complete. Yet, the whole visual appearance, information architecture, and user experience flow are not attracting user to fall in love with this site or at least feel good using this platform. I’d like to improve this user interface by redesigning it with the users in mind and referencing some modern design guidelines.

Due to limited time and effort, I was unable to redesign the whole UCSD Blackboard. So I decided to redesign the discussion board experience. I started with user flow from login to reply a post in discussion board.

Discussion Board User Flow

Wireframe

To ensure the usability, I created gray scale wireframes according to the user flow shown above. The reasons why I redesigned are explained in the following prototype section.

Black and White Wireframes

I used InVision Board to present the wireframes. Click here to see more.

Prototype

I referenced UCSD’s official color palette as the main colors of the site. My plan is to use navy blue as the navigation background (larger area) and gold as action button color. Keeping text and background color white, gray, or black to make the visual as clean as possible.

To make the main action more obvious and reduce confusion for user, the sign in page should be as clean as possible. First, I’d like to hide the help functions under “Help”. Then, I’d put “change text size” and “high contrast” under “Setting”. Finally, I’d put the whole tutorial session under “Tutorial”. I’d move the quick link for grade and transcript from the login page since it requires user to log in.

I’d make the side menu more explicit by referencing UW Canvas. Adding underline to clickable link may help user to identify entry points. Unnecessary icons should be removed.

Dots can show there are new posts in this thread.

I added discussion topic and description on the top of threads so that user wouldn’t feel lost and uninformed. I also cleaned up the table by removing unnecessary action buttons and columns. The only obvious action button is create thread.

I kept the discussion topic and description on the top. Reducing the action buttons helps keep the page clean. The new visual hierarchy is prompting user to do the primary action: reply a post.

I added functions like “add image”, “insert table”, and “add attachment” to editor toolkit for quick access. Also, I made the primary action button “submit” more obvious by visual hierarchy.

I used InVision to create interactive prototype. Click here to see more.

UX Designer / Information Architect from Taiwan, now living in Seattle.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store