Redesigning an Educational Video Service
This article looks at an educational video service, Hooked On Learning (name has been changed), and my attempts to improve the product through various UX strategies and design techniques.
Hooked On Learning is a service that provides video-recording software for educational programs. The basic functionality of Hooked On Learning is the ability for teachers and students to record videos and provide mark-up during the video, such as notes, text, and audio. Hooked On Learning came with a question on how they could improve their products layout.
To begin with I did a heuristics review of Hooked On Learning’s website. For the heuristic review, I went through and figured out what parts of the site worked well and what parts could be improved upon. Below are the top 10 areas discovered that could be improved upon:
1. Invite Businesses
2. Utilizing a Dashboard
3. Fixing Video Functionality
4. Interface Lacks Padding
5. More Welcoming Home Page
6. Grid Layout
7. Provide a Walk Through
8. Integrate a Calendar
9. Ability to Create a Playlist
10. Provide a Transcript
Crazy-8s:
After completing the heuristic review, I completed a design process called Crazy-8s to see what various layout possibilities there were. For those unaware, Crazy-8s challenges users to create various thumbnails in a short time period. Below is an example of potential layouts for Hooked On Learning:
Upon completion of the various thumbnails, I decided to narrow the layouts down to one specific version that I prototyped. I wanted to focus on including a dashboard that highlighted the various courses and classes and to provide a transcript of the video aimed at making it more accessible. Lastly, I wanted to maintain Hooked On Learning’s ability to leave a comment, video, image, etc:
Working in Sketch and InVision, I created a prototype of the layout for mobile devices:
The initial layout of the prototype was somewhat plain. However, it highlighted the necessary functions to improve the user’s experience. After completion of the initial layout, I created a script for interviewing users to test the prototype:
The prototype questions aimed at analyzing specific tasks that user’s would be faced with such as simple commands like leaving a comment, adding an image, or creating a task. I then tested my prototype on four individuals. Because of COVID, I was limited to testing remotely. This made it difficult to direct users when they had questions regarding the prototype. However, the feedback provided by the applicants proved to be valuable. Some of the things I learned were:
1. Make the titles more intuitive.
2. Provide a login/logoff or some sort of social identifier to notify users the site is in use.
3. Provide a help button to avoid confusion.
4. The icons should look more professional.
Lastly, it was suggested to move the icon options to the top, so you don’t have to scroll all the way to the bottom to utilize them.
With this feedback in mind, I utilized Sketch to create a new layout for prototyping:
The new layout included a top icon that allowed users to see where they were in the app. I also added a transcript button to the video so users could see the captions. I moved the option bar to the middle, so users wouldn’t need to scroll down to see what they could do.
Concluding Thoughts:
With the final prototype completed, I feel the new layout provides a more effective design than the original. Although I was happy with the final product, I feel I could have created a more realistic looking app. Another area that could have used improvement was the color palette as the colors seem to be rather muted. Additionally, it would be useful to conduct further user research to incentivize the product. Reaction from Hooked On Learning was positive!
Alex Strasburg is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (Principles of Digital Design) in the (DGM 2250 Course) and representative of the skills learned.