A Case Study for UCSD Extension Blackboard
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
Too many things to read
There are too many sections with too many options, which can confuses users and could lead to information overload.
After clicking for help, user needs to read through loads of descriptions and there is no interface for user to operate.
Redundant external link
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.
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.
Where is the link?
Captions and descriptions are all black, which makes it difficult to identify clickable links.
Discussion board experience
It’s difficult for user to read when forum names are squeezed together and descriptions are all across the screen.
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.
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.
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.
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.
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.
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.
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.
I used InVision Board to present the wireframes. Click here to see more.
Prototype
Add Color to the Play
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.
1. Login Screen
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.
2. Announcement Screen
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.
3. Discussion Board
Dots can show there are new posts in this thread.
4. Threads
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.
5. Posts
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.
6. Reply 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.
