Note: this post was previewed and approved by the customer.
Completed: May 2014.
KidsCerts allows easy creation of certificates for students and children. The niche market is parents and teachers and it features an user-friendly, easy-to-use interface written in HTML5 and jQuery.
In this project I took on a lead developer role. Our designer did the initial design in Photoshop and converted it to clean HTML5 templates. Then I did most of the coding, with occasional help from a a few freelancers we hired through Freelancer for graphics, rewriting, data entry, and other miscellaneous work.
As we were a small team and the product owner was heavily involved during the process, we choose Trello for project coordination. Trello has a very intuitive user interface which is pretty straightforward even for non-technical users.
This is a screenshot of the project page (board) in Trello. You can see that there are several lists, each one containing several cards. This gives a quick visual overview of the project. Everything can be rearranged by drag and drop.
The timeline is along the right side. It is convenient to keep track of the progress of the project. You can also receive board updates via email.
This is the detail of one of the cards, where I discuss an improvement with the product owner. Trello does not have many of the features of other popular project trackers like reporting but we didn’t miss these for this project.
The previous site.
The original site was completly functional but the code and design was done to 90’s standards. It definitely needed a remake. There was little we could reuse from the user interface, so we decided to write it from scratch.
A new design
Here is a screenshot of the initial design made with Photoshop:
For the form designer, the tabbed input takes less space while being easy to use and visually attractive.
I really liked the way the designer structured the Photoshop project. He used a single PSD file with well-organized layers, which you can show or hide to see each individual feature.
The designer also delivered clean and table-less HTML5 templates:
Certificate creator user interface.
The user interface required highly customized forms and real-time updates. We used jQuery along with a mix of open source and custom plugins. This was a bit complex due to the amount of integration required but we got it working while achieving a fast and simple interface.
We used the EasyTabs jQuery plugin. It was a snap to integrate.
We didn’t find any plugin for this, so we had to develop our own. It’s a jQuery horizontal hierarchical selector with several categories. Each contains several items. We found this very simple to use. It also took up little space.
There are also some frames which require a subscription. When selecting one of these, you will get an interactive tooltip asking you to subscribe. We used Tooltipster for these.
For the text inputs only CSS was required. We used msDropdown for customizing the dropdowns.
For the font chooser we used jQuery.customSelect. At the time of developing this, we couldn’t find a more specific one for this task. We used images instead rendering the fonts in the browser in order to speed up load times.
A customized version of the FontFace jQuery plugin was used for loading these fonts on demand.
For the color chooser, we used jQuery Simple Color. The original script didn’t allow us to use rounded borders for each color item, but the code was easy to customize.
Finally, for the multiline quote selector, we used imMultilineList. The possible values are populated automatically as function of the category selector at the left.
This is very similar to the frames tab. However, here you can also set the transparency level using a slider. We used the jQuery Slider plugin for it.
Registered users can also use custom frames:
These are stored on the server and can be reused or deleted:
We used the jQuery File Upload plugin for this.
Non-registered users will see the following interactive tooltip:
Below the form, there is a live preview of the certificate, which is updated as soon as you change anything in the form. This was custom developed.
In the images above, you can see that the live preview is resized automatically depending on the input area height, so its content is always visible.
The old site had a functional pdf generator written in functional-style php. While a bit outdated for today’s coding standards, it well for the most part. Instead rewriting it from scratch, we decided to clean and refactor it, adding a few new features like the background transparency. Click here to download a sample PDF output.
We also made sure that the differences between the live preview and the pdf were minimal by comparing several screenshots in GIMP. Here is one of these. We made the browser output transparent, and then we placed it over the PDF one:
The maximum offset is 4px, due the different font rendering engines. While we could have improved these, we decided to stop here, as most people will not notice such small difference.
We decided to integrate aMember for subscriptions administration and billing. We chose 2Checkout as payment processor as we had positive experiences with it in the past. We skinned the members pages with a cleaned version of the old design. It was working well and looked acceptable so we left it. We will probably integrate it with the new design in a future iteration.
I can say that I’m happy to have driven this project to completion. Developing such a a complex jQuery interface was challenging, but also rewarding for the entire team. We will probably be adding more features in the future, and I will update this post accordingly.