OrganTutor — Design Case

Kyle Clements
Feb 8, 2018 · 5 min read

Overview

The goal of this project was to redesign an instructional tool built in the 1990’s. Over the years, OrganTutor has helped thousands of students learn to play the organ, but it was finally time for an update.

My Role: Lead designer. Conduct user research, design prototypes, and work alongside developers to bring our design to life.

Team: Myself. A professional developer. Two student developers. A videographer. Organ professor (our client).

The Original OrganTutor

OrganTutor is a digital companion to the Organ 101 Workbook. Created in the 1990’s, it provides interactive exercises to apply what students learn in the workbook. Many of the concepts addressed are meant to be reviewed while seated at the organ.

(1) Organ 101 Workbook, (2) OrganTutor start screen, (3) OrganTutor content page.

OrganTutor was built in Adobe Flash and can only be accessed on CD or at specific locations on campus.

Design Process

I repeated the following design process several times to complete this project.

Frustrated Learners

I interviewed instructors and students currently using OrganTutor to gather insights about the current product.

Content is boring: The text, video, and audio samples get the job done…and nothing more.

“It’s got good material, but is painfully boring. Not very motivating or fun. I love the organ, but not OrganTutor.” — Student

Technical issues: Audio and video files frequently do not play properly.

Information Architecture: Both faculty and students struggle to find specific content.

Target Audience: The majority of learners are on campus; however, our client wanted to ensure our new version could support remote students as well.

Observations

The “Organ Lab” allows students to practice the organ while viewing Organ Tutor content on an adjacent monitor.

Students practicing in the “Organ Lab”

Fatigue: Students lower their monitors as much as possible to avoid straining their necks. Many complained about having to maintain an upright position in order to view OrganTutor content.

Worksheet: Students record quiz scores on a worksheet (see below). This worksheet had never been mentioned in prior interviews despite being a clear pain point for students.

Worksheet students use to track their scores with the old version of Organ Tutor.

Identifying Solutions

With an initial understanding of the problems students were facing, it was time to brainstorm.

Learning Management System (LMS) Integration: Recording and reporting scores could be automated to save time for both students and teachers.

Updated Media: Our videographer would re-shoot all video content.

Web-based application: Our client was concerned a web-based solution would limit access for remote students practicing at Latter-day Saint (LDS) meetinghouses. Fortunately, I was able to confirm these learners this issue by confirming these learners do in fact have internet access.

Admin Controls: Our client would be responsible for updating any content beyond the videos. To improve this experience, we chose to create OrganTutor 2.0 using Drupal rather than creating a custom content management system.

Prototyping

Design Precedent: Rather than reinvent the wheel, I decided to take a look at what similar products were doing.

Screenshots from Khan Academy, Udacity, and Udemy.

My Design: Inspired by these examples, I created wireframes with OrganTutor content.

The goal of these prototypes was to facilitate better discussion between team members about the product.

My Mistake — Screen Size: I assumed an iPad/Tablet sized screen would provide the ideal OrganTutor experience…and I was wrong. Thankfully I had thought to verify this assumption via a feedback survey. 28 of the 59 students responded (47% response rate).

47% response rate

Mobile First: Laptops were the most common device; however, mobile phones would be easier to access while seated at the Organ. I began prototyping with this in mind.

Testing

Getting prototypes in front of users is the only way to know if I am improving the user experience. I used InVision throughout the project to conduct user testing.

Example — Listening Exercise Page

The goal of the goal of Listening Exercises is to provide an optional quiz for learners to apply what they have read. I iterated through several layouts for this page:

Several attempted layouts for Listening Exercises.

With the help of user-testing I was able to create an experience that was intuitive to new users and minimized the amount of space taken up by the listening exercise content.

Current solution for OrganTutor listening exercises.

Iterate

Designing OrganTutor is an ongoing process. We have made progress, but there is still much to be learned.

Conclusion — Lessons Learned

Designing OrganTutor emphasized several lessons I had previously read but needed to experience.

Settle questions with data — Interviews, observations, surveys, and usability testing can improve a design much more effectively than simply “thinking like a user”.

Prototypes facilitate discussions — Prototypes allowed me to gather specific feedback from team members and users.

Users don’t say what they need — A core feature of our design (LMS integration) would never have been implemented if I had relied solely on what users told me they needed.

Kyle Clements

Written by

Full-time learner, interested in all things at the crossroads of design and learning.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade