c300.png

Teachable - Certificates

 
 
 

Course certificates

____

2018 / PRODUCT DESIGNER / WEB

A student completes a rigorous and challenging course. How do we celebrate this achievement?

 
 
 
A student getting a certificate upon course completion

A student getting a certificate upon course completion

 
 
 

Background

Teachable is an edtech startup that enables anyone to create their own online courses. We have people that teach everything from feng shui to javascript, with 18+ million students learning on our platform.

One of our most requested features has been around allowing a school owner to design and issue a certificate to a student upon said student completing a course, as both an indicator of course completion and a way to celebrate the accomplishment of completion.

Role

I worked with a team of 4 (head of product, front-end dev and QA) over the course of two months to build out this feature. Along with being the sole designer, I was also the de facto project manager.

 
 
 

 
 

Discover

What's the problem? 

“Just checking to see how soon the system will be able to automatically generate certificates after a student takes a course. I have to manually generate the certificates and it is very time consuming. Please please help in this.”

Being an education platform, we were frequently getting requests like the one above around having an automatic certificate issuance feature. Certain schools need their students to have proof of course completion; with no native certificate feature they end up having to devise workarounds involving Zapier integrations to third party certificate software.

So if the primary issue is proving course completion, why build out a certificates feature?

We decided to go the route of building an MVP to see if it would move the needle on upgrades (none of our competitors had a native certificate feature), keep people within our ecosystem, as well as gate it to our professional plan. This served to make our professional plan more valuable, as well as providing an area of differentiation between our pro plan and our cheaper basic plan.

 
 
 

How do we measure the impact of this feature?

  • % of schools with an active certificate

  • Number of upgrades from Free/Basic -> Professional that can be attributed specifically to Certificates (using the Certs specific upgrade gate)

 
 
 
 

 
 

Ideation

 

I worked with my head of product to whiteboard out our initial problem statement, design stories, flow considerations and questions.

We got to a point where we came up with a shared approach on how to handle versioning, customization, manual issuance and upgrade gating.

8.png

I collaborated with Paperpillar, an agency we have on retainer, to come up with a few design directions based off initial wireframes and our design patterns.

Two alternative design directions for the certificate editor

 
 
 
 

 
 
 

Implementation

Upon creating a certificate, a user can choose between three certificate templates, as well as the ability to build a custom template using a liquid theme. The three templates would have similar layouts, but customizable text and border/text colors.

 
7.png
 

As a school owner edits a certificate, we decided to pre-populate the name of the school, the course that it relates to, as well as the student name. Everything else is up to the certificate creator.

 
Certificate editor screen

Certificate editor screen

 

The index screen is where a user can manage the current active certificate, as well as see a list of alternate inactive certificates. Each certificate has a preview, as well as a running list of students the certificate has been issued to.

The idea of the active certificate correlates with automatic issuance upon completion—if there are no active certificates, nothing happens when a student finishes a course.

 
Certificate index screen

Certificate index screen

 
 

Below are the three certificate templates presented to users. Each course certificate has a unique serial code. A certificate creator can edit the border color, primary text color and secondary text color, as well as upload their own signature file.

 
 
 
 
 
 

Students are able to view and download the certificate as a PDF in their course detail screen. Once issued, a certificate lives permanently on their course detail page, unless deleted or replaced by the school admin with a new certificate.

 
9.png
 
 
 

 
 

Results

 
 

The course certificates feature launched to users on our professional and up plans in July 2018.

Here’s some feedback from the Teachable Facebook group immediately after the feature launch:

 
Fb.png
 

In the first month after release, we saw the following numbers:

  • 8% of schools had created at least one certificate

  • 1000+ total certificates created

  • 3,700+ certificate issuances

___

NAVIGATION iaCertificatesdesign systemsCustom RolesDiscussion