c300.png

Teachable - Certificates

 
 
 

Celebrating course completion

____

2018 / PRODUCT DESIGNER / WEB

How do we build a way for school owners to design and automatically issue certificates to students that pass their course?

 
 
 
A student getting a certificate upon completion

A student getting a certificate upon 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 over 18 million students learning on our platform.

One of our most requested features has been around allowing a school owner to issue a certificate to a student upon the student completing a course.

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 responsible for being 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 a certificate issuance feature. Certain schools needed their students to have proof of course completion; with no native certificate feature they ended up having to devise workarounds involving either manual certificate completion or using Zapier integrations to third party certificate software.

Another benefit of building our the certificates feature is that we’d be able to gate it to our professional plan. This served to make our paid plans more valuable, as well as providing an area of differentiation between our pro plan and our cheaper basic plan.

 
 
 
 
 

Design stories

So what should V1 of this feature allow users to do?

  • Edit and customize a certificate

  • Set a default certificate to be assigned from a list

  • Switch between automated assignment of certificates and manual assignment.

  • Issue a manual certificate to a user

  • View a certificate and download it as a PDF

 

How do we measure the impact of this feature?

  • % of schools with an active certificate

  • Number of upgrades from Free/Basic -> Professional

 
 
 
 

 
 

Ideation

 

Much of the initial ideation consisted of working out edge cases around downgrading (since this is a feature only available on certain plans), issuance of multiple certificates (how to manage several versions of a certificate once it has been issued), how to handle one-off certificates, as well as figuring out what info would be customizable by the school owner.

I worked with my head of product to whiteboard out our initial problem statement, design stories, flows 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
 
 
 
 

 
 
 

Implementation

Upon creating a certificate, a user could 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 made 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 a tally of how many times the cert has been issued/a 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 then nothing happens when a student finishes a course. This also happens if a user toggles the option to “Issue Certificate Manually”.

 
Certificate index screen

Certificate index screen

 
 

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

 
 
 
 
 
 

On the student side, they’re able to view the certificate as well as download it as a PDF in their course detail screen. Once issued, a certificate lives permanently on their course detail, 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. In the first month after release, we saw the following numbers:

  • 32 new upgrades

  • 1k certificates created

  • 3.7k certificate issuances

___

CertificatesAdmissions StoryFree AccessConversations