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?
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.
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.
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.
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
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.
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.
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.
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”.
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.