After learning about Vue-related fundamentals, I started looking into the existing codebase for the app I will be working on. The app is used for controlling the flow and judging of a music competition. My current task focuses on the judging aspect of the competition, I will be tweaking the app to make it more user-friendly and suited for this year’s competition which will take place online due to COVID:

Comment Display

In previous years, judges watched the performances live, gave commentary and negotiated marks on the spot. This year, judges will watch and critique YouTube video submissions on their own time. Due to freedom in timing, there is a time gap between watching the performance and moderation of marks. Moderation will require the judge’s feedback again, however, at that time, the judge might only have a vague recollection of the performance, possibly watched several weeks prior. So, a feature that allows the judge to recall back his/her comments will be introduced to the app. This week, I tested out displaying the comments via an expandable panel. But, for more clarity, next week I will test out a dialog implementation instead.

Video Display

The YouTube video and music score is currently accessed by a double tap and long press respectively, which I personally felt wasn’t very user-intuitive. So, upon discussion with my supervisor, I used a Vue plugin to embed the YouTube video in the same page that the judge uses to give marks and comments. Next week, I will be looking to improve the user experience of watching the video and marking at the same time – possible options include picture-in-picture mode and displaying the marking sheet as a bottom-sheet that appears on-click instead.

My progress has been slower this week as I had to spend time to understand the existing codebase. Lack of understanding behind some of the decisions made in the current design led me to a few unsuitable implementations along this week. Communication with my supervisor was important and helped me better understand the audience and setting the app was targeted against. Still a lot to learn, but I will try my best to design with these context information in mind, to deliver a better user experience.

Categories: Experiential


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.