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.
What should V1 of this feature allow users to do?
For Course Creators:
Create a certificate
Edit one of several certificate templates
Allow for creation of a custom certificate using liquid blocks
Set a default certificate to be assigned per course
Allow for both automated certificate assignment upon course completion and manual assignment.
Issue a certificate to a user manually at any time in the student’s lifecycle
View a certificate for a completed course
Download certificate 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 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. These directions were then reviewed with developers and my head of product, with emphasis on feasibility, deviance from our design patterns and usability.
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.
What we would have liked to implement was a live preview of the certificate as you edit it (design direction #2 shown above), but that would have added significantly more time to this feature rollout. We decided to ship the editor below as an MVP and build the WYSIWYG preview ability at a later date.
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 we present 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: