2018 / PRODUCT DESIGNER / WEB
A student completes a rigorous and challenging course. How do we celebrate this achievement?
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.
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.
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)
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.
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.
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.
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.
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.
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.
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: