Founders Joseph Cohen, Dan Getelman, and Jim Grandpre built initial prototypes of Coursekit while studying at the University of Pennsylvania. With a strong product vision and a term of user feedback under their belts, they raised $1 million in a seed round and dropped out of Penn after the spring term to move to New York and focus exclusively on the startup.

Joe contacted me in June, looking for a designer to work on the project. He was interested in rethinking the user experience and establishing a clear design direction. I liked Coursekit’s iterative approach and was impressed by the small team’s focus, drive, and ambition. Coursekit was accepted into the competitive TechStars program shortly before I started working on the project, an indicator that they were off to a great start.

The idea to compete against established learning management systems with university-wide contracts came from experience the Coursekit founders had in the classroom — many instructors are frustrated with existing options because the tools are difficult to use, unintuitive, and bloated with features.

Coursekit’s strategy is to bypass the traditional business model of selling to universities by targeting teachers directly with an elegant and free set of tools (calendar, assignments, gradebook, etc.) coupled with social features familiar to students.

The other emphasis of the product is on fostering a community: student profiles, a Facebook-like news feed, active discussions and chat extend students’ interactions with the material and each other beyond normal class hours.

As Joe described it: “We thought of a class — a group of people engaging with each other, creating conversation, sharing ideas and getting to know each other. Then we thought, ‘Oh, we can do that.’ We are already doing that in other parts of our lives, like on Facebook, LinkedIn, Twitter. We should bring that to education.”

After reviewing their prototypes I identified the main design and user experience challenges and outlined an overall approach. I got up to speed on the front end codebase and started discussing direction with the talented Ed Nacional, who was contracted to develop the Coursekit identity.

Coursekit branding is kept to a minimum in the product itself so that each course feels like a neutral space built around the content and tools. One design strategy employed was to have a consistent UI for instructors and students, but hide main sections like the gradebook from the student navigation. Careful attention was also paid to how the design degraded with less content.

Coursekit’s target market is instructors, so the top of the homepage includes a prominent video introduction and a list of the “simple and elegant” tools. To communicate the real world benefits to instructors, I included a carousel of case studies featuring four instructors who used Coursekit in the fall pilot. The case studies were drawn from a promotional site Sangita designed.

The homepage design is based on a 12 column grid, while much of the product itself takes advantage of a fluid width approach.

To help new users learn to use Coursekit, we considered a few different strategies, including hover tooltips and a guided tour of every screen calling out the site’s features. I advocated a blended approach that aids exploration without forcing users down a single path. A prominent message near the top of each screen provides an overview of what users can do on that screen. More specific tips are inline.

During the fall term, users asked that we make it easier to find basic information about the course, such as the unique listserve email address. Instructors also needed an easy way to find the invite code to add more students to a course.

I designed a “course card” to contain this information. It lives on the top of all screens and is designed to be opened or hidden by the user. Instructor-specific content in the course card in this design is indicated with yellow-orange — this was the color used for instructors before we switched to green.

The people page is an overview of everyone in a course. Users’ photos link to their profiles. For instructors with large numbers of students, it’s also a valuable way to learn students’ names.

To encourage real-time discussion we created a chat feature. Students and instructors can message each other directly or start a chat with everyone in the course who is online. The blue dot and title in the chat window indicate a new message. Chat also became a means of receiving instant feedback on the site from instructors and students during the fall term.

The profile page is one of the few main screens that is fixed width to differentiate profiles from the rest of the site. From a product perspective, the goal is for Coursekit profiles to be the academic equivalent of LinkedIn profiles, with full academic history. Profiles also include excerpts from users’ participation on Coursekit.

All profiles are the same structure. Blue indicates that this is a student profile.

To make updates easy, profiles are edited inline.

The gradebook is designed to give instructors the ability to add assignment types and specify how assignments are graded. I did the design direction based on Audrey’s rounds of IA. During the fall term Sangita and I refined the gradebook interactions before the feature went live.

Users can post a wide range of items to a course’s “stream,” including videos, notes, photos, and questions. Above are designs I created for the developers to represent how presentation varies across post type.

We designed annotated interaction guides to show button states and variations.

I extended Ed’s identity work by creating marketing materials such as this 6′x 2′ poster for on-campus promotion. The open hello box lets students write (or draw) whatever they like.

“Coursekit Raises $5 Million to Reinvent the Classroom”—NYTimes, 1/2/12

“Coursekit Aims To Overhaul How Teachers Run Their Classrooms” —FastCoDesign

“And since Coursekit is easier-to-use [than Blackboard], quick to install and costs nothing it may be irresistible to those professors and their students.” —Forbes

“Right now, it’s free. But more critically, it is a joy to use.” —Digitopoly

“Coursekit does offer a lot of the bells and whistles of a typical LMS: calendaring and grading, for example. But Coursekit gestures towards other things that most LMSes are still struggling to incorporate: sharing, real-time feedback, openness to non-enrolled students.” —Inside Higher Ed

“Picture a cleaner-looking Facebook news feed, centered on a single academic theme, or a group Tumblr blog where each picture, question, or video can accumulate its own discussion in the attached comment thread.” —Fast Company

A valid critique: “Coursekit is certainly simple, although the news feed-centric app has some teachers confused. Coursekit ran a pilot program with 30 professors, and had problems mostly with professors who had never used Facebook.” —BetaBeat

“I’m using @coursekit instead of blackboard to set up my classes for next term. more user-friendly, smoother interface and smart design.” —@dr_edwards

“I’m using @coursekit to setup my courses for next semester. Fastest and easiest course management tool I’ve ever used.” —@jenseninman

“We used the platform in our class this semester and loved it.” —@jasonmendelson

“This website is so good… it makes me cry knowing the founders are a year younger than me.” —@cmbellinger

“.@Coursekit looks very nice; I have all the included tools already as a hodgepodge, but I think this will be much easier for students.” —@evanhr

“I wish we had this 10 years ago. Lucky kids of today.” —@Sofiaqt

Product:
Joseph Cohen, Hunter Horsley

Technology:
Dan Getelman, Jim Grandpre, Tal Safran, Benjie De Groot

Design/UX:
Mark Forscher, Sangita Shah, Audrey Chen

Branding:
Ed Nacional

Motion Graphics:
Ronik Design

Instructor Photos and Interviews:
Alice Lee

Coursekit Team Photos:
Mark Forscher

My mix is live here: Fact or Fiction.

Tracklist:

1. “Bite Marks” — Atlas Sound
2. “Slowly” — Amon Tobin
3. “Sundialing” — Caribou
4. “Seagreen Serenades” — Silver Apples
5. “I’m Not” — Panda Bear
6. “Glue of the World” — Four Tet
7. “Beach Town” — Le Loup
8. “Shiva-Loka” — Alice Coltrane
9. “Cutup Piano + Xylophone” — Fridge
10. “Canoo” — Shelley Short

The HTML5 site exists on its own, outside of the application, for anyone visiting abcnews.com in Safari on the iPad. It can also be accessed through the application in a number of ways (such as going to a story, video, or slideshow).

To visualize how this could all come together into a cohesive user experience, I created sketches fleshing out the user flow and some early thoughts on the UI and worked with the core team to refine. Sketching from our brainstorm notes and early versions of the product requirements document was very helpful to highlight use cases we hadn’t considered yet and the editorial needs of some of the deeper screens.

“TV network ABC has released a custom ABC News iPad app that’s interesting for two reasons—its clever use of HTML5 and the amazing rotating Globe of News.” —Gizmodo

“A lot of people have just ported over iPhone applications, but this actually, is the first time I’ve seen a news site that’s actually taking advantage of the whole interface [of the iPad]..”—Nick Bilton from the NYTimes

“ABC News Puts A Different Spin On Its iPad App” —Paid Content

And my favorite critique from Twitter: “Glad to see the ABC iPad app has really taken key learnings from hip-hop music videos and brought the fish-eye lens to news UI.” —@rdesign

A redesign of Song Isabel Hee’s portfolio. Her work is so strong and the photography so compelling that I wanted to keep the design as simple and clean as possible.