Coursera

Import Flow

This was directly related to the the course template, project, where you can find more context.

Project Overview

Course authors needed an import flow to bring in their finished course template onto the platform. The project consisted of designing a new zero state for the the course building screen, and import steps with success and error feedback.

Impact

The effort enabled our course authors to import a full course for the first time. It laid the foundation to scale to other import methods. It was heralded at the annual partner conference.
  • The supported template was adopted by 69 partners (around 40% of university partners)
  • The flow was used to import 249 courses by end of calendar year (8 months)

Goals

  • Design a starting point to enable an import
  • Design the import flow screens for the steps of the process accounting for success, partial success, and errors

Team

  • Product and Content Designer (Me)
  • Product Manager
  • Front-End and Back-End Engineers
  • Product Researcher

My Role

This was a cross-functional effort, tightly aligned with the product team. My primary contributions were as follows:

  • Co-facilitated workshops, user interviews and usability research
  • Designed all content and microcopy
  • Designed and delivered the final product including interactions and visual style

The Problem

Course authors didn't have a way to import their course template onto the platform.

Process

Understanding the problem

I was already well acquainted with our users and their workflows from the course template project. This was going to focus specifically on the building phase.

Our users, course authors who build the course online
The instructional designer, or another designated course builder, were given the completed course template when the design phase was finished. Their responsibility was to use it to create the course on the Coursera platform.
  • Course Authors were assigned to do the manual work of entering content onto the platform.
  • Instructional Designers' primary responsibility was to act as consultants to the instructors. They were responsible for making sure the material was effective online and presented to learners as intended. When a course builder was not on staff, they could fill that role.
The course building process
The course template was designed to alleviate the pain felt when building the course online. Coursera’s platform was difficult to work with. There was a lot of UX debt and it took an excessive number of repetitive clicks. It could be quite a frustrating experience.
Pain points
  • The Coursera UI was slow in performance, dated and clunky in design.
  • Building the structure and entering data required significant repetitive actions.

Aligning on a direction

My responsibility, in addition to designing the course template itself, was to design the import experience. I brainstormed with the team on where to put the call-to-action. It was pretty clear that the course building screen titled "Edit Content" was the right place. Regarding the import steps, we had a third party integration that we could utilize to build the flow.
Starting with content
By focusing on content first, I could be better set expectations and ensure that the user would have a clear understanding of what would happen when taking an action.
I had an early version of our writing guidelines to refer to for copy. Though it wasn't fully comprehensive, it contained a basic style guide that was enough to provide direction.
Writing Guidelines
Writing for university partners
  • Faculty and Instructional Designers who are engaged in representing their brand and content to the broader world.
  • Use clear, concise, honest, and informative language.
  • There is no need to be vibrant or uplifting.
A note on terminology
Import vs. Upload

Throughout the design of both the template and the import flow, the terms "import" and "upload" were largely used interchangeably by the team. This started to get confusing since they were not exactly the same thing. I led a workshop to align on defining the terms like this:

  • Upload: If you're transferring a file from your local system to a server or cloud-based system, we'll refer to that as an upload. For example, if you're adding a video, image, or document, you're uploading that file.
  • Import: If the file you're transferring is then processed and its data is integrated onto our platform, we'll refer to that as an import. For example, if we're bringing in data from a spreadsheet, like our template, or a compressed file to be processed, that's an import.

Iteration and testing

Zero State
The zero state for the course building page titled "Edit Content" was the most logical place to put the CTA. This was where the results of the import would be seen.
Where we started
Current

The focus was on the main body section of this page. I've zoomed in here. The description was a good example of content being written as an afterthought. It had been that way for a long time.

  • I probed on whether ‘Edit Content’ made sense as the title? Maybe “Course Outline” was more accurate?
  • The description line was verbose with many inline links. Do we need all of that?
  • Where would the CTA go?
Making it clear, concise and informative

There was a lot of pushback regarding changing the title from “Edit content”. It was difficult to find alignment on what the new title should be. But, I could get agreement to simplify the description.

  • We only needed to say what you can do here. And refer them to our resource center for more info if needed.
Early iteration— Minimal CTAs

As an exercise to find the simplest possible solution (as it is sometimes the best), I tried some simple CTAs under the description.

  • "Get Template" would be dropdown with options like ("Download .xlsx" or "Open in Google")
  • "Import content from template" was long but I was emphasizing clarity in this version.
Test 1— Better CTAs

Pushing the design further, I knew we could do better than the minimal effort approach. There were two ways to build, the current manual way or the new import way. They should both be presented so they were immediately recognized as actions to be taken next. The text needed to make the choices clear. We tested this with our in-house experts.

  • I wrote the import option to show its value as the time-saving option. Internal feedback was that it was perhaps too salesy. Authors should already have used it by now. However, those who weren't yet aware might learn of it here and use the template next time.
  • I wrote the manual option for clarity around how it worked.
  • Resource links were added for both. Again, clear, but perhaps a bit long.
  • The dropdown options were moved below the import CTA.
Test 2— More clear and concise. This version launched.

We landed on a cleaner, more concise version of the side by side design. It performed well in usability testing with real course authors and we stayed with it for the launch.

  • In the import section, links were combined. "Get the template" went to a page that had both information and the download link.
  • We went with "Import content" over "Import template" as CTA copy. This was a topic of debate with the team. What was really being imported? The template or the content? It's both. We went with content here for consistency with the page title "Edit Content."
Follow up version

Given the opportunity to follow up on the design as we incorporated a new design system, I made some revisions to clean up the language and go for more for consistency and clarity.

  • Our resource center got a new name, so that was updated from "Partner" to "Educator"
  • I removed "new" from the import icon
  • I changed the import section title to "Import from template" so it conflicted less with the description copy and was a little clearer about what was being imported.
  • I removed the word "Coursera" from the description as it felt unnecessary.
  • Two links were included: "course template" went to a download page, and "Learn more" went to a newly written resource article.
  • Changing the CTA copy to "Start import" set expectations clearly while avoiding confusion on whether the template or content was being imported.

Import steps

We were using a third party integration to handle imports that was not designed with users in mind. We were a bit limited in how much the UI could be tweaked by launch time. When I was able to design a follow up with a new design system, I took advantage of a better UI and made enhancements to the copy.

1. Upload your file
2. Review and Import
Step 1a— Where is the file?

The boxed section was where the plugin was embedded so there was a set of interactions to the file before uploading.

Step 1b— Find the file and upload it

Emphasis was on clear, concise and informative copy to provide clear direction and understanding.

Step 2— See how it processed and import

Feedback here was important because processing could have result in errors or partial errors.

Setting expectations during import

The import could take some time, so we needed to let the user know:

  • What was going on
  • How close it was to being done
  • That this might take a while
  • They could leave and come back without disrupting the process
  • Exploration: "Importing content. This may take a while."

Error states

First launch

Something

—

When the import fails

—

Error states

When a file can't be processed

If there was a processing error during upload we had to communicate:

  • What happened
  • Reiterate what file had the issue
  • Provide a way to learn more "Download report"
  • Exploration: "We couldn't process the following content."
When we have a partial success state

Another possibility might be that the file processed successfully but some of the content did not.

  • A success banner indicated what was processed successfully
  • An alert banner indicated that some content had an issue and provided a way to get more information.
  • Exploration: "Content processed successfully."
When an import is completed with partial success

If the course author choose to proceed with an import that had partial processing success, we needed to give the right feedback when it was finished.

  • A toast at the top of the page indicated content was imported successfully.
  • An alert banner indicated that some content had issues. Reiterate what file was imported and give a way to get more detail.
When no content can be imported successfully

In the case that no content was imported successfully

  • An alert banner stated that content couldn't be imported, the file name, and how to get more info.

Success

The happy state, where everything worked

A simple toast indicating that content was imported successfully.

The impact

This import flow was closely tied to the course template project. The effort was considered a big success and heralded at the annual partner conference. We featured it in a session where I co-presented and shared a demo video I made to walk through the process. By the end of the year, we had metrics to be proud of.

  • The template was adopted by 69 partners (around 40% of university partners)
  • It was used to import 249 courses by end of calendar year (8 months)
My takeaways

While the course template project allowed me to cut my teeth on a rudimentary form of content design that isn't what you see everyday, this portion was more about flows, screens, and microcopy. The copy is crucial to users' understanding of what to expect. I learned as I went, had to think on my feet, and adapted with evolving constraints and opportunities to improve.

← Back to projects

Let's work together! Say hello.

© 2023 Justin Billmeier
LinkedInEmailResume