WETO

WETO is University of Tampere's education tool that is used return course assignments, share course materials and other contents. It is mostly used in SIS (School of Information Sciences) because WETO contains autocompiler and autograding systems for programming tasks.

WETO project was my first "real" software project. The project's employer was SIS and I was a part of the team which included me, another trainee and two instructors.

MY ROLE

My responsibilities in this project were mainly UX- and UI-design, usability testing and Front end-development. At the beginning of the project my task was detect usability problems and solve how we can resolve them. So our team started designing how to get rid of those problems and then finally clear out how to implement better solutions for each problem. After the implementation it was time to the testing part where I executed all our usability tests for WETO's end-users.

Main techniques and tools we used in this project were Struts2, Maven, SASS, JavaScript, Bootstrap, ReactJS, jQuery and Ajax.

Let's discover some examples

Front page

Our client wanted WETO to be more graphical and bring some connections to SIS and UTA. We decided to bring graphical elements with background-image which in this case is one of the UTA's buildings.

We also brought the login-field to the main page because WETO's all functionalities are behind the login, so that is the first and the most common task that user will do.

First sight of front page

Navigation

The Biggest usability problem what our team discovered was the old site's navigation menu. Users did not perceive the left-side element being a navigation menu. Main reasons were that the menu was almost always closed and the collapse-functionality of the list-items wasn't visible for the users.

Course front page and navigation

File submission

Other big problem was file submission, where were 3 different phase. What we wanted to do was unite all these phases to one simple view and the best tool for this was ReactJS. With React we were able to do interactive UI-component that show all file submission, autograding and file adding statuses.

Create or edit file submission

PEER REVIEW & GRADING

In WETO students can peer review other students weekly excercise and course works. We wanted to create the whole peer review experience more pleasant. In new version we brought all the components in the same view. In the old version user had to use seperate .pdf documents to see review instructions and each review was separate page. In new one, user is able to see the instructions above the each task what he/she is reviewing. User can create / recieve several reviews in each task and now user can make reviews and see his/her own reviews in the same view. The content of review is "hided" inside of collapse-element.

Create or edit file submission