Michael Harper

UX and Product Designer

iLearn Video

Overview

Universities have always had a need for video and the spread of video cameras through webcams, tablets, and smartphones has increased the amount of video that faculty and students generate themselves. Unfortunately, learning management systems rarely have support for these kinds of borne videos. The iLearn Video project aimed to add robust video support to San Francisco State University’s Moodle based learning management system, iLearn.

Working as the sole user experience designer on the team, I reached out to faculty, students, and developers to established technical and design requirements. Though the tool would exist as an application outside of iLearn, it needed to match iLearn's visual design. Additionally, the user side of the interaction needed to be virtually seamless. Finally, students needed the ability to easily add videos from desktop, tablet, and mobile devices.

Focus Groups and User Interviews

After identifying students and faculty using iLearn for video distribution, I set up focus groups and user interviews to discuss video workflow and concerns, to establish personas. This allowed me to identify pain points both inside and outside of the learning management system that could be resolved by the application. For example, handling video often required arduous video editing software, complex video codecs, and working with video capture hardware. To reduce some of this friction, I developed a wide array of video encoding profiles. This meant that form the user perspective, video could be uploaded directly at capture source quality¬ without additional encoding, allowing video to be uploaded directly from camcorders, phones, and other devices.

Moodle's file picker dialog modified with new functionality. Early wireframes like these helped guide technical discussions with the developers, while also helping engage stakeholders in the project. Screenshot of iLearn Video upload interface The final upload user interface at it exists in iLearn today.

iLearn Video Mobile App

In addition to design a fully responsive web app, I also designed and launched a mobile app for Android and iOS. This greatly simplified the upload process. Rather than logging into the iLearn learning management system through a browser, users could simply open an app with persistent authentication and upload videos in a few taps.

The app was tested in focus groups using Balsamiq prototypes and eventually prototype versions of the app. We choice Apache Cordova as the development platform, allowing me to easily make changes based on feedback to the application via simple HTML and CSS.

iLearn Video Mobile App iOS Version of iLearn Video App

Graphic Design

iLearn Video was a long project and went through a few names before we settled on the final one. Originally, the project started with a San Francisco themed branding, "Presidio." After that, we went with "Walla," a reference to the act of actors having inaudible conversations in the backgrounds of film. I quickly created lightweight branding around each of the different names to help the project have a sense of wholeness.

Walla logo

The final logo was a simplification of my work on the iLearn logo with a clean, "video" tagline. We hoped to create a logo that would look good on the web and in print.

iLearn Video logo

I also designed the iLearn Video App icon for mobile.

iLearn Video app icon

Conclusion

The iLearn Video feature is still in use today, though the accompanying mobile apps have since been deprecated as mobile browsers gained better support for video. With the app launched, much of the design iteration shifted to adding support for edge cases. For example, some smart phones provided video in non-standard formats that our encoding server had trouble with, like rotation information when a video was recorded in portrait orientation. I worked with the developers to come up with intelligent ways to handle these edge cases, either with helpful error messages or improved encoding codecs when appropriate. I also helped expand the application to support audio like recordings and podcasts, which was an emergent use case we had not expected.