Opensource Matterhorn educational video platform user interface redesign
-
Upload
entwinemedia -
Category
Education
-
view
80 -
download
0
description
Transcript of Opensource Matterhorn educational video platform user interface redesign
![Page 1: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/1.jpg)
matterhorn admin ui
![Page 2: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/2.jpg)
entwine knowledge in motion
requirements
> technology suitable for the community
> modern and proven development stack
as close as possible to 100% test coverage <
> support for i18n and i10n
> code and style documentation
flexibility to integrate local requirements without the need to fork the codebase <
![Page 3: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/3.jpg)
entwine knowledge in motion
![Page 4: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/4.jpg)
what did we aim for
![Page 5: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/5.jpg)
entwine knowledge in motion
choice of technology
> the community uses java, therefore vaadin was a natural choice
> can use existing java service implementation
> write once, run anywhere
> requires a java engineer to customize
> uncertainty about the framework’s future
![Page 6: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/6.jpg)
entwine knowledge in motion
choice of technology
choice fell on angularjs <
> modular development, little to no dom manipulation, emphasis on testing, growing ecosystem
> applies high level concepts to web application development
supported and used by googleand others for a couple of years <
![Page 7: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/7.jpg)
entwine knowledge in motion
development stack
> grunt based javascript setup
> translation through crowd sourcing withvarying degree of “crowd” aspect
easy way to mock endpoints <
![Page 8: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/8.jpg)
entwine knowledge in motion
test coverage
> everything is tested by jasmine, selenium jshint, and the karma runner
as part of the build
> very difficult and not feasible tobuild full end-to-end tests
![Page 9: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/9.jpg)
entwine knowledge in motion
test coverage
> 2’484 lines of code (as of today)
> 2’259 lines of code
83 end-to-end tests, 58 unit tests,
168 assertions<
![Page 10: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/10.jpg)
entwine knowledge in motion
globalization
> internationalizationand localization
> support on the applicationlayer including content analysis
and system messages
localization in the ui <
internationalization provided by the backend keys only in the frontend <
![Page 11: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/11.jpg)
entwine knowledge in motion
i18n
![Page 12: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/12.jpg)
entwine knowledge in motion
local modifications
> obvious ones like workflow options configuration or hold states
> less obvious ones like support foradditional metadata fields
> completely unknown oneslike functional additions
![Page 13: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/13.jpg)
a first walkthrough
![Page 14: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/14.jpg)
entwine knowledge in motion
what’s new
> modern and consistent look and feel
> focus on events rather than workflows
> dedicated backend restful services for the ui
!
supports for roles by means of filtering and saved filters in all lists <
workflows by means of permanent urls <
![Page 15: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/15.jpg)
entwine knowledge in motion
disclaimer
> we may not have managed to please everyone nor get everything right
the first time
> no user testing has been conducted so far
talk to espresslabs about design aspects <
![Page 16: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/16.jpg)
entwine knowledge in motion
list views
![Page 17: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/17.jpg)
entwine knowledge in motion
main navigation
![Page 18: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/18.jpg)
entwine knowledge in motion
list views> actions
!
!
> filtering
> feedback
!
![Page 19: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/19.jpg)
conclusion
![Page 20: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/20.jpg)
entwine knowledge in motion
timeline
> entwine and its partners are in the state of refining the initial design work, wrapping up work on the front end and backend
we are expecting to finalize the workby the end of june 2014 <
> finalized means 80% of the originally intended design and close to 95%+ coverage of the current ui’s functionality
![Page 21: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/21.jpg)
entwine knowledge in motion
get involved
> ui will be released as soon as it’s finished on a separate branch awaiting testing and feedback
feedback is welcome as are resources that help fund implementation of that feedback <
![Page 22: Opensource Matterhorn educational video platform user interface redesign](https://reader034.fdocuments.us/reader034/viewer/2022051816/5455c29eaf7959795d8b496f/html5/thumbnails/22.jpg)
entwine knowledge in motion
closing remarks
> matterhorn will get a nice look and feel which will help convince potential adopters on the
non-technical level
getting started on customizing without coordination will ultimately lead to a fork <
> coordination will be the way to make sure the admin ui will serve the community