Presenter: Bert Coenen Organisation: KU Leuven Description: At KU Leuven, we developed a new portal to replace our tabs-and-modules-based portal. The portal runs outside / on top of / alongside Blackboard. It aggregates information from different sources - Enrollments - Updates and messages - User-targeted tools, links and information Key features: - Course list - Inline access to updates, messages, settings - Filter, search and customization tools: - Favorites - Colours - Banners We're also introducing a new design for course pages. Key features: - Based on the latest Learn theme - Enhancements - Simplified, inline content creation - ""Intelligent"" learning modules - ""Productivity"" enhancements - Availability of courses and items - Drag and drop - ... - Responsive design

1. Ch-Ch-Ch-Ch-Changes made at KU Leuven
A new portal and custom course design
Bert Coenen, Toledo

2. It's a portal, Jim.
But not as we know it...

3. 3

5. • Notifications
• Stream
• Chronological
• By source
• By type
• Overload!
• What's important?
• Search?
• Filter?

6. • Enrollments
• Courses
• Organizations
• Grouped
• Extra info
• Role
• Instructors

7. • Quick Links
• "Internal" tools
• External applications
• Profile- / role-based
• Custom set of links
• Student / staff
• Campus-based

8. 8
Why?
• Demand
• Users
• Management
• Within team
• Limits
• Maintenance
• Performance
• Flexibility
• edX - pilot for
Moocs and
Spocs

9. 9
How?
• User input
• Usability study
• User survey
• Interviews
• Focus groups
• Alpha-release
• Beta-release

10. Requirements
• Modern
• Technology
• Look-and-feel
• Fast
• Flexible
• Upgradeable
• Mobile

11. 11
Features
• Uncluttered workspace
• Clean navigation
• Separate views
• Enrollments
• Notifications
• Filters
• Customization

12. https://www.youtube.com/watch?v=eg8-_Q79eTo

13. Demo
• Main modules
– Courses and organizations
– Targeted information
– Schedule
• Navigation
• Search and filter
• Anatomy of a tile
• Updates and messages
13

14. Look!
It's moving.
It's alive. It's alive...

16. Why?
• Initially: bug-fixing
• Fix layout-issues
• Using only CSS
• Later:
improvements
• Modify elements

17. How?
• Brands and themes
• New theme
• Based on Bb's default
• Extra CSS-files
• New icons
• CSS alone...
doesn't get you far
17

18. Enter Javascript
• Blackboard themes:
• No custom JS
• Modified template
• Include JS-file
• Dynamically

19. • Modify features, fix bugs
• Small changes
• Modified behaviour
• Medium changes
• New features
• Large changes
• Custom applications
• Mobile accessible layout
(MLFTP)
• Exam setup (x-Toledo)
Anything is possible...

20. Requirements
• Never a formal set of requirements
• Two categories
– Fixes for actual and perceived bugs (poor workflows)
– Addition of functional / ergonomical improvements
• Very much an ad hoc process
– Bug encountered?
– Missing feature identified?
• When to stop?
• Maintenance?
– Impact on upgrades

21. https://www.youtube.com/watch?v=zCcz_hpXKdc

22. https://www.youtube.com/watch?v=zCcz_hpXKdc

23. Demo
• Navigation
– Student
• Custom icon set
• Directory view
• Collapse and expand
• Maximize / full screen / print
• Tours
– Instructor
• Tours
• Contextual help
• Availability
– Course
– Content
23

24. Demo
• Course contents
– Content creation
• Single button
• Contextual insert
– Content organization
• Drag and drop

25. Demo
• Learning modules
– "State"
– Enforced sequential navigation
25

26. Demo
• Forms
– Move form elements
• Date fields in announcement form
• Uncheck mail option in edited announcement
– Remove form elements
• No "prohibit backtracking" in tests in the dedicated exam environment
• Remove "Save as draft" in assignment form
– Change default values
– Lookup in lists
• Mail select users/groups

27. Demo
• Tests
– "Print test"-feature for instructors
– "Quiz" behaviour
• Extra option in test's properties page
• Immediate feedback
– Skip "unnecessary" steps in test
• Confirmation before start
• Confirmation on submit (page shown before feedback)
• Completion container
– Fix positioning issues
• Un-answer a question

28. 28
Mobile accessible design

29. 29
Mobile accessible design
• Not: separate mobile access
• https://m.toledo.kuleuven.be
• Has been in use for + 3 years
• Alternative for / complement to
Bb Mobile Learn
• Stripped down feature set
• Truly responsive design
• Same page, same URL
• Same theme
• Different layout
• ~ Fully featured

30. 30
It's Blackboard, Jim.
But not as we know it...
Mobile accessible design
• CSS- and JS-based
• Custom navigation structure
• Customized content view
• Customized tables
• Major changes to tests
• Discussion boards
• Journals, blogs, wikis...

31. https://www.youtube.com/watch?v=K3Zc2YuwFyw

32. Demo
• Portal
• CourseView
– As student
• Navigation
• Course content
• Discussion board
• Take test
– As instructor
• Navigation
• Edit mode
• Content creation
32