Accredible Certificates

---

I was hired by Accredible in June 2014 to completely redesign its product from scratch.  In six months, I had implemented an online certificate that rivaled the existing competitors.  The certificates were dynamically generated and used an internal API that I helped design.  Working with the CTO, a designer and a backend programmer, I scaffolded pages, created all of the site's routing and services, designed a deployment process and provisioned the servers for launch around August 2014.

Project Details:

There have been many challenges since launch, but some stand out more than others.  My favourite challenge was allowing issuers to create custom items below their certificates (as evidence of learning through the course).  The team had dreamt up lots of ideas for evidence, and I wanted to allow them to make promises to customers who wanted their own customized items quickly.  I designed a structure for the evidence item that would allow it to use customized templates and store unstructured data with in our SQL database. Then I generalized as many fields as possible and threw the rest of the custom fields in a serialized text field (the backend developer did the implementation of this design). Each evidence item’s category informs the front end of which template to use, and the data to expect.  Then since the site uses AngularJS, a series of directives handle the interaction with each evidence type.  This was still early into my usage of AngularJS, but I’m still quite proud of how easy it is to add new types without the fear of affecting our current evidence items.

Another challenge I faced was actually caused by using AngularJS as our main framework.  Many web crawlers don’t run JavaScript, and AngularJS creates so much of Accredible’s certificate dynamically that they’re practically useless to SEO crawlers like Googlebot (this has changed recently).  I had to find a way to allow bots to access the data they need to make Accredible accessible on the web.  There are a lot of options to accomplish this, but because our codebase was changing so rapidly, I chose to implement a third-party page caching software called Prerender.io to solve our SEO woes.  Accredible uses Prerender with all of its FE projects at the moment, so we only have to maintain one version of our certificate design’s implementation.

My favourite design contribution was the certificate’s login system.  Our customers were complaining that students shouldn’t have to create a password for such a one-off service.  When we were mulling around alternative authentication techniques, I thought back to my time as a gamer using the Steam client.  It has a seemingly annoying feature that makes you enter a code from your email whenever you use a new computer, but I’ve always found that the flow is very painless and gives you the impression of heavy security.  That design won in the debate and has been working well so far.  I still feel a tingle of pride whenever I log in without even having to open the email (because the code is a digestible length, and is visible in the email subject line).

The majority of the other challenges had to do with white labelling and customization.  For example, I implemented the front end to display in 4 other languages so that we could service our Spanish, Vietnamese, Portuguese and Arabic customers.  I also helped to implement two JSON Web Token implementations to allow single sign on with our customer’s sites.

Close

Accredible Dashboard

---

Accredible’s dashboard started as a way to edit your API settings and view a list of the certificates you had issued.  Because the API was so visual, however, I gradually pushed the team to make the dashboard into much more than just a set-and-forget experience.  To me, the current processes in our customers’ organizations wouldn’t adapt to a fully data-based issuing method.  Today the majority of issuers use the dashboard as their primary method when issuing certificates.

Project Details:

My main contributions to the design of the dashboard were mainly around the certificate design workflow.  Once we had created the beta version of the API, it became clear to me when I was interacting with it that a design review system would need to be put in place.  Most of the actual features were based around an organizations existing workflow with paper certificate design and review, but obviously much faster. At first this entailed a live preview of the changes to specific style preference fields, where you could design your certificate with a live preview that I created. Later we added the template system, which allowed issuers to create more complex and customized designs on their own, without any custom code.

Once we had created customized designs, we began running into interesting caching issues.  I had to make sure that the design being shown on the dashboard was the same one that would be shown on a generated certificate.  Later on we also added static screenshots as previews of the issuers' designs.  Keeping these up to date with the significant screenshot delay was interesting, and we initially ran into a lot of browser caching issues.  I ended up solving the majority of them with situation-aware cache busting, so that issuers with 50 designs wouldn’t have to reload them every time they loaded the page, but any time one was updated it would force a refresh.

The custom email template was another interesting feature to implement, because I created a modular design very similar to the evidence items attached to the certificate.  The end result was a modular email template with common blocks and customized sections that could be live-edited and previewed in the browser.  It was a seemingly difficult feature, but since I had already created the unstructured evidence items and the certificate design editor, it was actually a very quick feature release.

Close

Accredible Design Editor

---

A few months after I completed the first iteration of Accredible's certificates, it became clear that customers wanted fully customized designs.  The team had been creating custom templates for large customers, and I began invisioning a data model that would support any certificate design. Today, every Accredible certificate design was created via the WYSIWYG editor I created, that supports text, images, responsive design, custom variables, external images, web fonts and a small design toolbar.

Project Details:

When I first started creating the design editor, I already had a clear idea of how effective a mixture of structured and unstructured data can be for rapidly changing applications from the evidence items I created for the certificate.  I used the same idea again to create a complete visual design though generalized ‘blocks’ that shared basic attributes, but could also use a serialized JSON object to store any attributes we needed. This architecture allowed me to add any new feature simply by adding that as a new possible attribute in the unstructured object. Whenever we updated the design editor, previous designs were completely unaffected, because I was simply adding new attributes that allowed more and more customization.

Although adding features was a major consideration in my design of the data model, this project was also one of my proudest project management moments.  We managed to release the designer relatively quickly because I ignored the temptation to make Photoshop for certificate designers.  Today the certificate designer has layering, a change history, a collection of fonts and all sorts of features that were not there when it was released.  But when it launched two weeks after we began creating the prototype, I was just as proud of it as I am now because all of the features it contained worked.

Launching this feature wasn’t easy, however, as all of the existing certificates had style preferences, settings that changed the appearance of a standard certificate design.  Before we released templates, I had to make sure that both design types could work simultaneously, and that the issuers creating certificates solely through the API would not be forced to manually create templates.  I worked out a hierarchy with the backend programmer that allowed issuers to slowly phase into templates whenever they were ready.  It turned out to be less of an issue than we thought however, because the certificate designer was very popular when it was released.

Close

Udacity Talent Source

---

In early 2016, Flipkart (a prominent e-commerce company) announced that it hired 3 developers through Udacity’s Talent Source platform without conducting any job interviews.  To quote an article on the topic, “The only things the company takes into consideration are the candidates’ Nanodegree projects and their Udacity profiles."  That is the main purpose of the Talent Source directory, an employment directory that I have been responsible for since before it had a name.

Project Details:

Talent Source is primarily a search product, so naturally the most interesting aspect of this project was the formatting and sorting of the search results.  A simple keyword search might order search results by the most relevance or the newest match.  Talent Source is a search based on a candidate’s location, their skills, their education and also keywords.  I realized quite early into development that although the search results were becoming more relevant, the interface also had to tell the user why the results were relevant.  I crafted the results to display the location prominently, the matching degrees and to sort their skills not just by experience but also by what was searched for.  Currently, after the second major release, the profile actually displays all of the recruiter’s search filters and which ones match the candidate they are looking at.  All of that evolved from thinking about how the recruiters would react to a list of search results.

The skills sorting became one of the most complicated components.  Over the course of the project, I iterated from no sorting, to experience levels (beginner, intermediate, expert), to weighted skills and then finally to user-controlled ordering.  The weighted algorithm was more complex than user ordering, because it was a combination of experience level and skill importance, as some skills are in high demand in the marketplace.  I wrote a basic function to combine the user’s skill level in that area and the importance of the skill, so that their top three (there was only space for three on the summary) were their most marketable skills.

I also created a system for Talent Source to be available in as many languages as Udacity wants to offer. This implementation was particularly interesting because Udacity wanted to add more languages without requesting changes from Accredible.  I designed a process for them to update their own managed repository of all of the language strings, and used an automated loader based on the language users selected to load in the translation.  Even the language list is stored in that repo though, so they can add new translated phrases and even new languages without even consulting Accredible.

Close

Udacity Profiles

---

Udacity is one of Accredible’s main customers, and for a seed-stage startup, losing a major client is not really an option.  That’s why Alan, Accredible’s CTO, chose me as the primary contact for Udacity.  Once he secured the deal, it was my responsibility to deliver.  The healthy, symbiotic relationship that Accredible has with Udacity today (on both the business and the software level) is something that I am incredibly proud of.

Project Details:

Accredible started consulting for Udacity in early 2015, and fairly early it was clear that the projects we were working on were important to them, and that they wanted them quickly.  We decided that using Accredible’s core credential model was both faster and better for our business, but that meant that I had to manipulate it into the profile design that they had envisioned.  The profile uses a large service that manipulates the model that’s received from the server into the formats needed for the profile, but only in the fewest cases required.  In most cases I advocated moving that kind of logic onto the backend, occasionally helping with the formatting of serializers, so that it would be more maintainable in the future.  Because of the amount of changes to the profile structure that Udacity requested, this was definitely one of my smarter moves (thank you web architecture books).

The technical challenge that was the most fun to implement was definitely the Chinese localization. I had done localization before and generally it’s a complex but mostly tedious task.  This implementation was particularly interesting because Udacity wanted to add more languages in the future, and wanted to add them without requesting changes.  I designed a process for them to update their own managed repository of all of the language strings, and used an automated loader based on the language users selected to load in the translation.  Even the language list is stored in that repo though, so they can add new translated phrases and even new languages without even consulting Accredible.

The most frustrating feature was one that sound have been quick and easy, implementing an HTML5 image cropping library.  I found an issue with the library both because of the context the cropper was in and also because of how iPhone photos are stored.  Needless to say, I was surprised that that feature took so many resources, but looking back, solving it was a useful learning experience about file formats, browser and OS support, HTML canvas and image resolution.

Overall, these profiles are some of my proudest work to date, and I think that they showcase the unique value that Nanodegrees provide their graduates in a undeniably modern and sleek format.

Close

Hootsuite Directory

---

Hootsuite saw the value that graduates see when they receive a certificate of their achievement.  When it hired Accredible to create a directory of all its social media professionals, it wanted to use the certificate to motivate its grads to create a full online employment profile. Designing a flow for that to work, and minimizing friction along the way, was my problem.

Project Details:

The most rewarding component of this project for me was that it was the first repository I created that used the same backend server as our core product, but had completely separate front end code from the rest of our past projects.  Separating the site in this way allowed me to maintain 5 major projects single-handedly (just the front end) despite doubling the usage of each product.

But back to the directory. Hootsuite had an interesting workflow in mind for its graduates when I began working on their Social Media Certification directory.  It offers online courses on Social Media skills, and it wanted to create a central directory of all of its graduates so it could create a database of professionals in the industry.  When graduates completed the certification course, they would fill in their professional information in a short, seamless questionnaire format, culminating in a complete online profile, and their certificate.

As someone who had created a platform for professional profiles before, I knew all too well that people need motivation to fill these things out. They also drop off very quickly when the information is hard to find or when you ask too much. The first thing I had to create was an integrated sign on with their learning management system, Thinkific.  We created a JSON Web Token (JWT) system with Thinkific, and I designed the routing and communication format.  Essentially I created a complex handshake between Thinkific and the directory that either creates a new user or signs an existing user in.  From the user’s perspective, all they had to do was click and wait.

Then we had to create a visual flow that drove the user through this questionnaire and reminded them that they were only a few steps away from their certificate.  I made sure that the state of the questionnaire was preserved no matter how users returned to the profile.  I also designed the interface to point directly to the remaining fields if you returned to an incomplete questionnaire. Today the directory has more than 1300 graduates, and the engagement rate of the profiles is surprisingly high.

Close

Moodle Plugin

---

When Accredible launched its certificate API, it needed as many integrations as possible for issuers to make certificates.  I chose to make the Moodle plugin because it was a PHP framework and I had experience with LAMP stack. The project gave me a first taste of the open source model (forking, creating and maintaining) as well as some very useful design patterns.  The Moodle plugin is still Accredible’s largest integration and I’ve been maintaining it for almost two years as we updated our main product.

Close

Startup Camp

---

This was the most intense 10 week program I have been a part of.  By the end of the program, I had pitched our products hundreds of times, interviewed many potential customers and launched about 10 web pages.  The camp required us to have clear weekly objectives, and I routinely worked full days at the tech center to reach ours.  We were a team looking for a product, and as the CTO, I was the main builder.  I demoed our most promising project to Penny Pritzker, the United States Secretary of Commerce, during her visit to Silicon Valley (see above).  The final demo day was equally exciting, but that pitch was definitely the strongest memory I have of the camp.

Close