OrganTutor — Design Case
Creating a digital guide to playing the Organ.
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.
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.
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.
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.
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).
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:
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.
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.
